нарот потскажыти пожалуста по скайпу ато я нечё непоинмаю плиз вот мой скайп misha_9632
Скрипт горизонтального ниспадающего навигационного меню (css+html)
Сообщений 61 страница 73 из 73
Поделиться622011-06-07 22:24:41
Вы можете объяснить мне подробней как сделать такое миню, какое показано на картинке в 13 посте??
я его ещё немного усовершенстоввал
какие отличия между старой (13 пост) и новой версией?
1. не надо ничего вручную прописывать в скрипте (ни адрес вашего форума, ни что-либо ещё)
2. кроме предыдущих выпадающих пунктов (Профиль, Сообщение, Администрирование) выпадающим стал ещё и список Участники (но корректно отображаются только ники написанные латинским шрифтом из-за того что наш любимый сервис, к сожалению, пока не поддерживает кодировку UTF-8)
3. скрипт существенно сократился и стал более грамотным (гости не видят те пункты меню, которые им не положено, пользователи соответственно тоже)
Выпадающее главное меню. v4
в html-верх:
<style type="text/css">
#pun-navlinks.section{display: block;position: relative;z-index: 1000;opacity: 0.9;filter: alpha(opacity=90);}
#pun-navlinks.section ul.container li {height: 24px;display: inline;position: relative;float: left;}
#pun-navlinks.section ul.container ul {width: 175px;list-style: none;display: none;position: absolute;top: 16px;left: -5px;background:#828282;}
#pun-navlinks.section ul.container ul {-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;}
#pun-navlinks.section ul.container ul:after /*From IE 7 lack of compliance*/{clear: both;display: block;font: 1px/0px serif;content: ".";height: 0;visibility: hidden;}
#pun-navlinks.section ul.container ul li {width: 175px;float: left;display: block !important;display: inline; text-align:center;font-weight:bold;}
/* 2nd Menu */
#pun-navlinks.section ul.container li:hover li a, #pun-navlinks.section ul.container li.iehover li a {float: none;color: #ffffff;}
/* 2nd Menu Hover Persistence */
#pun-navlinks.section ul.container li:hover li a:hover, #pun-navlinks.section ul.container li:hover li:hover a, #pun-navlinks.section ul.container li.iehover li a:hover, #pun-navlinks.section ul.container li.iehover li.iehover a {background: #555555;color: #ffcc33;text-decoration:none;font-weight:bold;}
/* Do Not Move - Must Come Before display:block for Gecko */
#pun-navlinks.section ul.container li:hover ul ul, #pun-navlinks.section ul.container li:hover ul ul ul, #pun-navlinks.section ul.container li.iehover ul ul, #pun-navlinks.section ul.container li.iehover ul ul ul {display: none;}
#pun-navlinks.section ul.container li:hover ul, #pun-navlinks.section ul.container ul li:hover ul, #pun-navlinks.section ul.container ul ul li:hover ul, #pun-navlinks.section ul.container li.iehover ul, #pun-navlinks.section ul.container ul li.iehover ul, #pun-navlinks.section ul.container ul ul li.iehover ul {display: block;}
</style>в html-низ:
<!--Меню-->
<script type="text/javascript">
$(function() {if (GroupID==3) {
$('.nog').parent().hide();}
else {$('.markid').map(function(){
$(this).attr('href', $(this).attr('href')+UserID ); });
} });
var url = location.protocol+'//'+location.hostname;
if(typeof (UserID)!="undefined") {
$('#navprofile').append('<ul><li><a href="'+url+'/profile.php?section=personal&id='+UserID+'">Персональный</a></li><li><a href="'+url+'/profile.php?section=messaging&id='+UserID+'">Общения</a></li><li><a href="'+url+'/profile.php?section=avatar&id='+UserID+'">Аватар</a></li><li><a href="'+url+'/profile.php?section=signature&id='+UserID+'">Подпись</a></li><li><a href="'+url+'/profile.php?section=display&id='+UserID+'">Отображения</a></li><li><a href="'+url+'/profile.php?section=privacy&id='+UserID+'">Приватность</a></li><li><a href="'+url+'/profile.php?section=fields&id='+UserID+'">Остальное</a></li><li><a href="'+url+'/profile.php?section=admin&id='+UserID+'">Управление</a></li></ul>');
}
$('#navpm').append('<ul><li><a href="'+url+'/messages.php?box=0">Входящие</a></li><li><a href="'+url+'/messages.php?box=1">Отправленные</a></li><li><a href="'+url+'//messages.php?action=new">Новое сообщение</a></li></ul>');
$('#navadmin').append('<ul><li><a href="'+url+'/admin_categories.php" title="Добавление/удаление/редактирование категорий">Категории</a></li><li><a href="'+url+'/admin_forums.php" title="Добавление/редактирование форумов">Форумы</a></li><li><a href="'+url+'/admin_users.php" title="Поиск пользователя">Пользователи</a></li><li><a href="'+url+'/admin_groups.php" title="Добавление/настройка групп">Группы</a></li><li><a href="'+url+'/admin_options.php">Настройки</a></li><li><a href="'+url+'/admin_permissions.php">Права</a></li><li><a href="'+url+'/admin_censoring.php">Цензура</a></li><li><a href="'+url+'/admin_ranks.php">Ранги</a></li><li><a href="'+url+'/admin_bans.php">Блокировка</a></li><li><a href="'+url+'/admin_logs.php" title="Система ведения логов форума">Логи</a></li><li><a href="'+url+'/admin_prune.php">Чистка</a></li><li><a href="'+url+'/admin_massmail.php" title="Массовая E-mail рассылка">Рассылка</a></li><li><a href="'+url+'/admin_fields.php" title="Дополнительные поля профиля">Поля</a></li><li><a href="'+url+'/admin_style.php" title="Свой стиль">Стиль</a></li><li><a href="'+url+'/admin_pages.php" title="Добавление страницы">Страницы</a></li><li><a href="'+url+'/admin_promotion.php" title="Метатеги/Поисковые системы">Раскрутка</a></li><li><a href="'+url+'/admin_paid_services.php" title="Платные услуги">Платные услуги</a></li></ul>');
$('#navuserlist').append('<ul id="userpol" class="nog"></ul>');
$.get('userlist.php','',processContacts);
function processContacts(data){
$(data).find('td.tcl').each(function(){
var JUser=$(this).find('span.usersname').text();var ULink=$(this).find('span.usersname a').attr('href');
$('#userpol').append('<li><a href="'+ULink+'">'+JUser+'</a></li>'); });}
</script>Поделиться632011-06-26 00:02:56
Горная Снежинк@ написал(а):
Вы можете объяснить мне подробней как сделать такое миню, какое показано на картинке в 13 посте??
я его ещё немного усовершенстоввал
какие отличия между старой (13 пост) и новой версией?1. не надо ничего вручную прописывать в скрипте (ни адрес вашего форума, ни что-либо ещё)
2. кроме предыдущих выпадающих пунктов (Профиль, Сообщение, Администрирование) выпадающим стал ещё и список Участники (но корректно отображаются только ники написанные латинским шрифтом из-за того что наш любимый сервис, к сожалению, пока не поддерживает кодировку UTF-8)
3. скрипт существенно сократился и стал более грамотным (гости не видят те пункты меню, которые им не положено, пользователи соответственно тоже)Выпадающее главное меню. v4
в html-верх:
Выделить код<style type="text/css">
#pun-navlinks.section{display: block;position: relative;z-index: 1000;opacity: 0.9;filter: alpha(opacity=90);}
#pun-navlinks.section ul.container li {height: 24px;display: inline;position: relative;float: left;}#pun-navlinks.section ul.container ul {width: 175px;list-style: none;display: none;position: absolute;top: 16px;left: -5px;background:#828282;}
#pun-navlinks.section ul.container ul {-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;}#pun-navlinks.section ul.container ul:after /*From IE 7 lack of compliance*/{clear: both;display: block;font: 1px/0px serif;content: ".";height: 0;visibility: hidden;}
#pun-navlinks.section ul.container ul li {width: 175px;float: left;display: block !important;display: inline; text-align:center;font-weight:bold;}
/* 2nd Menu */
#pun-navlinks.section ul.container li:hover li a, #pun-navlinks.section ul.container li.iehover li a {float: none;color: #ffffff;}
/* 2nd Menu Hover Persistence */
#pun-navlinks.section ul.container li:hover li a:hover, #pun-navlinks.section ul.container li:hover li:hover a, #pun-navlinks.section ul.container li.iehover li a:hover, #pun-navlinks.section ul.container li.iehover li.iehover a {background: #555555;color: #ffcc33;text-decoration:none;font-weight:bold;}
/* Do Not Move - Must Come Before display:block for Gecko */
#pun-navlinks.section ul.container li:hover ul ul, #pun-navlinks.section ul.container li:hover ul ul ul, #pun-navlinks.section ul.container li.iehover ul ul, #pun-navlinks.section ul.container li.iehover ul ul ul {display: none;}
#pun-navlinks.section ul.container li:hover ul, #pun-navlinks.section ul.container ul li:hover ul, #pun-navlinks.section ul.container ul ul li:hover ul, #pun-navlinks.section ul.container li.iehover ul, #pun-navlinks.section ul.container ul li.iehover ul, #pun-navlinks.section ul.container ul ul li.iehover ul {display: block;}
</style>в html-низ:
Выделить код<!--Меню-->
<script type="text/javascript">
$(function() {if (GroupID==3) {
$('.nog').parent().hide();}
else {$('.markid').map(function(){
$(this).attr('href', $(this).attr('href')+UserID ); });
} });
var url = location.protocol+'//'+location.hostname;
if(typeof (UserID)!="undefined") {
$('#navprofile').append('<ul><li><a href="'+url+'/profile.php?section=personal&id='+UserID+'">Персональный</a></li><li><a href="'+url+'/profile.php?section=messaging&id='+UserID+'">Общения</a></li><li><a href="'+url+'/profile.php?section=avatar&id='+UserID+'">Аватар</a></li><li><a href="'+url+'/profile.php?section=signature&id='+UserID+'">Подпись</a></li><li><a href="'+url+'/profile.php?section=display&id='+UserID+'">Отображения</a></li><li><a href="'+url+'/profile.php?section=privacy&id='+UserID+'">Приватность</a></li><li><a href="'+url+'/profile.php?section=fields&id='+UserID+'">Остальное</a></li><li><a href="'+url+'/profile.php?section=admin&id='+UserID+'">Управление</a></li></ul>');
}
$('#navpm').append('<ul><li><a href="'+url+'/messages.php?box=0">Входящие</a></li><li><a href="'+url+'/messages.php?box=1">Отправленные</a></li><li><a href="'+url+'//messages.php?action=new">Новое сообщение</a></li></ul>');
$('#navadmin').append('<ul><li><a href="'+url+'/admin_categories.php" title="Добавление/удаление/редактирование категорий">Категории</a></li><li><a href="'+url+'/admin_forums.php" title="Добавление/редактирование форумов">Форумы</a></li><li><a href="'+url+'/admin_users.php" title="Поиск пользователя">Пользователи</a></li><li><a href="'+url+'/admin_groups.php" title="Добавление/настройка групп">Группы</a></li><li><a href="'+url+'/admin_options.php">Настройки</a></li><li><a href="'+url+'/admin_permissions.php">Права</a></li><li><a href="'+url+'/admin_censoring.php">Цензура</a></li><li><a href="'+url+'/admin_ranks.php">Ранги</a></li><li><a href="'+url+'/admin_bans.php">Блокировка</a></li><li><a href="'+url+'/admin_logs.php" title="Система ведения логов форума">Логи</a></li><li><a href="'+url+'/admin_prune.php">Чистка</a></li><li><a href="'+url+'/admin_massmail.php" title="Массовая E-mail рассылка">Рассылка</a></li><li><a href="'+url+'/admin_fields.php" title="Дополнительные поля профиля">Поля</a></li><li><a href="'+url+'/admin_style.php" title="Свой стиль">Стиль</a></li><li><a href="'+url+'/admin_pages.php" title="Добавление страницы">Страницы</a></li><li><a href="'+url+'/admin_promotion.php" title="Метатеги/Поисковые системы">Раскрутка</a></li><li><a href="'+url+'/admin_paid_services.php" title="Платные услуги">Платные услуги</a></li></ul>');
$('#navuserlist').append('<ul id="userpol" class="nog"></ul>');
$.get('userlist.php','',processContacts);
function processContacts(data){
$(data).find('td.tcl').each(function(){
var JUser=$(this).find('span.usersname').text();var ULink=$(this).find('span.usersname a').attr('href');
$('#userpol').append('<li><a href="'+ULink+'">'+JUser+'</a></li>'); });}
</script>
Отлично!!! Только вот почему-то сместилась строка сообщений, не по центру.
Поделиться652012-02-18 23:18:57
Я долго билась головой об клаву, но ничего не выходит. Нужно подвинуть первое слово, чтобы наравне со всеми стояло, и... Как-то подвинуть выплывающие окна вправо, чтобы были под словами.
А ссылка на форум где? Где это усе стоит. 
Поделиться662012-02-18 23:30:05
Leonheart
http://pokemonrpg.hutt.ru/ - на подопытном кролике на данный момент =Р
Поделиться672012-02-18 23:43:55
Mefrana,
обновите в html-верху код стиля объявления:
<style type="text/css">
#nav {
list-style: none;
margin: 0;
padding: 8px 10px;
border: 0px solid ;
background: ;
float: none;
width: 100%;
}
#nav ul {
list-style: none;
margin: 0;
padding: 8px 10px;
border: 1px solid #36431a;
background: #8ea759 ;
float: none;
width: 100%;
}
#nav li {
float: left;
position: relative;
background: ;
back\ground: none;
}
#nav li ul {
display: none;
position: absolute;
background: ;
padding: 8px 10px;
width: 123px;
}
#nav a {
color: #fff;
text-decoration: none;
display: block;
width: 180px;
padding: 5px 0px;
background: repeat-y right;
}
#nav li li a {
width: 200px;
background: none;
}
#nav li:hover ul {
display: block;
margin-left: 50px;
}
#nav li:hover li ul {
display: none;
width: 140px;
top: 0px;
left: 133px;
}
#nav li:hover li:hover ul {
display: block;
}
</style>И само объявление тоже:
<ul id="nav">
<li><a href="#null"><img style="margin-top: -2px; margin-left: 40px;" src="http://uploads.ru/i/Z/B/W/ZBWAv.png"></a>
<ul>
<li><a href="#null">Вся продукция</a>
<ul>
<li><a href="#null">По дате</a></li>
<li><a href="#null">Производители</a></li>
<li><a href="#null">Другое</a></li>
</ul>
</li>
</ul></li>
<li><a href="#null"><img src="http://s40.radikal.ru/i088/1202/4a/bf4102e3b6d1.png"></a>
<ul>
<li><a href="#null">Вся продукция</a>
<ul>
<li><a href="#null">По дате</a></li>
<li><a href="#null">Производители</a></li>
<li><a href="#null">Другое</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#null"><img src="http://s017.radikal.ru/i426/1202/b6/54d191ee6867.png"></a>
<ul>
<li><a href="#null">Вся продукция</a>
<ul>
<li><a href="#null">По дате</a></li>
<li><a href="#null">Производители</a></li>
<li><a href="#null">Другое</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#null"><img src="http://s017.radikal.ru/i442/1202/b0/1924927bcf39.png"></a>
<ul>
<li><a href="#null">Вся продукция</a>
<ul>
<li><a href="#null">По дате</a></li>
<li><a href="#null">Производители</a></li>
<li><a href="#null">Другое</a></li>
</ul>
</li>
</ul>
</li>
</ul>Поделиться682012-02-18 23:58:35
Leonheart
Спасибо =)
Поделиться692012-02-21 17:35:04
А я снова с вопросом =)
Теперь не прошу скриптов, просто ткните меня носом, где циферка отвечающая за... выплывающие окошко. А то на ссылку навожу, всё ок. Смещаю мышь вниз и контейнер закрывается...
З.Ы. Больше ничего не нада, только эту циферку поменять и я буду прыгать от счастья =)
Поделиться702012-02-21 21:46:17
А вообще, хотелось бы, чтобы окошки работали как здесь. Без всяких сбоев.
Поделиться712012-02-21 23:53:35
ссылку навожу, всё ок. Смещаю мышь вниз и контейнер закрывается...
Этот пункт
#nav li {
float: left;
position: relative;
background: ;
back\ground: none;
}
замените на Такой
#nav li {
float: left;
position: relative;
background: ;
z-index:1000;
back\ground: none;
padding-bottom:10px
margin-bottom:-10px;
}
Поделиться722012-02-22 06:53:32
Deff
Ооо! *прыгает от счастья, что хоть что-то получилось* Спасибо!
Поделиться732012-11-26 07:19:31
подскажите пожалуйста можно ли заменить стандартное меню на свои красивые кнопкикнопки. как это сделать где что откуда брать вставлять куда. зарание спасибо
