Многоуровневое горизонтальное выпадающее меню
19 Апрель 2008
просмотров 40 263
комментариев 38
Великолепный пример выпадающего меню. Для всех браузеров, кроме IE6 используется только CSS. Для корректного отображения в IE использован небольшой JS код. Протестировано в IE5.5, IE6, IE7, Firefox, Opera, Netscape, Mozilla, Safari (PC), Safari (iPod Touch).
Скачать многоуровневое горизонтальное выпадающее меню
Посмотреть пример
Dmoz
Вообще-то я не тестил, но у ie6 могут возникнуть проблемы с перекрытием select-эементов (если такие будут в контенте)
ViiЦитировать
Эта проблема как раз и решается JS. Скрипт после загрузки документа делает подмену: для всех селекторов LI:hover добавляет класс LI.iehover, с теми же свойствами. А в html код добавляется класс .iehover, на который и реагирует IE при наведении курсором на пункт меню.
lelyaЦитировать
))
нет, я вообще-то имел ввиду баг ie6, который не позволяет перекрыть select-элементы (select всегда будет “просвечивать”, не реагируя на z-index)
единственный способ решения который я нашел — “подложка” iframe’a под выподающий список
ViiЦитировать
@Vii, если в этом плане, то да, придется снова чинить баги IE6..
lelyaЦитировать
Поправьте ошибку в ссылке “Посмотреть пример”. Слеш забыли.
uggalleryЦитировать
А у меня чето с кодировкой проблема РУССКИЙ ШРИФТ UTF-8 РУССКИЙ ШРИФТне видит ИЕ,а koi8_r НЕ ВИДИТ ОПЕРА
egor_dimaЦитировать
Скорее всего проблема в том, что у файла стоит опция “Include Unicode Signature” – это в dreamweaver в настройках кодировки документа.
Koi8-r точно не надо ставить. Либо utf-8, либо windows-1251
АвторЦитировать
Для IE6 проблема с селектами решается путем небольшой модификации скрипта: при наведении просто скрываем все элементы select! Аналогично можно поступать и с флешками.
MonstarЦитировать
А как бы выровнять основное меню не слева, а поцентру страницы?
WakЦитировать
Для этого придется обрамить меню в еще один блок, с таким же фоном как у ul, а для самого ul убрать фон, прописать фиксированную ширину и margin:0 auto;
АвторЦитировать
Такой код не работает:
<div class=”menu” style=”width: 940px; margin: 0 auto”>
<ul id=”nav” style=”width: 800px”>
<li class=”top”><a href=”#nogo1″ class=”top_link”><span>Меню</span></a>
</li>
</ul>
</div>
WakЦитировать
чтобы ul тоже был по центру, ему тоже нужно margin: 0 auto
АвторЦитировать
у тебя вообще не работает нармально, когда имена menu длиннее. попробуй вместо USA написать Unated State American University например.
PapinЦитировать
Вы ширину меню пробовали менять? ;)
АвторЦитировать
да, все пробовал, нечего не получается.Еще что можеш посоветовать
PapinЦитировать
Ширина меню меняется этой строчкой
{left:1px; top:38px; background: #bbd37e; padding:250px; border:1px solid #5c731e; white-space:nowrap; width:90px; height:auto; z-index:300; cursor:pointer;}
АртёмЦитировать
как установить єто???
егорЦитировать
у меня проблема с вашим меню.
Почему-то если я нахожусь на пункте меню, у которого есть выпадающий список, то он не выпадает. А если на любом другом пункте, то выпадает, а если Именно на этом – то нет. Как исправить?
ЕвгенияЦитировать
Евгения, можно увидеть сайт где вы тестируете?
Блог для вебмастеровЦитировать
подскажите можно ли доработать скрипт этого меню так, что бы все подменю подгружались бы при наведении мышки на кнопку меню? т.е. видимо нужно в вышестоящих li прописывать onmouseover на innerhtml вложенных ul. ранее я так пробовал с меню на этом принципе но в ie это не проходит. можно ли из этого меню сделать подзагрузку подменю для всех броузеров
maxЦитировать
Так, вы тут конечно на проф. уровне.
Но бывают и нубы, например как я)))
вы б хотя бы описание написали)
скачала его, что дальше?
{Я}Цитировать
Что-то у меня в Опере 10.10 в подменю текст ВЕРТИКАЛЬНО по левому краю
АлександрЦитировать
подскажите, как сделать чтоб работало в IE6 выпадающее меню, все делаю, как написано в примере, везде работате , кроме IE6. Мб что не так там описано? вот тут это меню
ОлегЦитировать
Спасибо.
ПАСЦитировать
Gkbp подскажите как ставить и как и где задавать название пунктов (Home) и подпунктов меню/
АндрейЦитировать
Здравствуйте. Замечательная у Вас менюшка :)
Только у меня не большая проблема. Я немного поправила внешний вид меню – все работает. Только в IE 6 ни в какую :’( Причем на одной из страниц (Фотогалерея) работает (не очень симпатично, как-то прерывесто), но самое главное, что работает! А на других страничках нет. Всю голову себе сломала – ничего поделать не могу. Вроде файл stuHover везде подключаю. Может поможете мне?)
henyЦитировать
проверено, в IE 6 всё замечательно работает
SergЦитировать
Добрый вечер!
У меня Ваше меню не работает в IE8. Причем у себя на компе все нормально. Когда заливаю на сервер, то не работает выпадающие меню. Вроде все прописал как надо, уже голову сломал, но не хочет работать и все!!! Вот сайт eeskfo.ru. Помогите плиз!!!
АндрЦитировать
У меня в Опере нормально меню открывается на вашем сайте. В каком браузере вы тестируете?
АвторЦитировать
в IE8
АндрЦитировать
АндрЦитировать
Лично я все делаю через Огненую лису
IvanЦитировать
Вот это спасибо огромное!
Действительно, стоящая вещь, не в пример тому морю хлама, что находят поисковики по запросу “выпадающее меню”.
Практически всё реализовано на ЦСС.
Джава костыли для ущербных – не в счёт )
А нет, ну просто прелесть! Что еще сказать?..
Бесконечное вложение, красивый, гибкий дизайн и полная автономность от остального сайта.
Ня, блин! = )
п.с.
Жаль, буржуйское только. Ну да ладно. Когда-нибудь и у наших людей руки из того места расти начнут…
oracleЦитировать
не работает в opera и ie. как адаптировать?
СанекЦитировать
в FF 6 и Opera 11.5 все работает. Обновите браузеры ;)
Блог для вебмастеровЦитировать
В FF 6 и Opera 11.5 работает 100%,
Ие какой версии?
Блог для вебмастеровЦитировать
Есть интересный вариант (но с JavaScript) на
АндрейЦитировать