нарот потскажыти пожалуста по скайпу ато я нечё непоинмаю плиз вот мой скайп 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
подскажите пожалуйста можно ли заменить стандартное меню на свои красивые кнопкикнопки. как это сделать где что откуда брать вставлять куда. зарание спасибо