В этом посте я покажу вам как сделать выпадающее меню ограничиваясь только средствами HTML и CSS, без использования скриптов. Источником сего примера являеться полезнейший ресурс CSSPlay. Те у кого этот сайт еще не нашел свое место в закладках, советую сделать это как можно быстрей. На сайте еще много различных и полезных примеров кода.
Приступим…
HTML код меню выглядит так:
<div class="menu"> <ul> <li><a class="hide" href="">Раздел 1</a> <!--[if lte IE 6]> <a href="">Раздел 1 <table><tr><td> <![endif]--> <ul> <li><a href="" title="">Страница 1</a></li> <li><a href="" title="">Страница 1.1</a></li> <li><a href="" title="">Страница 1.2</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="">Раздел 2</a> <!--[if lte IE 6]> <a href="">Раздел 2 <table><tr><td> <![endif]--> <ul> <li><a href="" title="">Страница 2</a></li> <li><a href="" title="">Страница 2.1</a></li> <li><a href="" title="">Страница 2.2</a></li> <li><a href="" title="">Страница 2.3</a></li> <li><a href="" title="">Страница 2.4</a></li> <li><a href="" title="">Страница 2.5</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> </div>
Вы можете добавить дополнительные разделы, при этом необходимо будет изменить в CSS ширину меню. Как вы видите в примере используются условные комментарии, с дополнительным кодом. Это необходимо для браузера IE6.
CSS код:
.menu{ font-family:arial, sans-serif; width:212px; height:100px; position:relative; font-size:11px; z-index:100 } .menu ul li a, .menu ul li a:visited{ display:block; text-decoration:none; color:#000; width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden } .menu ul{ padding:0; margin:0; list-style:none } .menu ul li{ float:left; position:relative} .menu ul li ul{ display:none } .menu ul li:hover a{ color:#fff; background:#36f } .menu ul li:hover ul{ display:block; position:absolute; top:21px; left:0; width:105px } .menu ul li:hover ul li a{ display:block; background:#ddd; color:#000 } .menu ul li:hover ul li a:hover{ background:#6fc; color:#000 }
Оформление пунктов меню можно менять так как вам хочется. Для IE6 используются дополнительные стили, которые также нужно подключить с помощью условных комментариев:
.menu ul li a.hide, .menu ul li a:visited.hide{ display:none } .menu ul li a:hover{ color:#fff; background:#36f } .menu ul li a:hover ul{ display:block; position:absolute; top:21px; left:0; width:105px } .menu ul li a:hover ul li a{ display:block; background:#ddd; color:#000 } .menu ul li a:hover ul li a:hover{ background:#6fc; color:#000 }
Вот собственно и все. Пример работает во всех наиболее популярных браузерах, включая IE6. Для корректной работы меню необходимо указать тип документа.
Посмотреть пример (в примере присутствует немного усложненное меню)
Loading ...
ммм очень интересное решение. Спасибо за наводку )
Беспринципное чёрт знает что, уж простите… Вместо одной строчки на jQuery или десяти на чистом JS, засовывать таблицу в ссылку.
А ты сколько файлов библиотек подвешиваешь, при подключении jQuery ?
здорово.
хз, насколько это применим, но забавно 
особенно понравилась фишка с выпадением крайнего-правого под-под-меню влево
в общем, – в избранное.
Очень хороший прием. Давно его использую. Есть одно только неудобство: нельзя поставить таймаут, подменю изчезает сразу после того как отведешь мышь, что не совсем удобно.
pepelsbey, безусловно таблица в ссылке это что называется без комментариев. Но опять же это только для 6-го IE.
Я предпочитаю не гадить в документ, сохраняя его идентичность. Весь мусор в ie.css…
Спасибо. Прикольная менюшка!
рано я похвалил: невозможны словосочетания в подпунктах
и неплохо бы добавить один пункт без выпадения:
<li><a class="hide" href="">Глагне</a>
<!–[if lte IE 6]>
<a href="">Глагне</a>
<![endif]–>
</li>
в ближайшее время сам напишу пример для горизонтальной менюхи (размещу у себя в блоге)
Николай, оставьте потом в комментариях ссылку на ваш пример.
>> cssplay
Ресурс, безусловно, заслуживает места в закладках, но методы используемые там, сильно экспериментальны и во многих случаях ненадёжны (конечно, во многом из-за IE), на мой взгляд, примеры с этого сайта служат лишь демонстрацией мощи css.
Менюшки конечно прикольные, но по моему сейчас это уже не модно!
>>> Беспринципное чёрт знает что, уж простите…
Pepelsbey, как видите, не я один такой
>>> в ближайшее время сам напишу пример для горизонтальной менюхи
Николай, Вы что-то подобное имеете в виду?
>>> во многих случаях ненадёжны
Если «хакать с умом» (с), то всё отлично. Ведь большинство хаков рассчитаны на IE6, а с ним либо условные комментарии, либо star html.
[...] еще одна версия вертикального меню. Добавить в социальные [...]
Большущее спасибо, а я тормозила дизайн прибегая к яве. С таким вариантом сайт значительно быстрее грузится, да и поисковики не будут спотыкаться о ява-код, спасибо еще раз!
[...] Выпадающее меню без Javascript В этом посте я покажу вам как сделать выпадающее меню ограничиваясь только средствами HTML и CSS, без использования скриптов. Источником сего примера являеться полезнейший ресурс CSSPlay. Те у кого этот сайт еще не нашел свое место в закладках, советую сделать это как можно быстрей. На сайте еще много различных и полезных примеров кода… [...]
Приветствую.
Хорошее меню. Очень. НО, есть один момент.
Когда я вытягиваю его (несколько разделов),
то разделы попадают на другую строчку.
Это нормально. Но когда раскрывается подраздел,
то первая строчка подраздела скрывается (не показывается)
за основным (заглавным) разделом, на который она наложена при смещении.
Как бы это прописать, чтоб исправить?
Да, можно еще обнаглеть? Не тудно ли выслать вот эту форму
оставления комментария? Или может урок по этой теме где есть?
[...] Выпадающее меню без Javascript В этом посте я покажу вам как сделать выпадающее меню ограничиваясь только средствами HTML и CSS, без использования скриптов. Источником сего примера являеться полезнейший ресурс CSSPlay. Те у кого этот сайт еще не нашел свое место в закладках, советую сделать это как можно быстрей. На сайте еще много различных и полезных примеров кода… [...]
Большое спасибо!!!
Незнаю как у вас , но у меня это меню не работает, может оно только под определённые браузеры,
тогда оно бесполезно.
Проверял в IE6 7, Opera, Safari, FF. В этих браузерах работает.
Меню хорошо, но минус в том, что все поля одного размера, и выпадающие поля нельзя варьировать по размеру (когда например в пункте меню «Продукция» есть подпункт «Стандартная линейка телескопических цилиндров»).
скажите как сохранить фон и text-decoration (hover) ссылки меню, в то время как я буду «гулять» по выпавшему подменю, т.е что бы фон и подчеркивание, которые происходят при наведение мышки не пропадали когда переходишь на выпавшее меню?
rekx, по-моему в этом примере именно так и происходит.
Alex, а что именно за это отвечает?
Добрый день! Использую решение на своем сайте, очень нравится, НО!
ИЕ 6 не дается ни под каким видом: квадратики главных пунктов почему-то дублируются из-за условных комментариев, а меню не выпадает.
Что показательно, пример по ссылке работает отменно, когда же я сохраняю прямо из него html+css, этот же код на моем компьютере опять глючит по прежнему. Чего я недопонимаю, и как заставить все это работать под ИЕ6?
Заранее огромное спасибо за ответ!
кто знает как сделать так, чтобы меню всегда выпадало в левом краю?
rekx, я не совсем понимаю что у вас не получается. За формление пунктов при наведении отвечают css свойства и офомление это остается активным при перемещении по выпадающему меню. Что значит, чтобы меню выпадало в левом краю?
Люба, проверьте внимательно. Все ли вы файлы скопировали?
Alex, меню выпадает всегда строго под своим разделом, а если выпадающее меню сделать шире, и тогда пункты в нем благодаря float:left; выстраиваются в строчку, вот тут и нужно чтобы это подменю всегда было на одном месте… т.е его нужно привязать к первой ссылки главного меню…
Да, конечно, я скопировала все, что приведено в инструкции (html и подключенный к нему css) – вот мой набросок http://forcasey.kolosovska.com/
В ФФ, ИЕ7, Опере все отлично, ИЕ6 дублирует основные пункты меню и не оно не выпадает (
Люба, не вижу в вашем примере стилей для IE6
2ALEX
Согласна, ошибалась. Стили подключила, все работает, но не до конца, – по причине того, что мой шаблон сверстан процентами. Не могу установить ширину для выпадающих блоков 100% относительно ширины основных пунктов меню (как это и реализовано под другие браузеры), не подскажете, как это можно сделать?
Обновленный пример моего шаблона снова находится тут:
http://forcasey.kolosovska.com/
появился вопрос с вставкой меню в сложные макеты. Если конструкцию поместить в таблицу, то под IE6 перестает работать. Есть какое-нить лекарство? или все же JS нас спасет?
Ребят, такая проблема, ставил это меню на движок, на ИЕ работает не правильно, основные разделы меню посвечивает как надо, а выпадающего меню нет, на остальных браузерах работает нормально, скажите пожалуйста, в чем может быть проблема?
Serj, для начала проверьте все ли файлы из примера вы скопировали и не конфликтуют ли существующие css свойства с теми, что в примере.
Уважаемые читатели данный пример я привёл лишь для того чтобы показать, что есть возможность создания подобного меню без использования javascript. Пожалуйста используйте данный подход лишь в исключительных случаях (заказчик требует и т.п.).
Alex, в том то и дело что шеф требует без ява реализовать меню.
Css не конфликтует, на css в движке только шрифты указанны.
Возникло подозрение что дело в таблицах.
Есть еще какие нибудь соображения?
Очень рассчитываю на помощь
Serj, без примера тяжело вам что-то ответить. Дайте ссылку и возможно кто-то поможет. Если будет время я также взгляну.
Alex, ага, чуть позже обязательно, сейчас пока локально сайт находится
Спасибо
Люди помогите, пожайлуста, очень нужно к диплому менюшку такую сделать, с CSS не очень хорошо знаком, вобщем попытался стилизовать немного меню под свои задачи. в результате в опере 9.25 работает, а в эксплорере нет, если может кто помочь- буду очень благодарен.
вот то, что получилось
http://files.mail.ru/CXMY3L
блин, долго мучался, в результате сделал менюшки разноцветнык, все везде прекрасно работает… но вот одно но, в ие 6 и 8 тоже когда ставишь меню в таблицу- перестает работать, ставишь между двух таблиц, тоже перестает работать, удаляешь таблицы- снова работает..
Посмотрел ваш пример и обнаружил что отсутствуют таблицы для ie в условных комментариях, дальше смотреть не стал. Пожалуйста внимательно перенесите весь код примера к себе и уже потом делайте изменения.
Ребят, снова со своей проблемой, сайт загрузил на виртуальный хостинг, адрес сайта http://foodsgoods.ru/
А проблема все та же, не работает в ИЕ
Помогите пожалуйста
У вас
linkсо стилями для меню прописан внутриbody, перенестие вhead.Спасибо большое за совет, перенес линк со стилями в хед, но все равно не работает(
Поменял доктайп на XHTML 1.0 Strict, заработало. И еще пропишите значение ширины у основных ссылок, сейчас просто число.
Ура! Зароботало!!! Спасибо большое!!
Глупый вопрос, а где значение ширины прописать? в css файлах?
Да, в стилях для IE. У вас сейчас вроде просто 208.
да, была такая ошибка, а для ие ваще 105 стояло))
Теперь все работает, спасибо!
///
Так вот, товарищи, на движках это меню тоже работает!!!
Безусловно, это здорово. А вот не скажете ли, можно ли в главном меню использовать не текстовые ссылки, а картинки? Причем разные для случаев наведенной и ненаведенной на этот пункт мышки? Т.е. чтобы меню внешне выглядело как вот тут http://aquahobbi.ru
Или такое делается только на Яве?
Можно, если картинки использовать в качестве фона у ссылок.
Такая проблема, при установки на фон заголовка выпадающего меню, меню перестает работать в IE 6, то есть заголовок цвет меняет, а меню не выпадает. С чем это может быть связанно?
Фон у пунктов не влияет на работоспособность самого меню. Видимо ошибка где-то ещё.
Извиняюсь, при установке изображения на фон
«Посмотреть пример (в примере присутствует немного усложненное меню)»
Можете плз добавить код для этого меню, просто срочно нужно меню с 2-мя выплывающими подменю.
Никак не могу сделать, чтобы было как у вас в примере…
Скопируйте исходный код в примере.
Спасибо большое! Че-то сразу не догодалась)))
Подскажите что делать??(((( Пытаюсь сделать менюшки с подменю, а подменю(например на странице которую приведу в меню НПЦ(А-О), в пункте А подменюшки уже появились и находятся по основным выпадающем меню) что не так? почему не получается? может в css что поменять? http://gi-ascor.ucoz.ru/index/0-21
а почему нет ответа не пойму?
Роман что конкретно у вас не работает и в каком браузере.
у меня FireFox, подменю «А» ( в примере) имеет в себе еще подменю, которое (если присмотреться) уже открыто. ну короче при наведении на «А» ничего не происходит, а должна вылазить еще одно меню! код css был взят с простого меню, а само меню с вашего примера(где оно усложнено) в чем проблема? что не так?
Попробуйте для начала привети в порядок код страницы, сейчас там каша какая-то. А по существу не вижу подключенный стилей для меню.
код страницы в порядке!!! это Ucoz… стиль подключен.. menu.css!!! только стиль для простого меню! а не для усложненного как в примере вашем!!
Для меню третьего уровня которое должно появляться сбоку та нужно дописать
.menu ul li:hover ul li:hover ul.left {left:-105px}В другую сторону соответственно
.menu ul li:hover ul li:hover ul.right {right:-105px}Благодарю! это первый пример таких меню на CSS, который не глючит)
Спасибо огромное за статью. Сайт на движке. Попробовала только что поставить такое же меню себе. Вроде бы работает под мозиллой, но в эксплорере почему-то получилось 2 раздела один над другим. Может быть, я сделала что-нибудь не так – я только учусь… Буду сейчас разбираться…
Здравствуйте.
Спасибо огромное за статью! Именно это и искала.
Ребята, подскажите, пожалуйста, как можно расширить подпункты в меню для нескольких слов?
Заранее спасибо.
спасибо за код, но в ИЕ6 меню не выпадает почему-то …
как полечить??
.menu ul li a.hide, .menu ul li a:visited.hide{
display:none
}
.menu ul li a:hover{
color:#fff;
background:#36f
}
.menu ul li a:hover ul{
display:block;
position:absolute;
top:21px;
left:0;
width:105px
}
.menu ul li a:hover ul li a{
display:block;
background:#ddd;
color:#000
}
.menu ul li a:hover ul li a:hover{
background:#6fc;
color:#000
}
Эти правила пропишите в спец. файле для ие6, например, в ie6.css
А также не забудьте подключить его в html по аналогии:
так это ж стырено с http://www.cssplay.co.uk/menus/dd_valid.html
даже цвета не перекрашены)) ыы
А вы ссылку не видете в начале поста? Да и кажется мне, что если с переведённым примером у многих возникают затруднения, то что уж говорить об оригинале .
да, спасибо очень хорошее решение. Такое меню хорошо подставлять пользователям, которые отключают в браузере показ явы. Респект)
Ещё раз спасибо огромное за статью!
Всё работает, ура!
[...] создания подобного меню без использования js. И хотя предыдущая версия была также реализована без использования скриптов, но [...]
не работает в firefox
Сорри – это у меня просто голова нехотит работать)
Алекс, спасибо за идею, в меню все работает,но рисунки на сайте, отображаются с промежутками с друг другом ,когда я убираю из кода страницы промежутков не остается,но при этом меню не работает в IE, помогите, что сделать?
Добрый день …. можно попросить вас скинуть гововый пример мне на почту. Я не программист может что-то делаю не так. Копирую текст а он сбивается в большую кучу и явно не распознается как команды, а как тект выводится на экран. Буду очень благодарен.
В моем случае для корректного отображения в Мозилле мне пришлось тэг DIV заменить на SPAN. В Мозилле стало всё нормально, но Опера нормально отображать перестала, всё разъехалось.
В результате пришлось подредактировать код следующим образом:
В классе .menu позиционирование position:relative; заменил на position:static; и всё стало нормально.
.menu{font-family:Arial, Helvetica, sans-serif;
width:212px;
height:100px;
position:static;
font-size:11px;
z-index:100
}
А это меню будет раскрываться поверх текста расположенного ниже?
Да, будет.
Да все будет работать – уже проверено временем. Стабильно показывается пользователям без яваскрипта (такие еще встречаются). А приятель один мой модификацию сделал – у него меню теперь открывается вправо и влево, в зависимости от необходимости. И тоже все работает. Alex, спасибо за прекрасную вещь.
а я, кстати, его к Joomla прикрутил. обращайтесь, если надо
отлично работает во всех браузерах!
блин так долго скрипт искал
[...] Выпадающее меню без Javascript | Демо версия [...]
А подскажите пожалуйста, как сделать чтоб как у вас в примере было, из под меню еще подменю в бок вылезает? у меня что то не как не получается как надо код строить?
И куда вводить настройки для IE6?
Посмотрите код примера и сделайте также.
В шестом эксплорере ссылки в подменю не работают. Именно из-за таблиц. Всё перекрывается первой ссылкой. Как это лечить?
В примере всё должно быть нормально.
А демонстрацию можно? А то у меня ссылка в меню распространяется на все подпункты. Провинтил в екслорере, получется:
<a href='url1' rel="nofollow">url1 <a href='url2' rel="nofollow">url2</a></a>
нормально прожёвывается, а
<a href='url1' rel="nofollow">url1
<a href='url2' rel="nofollow">url2</a>
</a>
благополучно получает url1 для обеих ссылок.
Сслыка на пример в конце поста есть.
Вот как раз этот-то момент там и не освещён.
Шестой осёл – очень больная тема. Единственное животное, считающее, что ховерами бываю только ссылки, а фиксед – вообще ненужная в хозяйстве дрянь. Впрочем, если сверстать шаблон чисто под шестёрку, основательно вычистив стили, то ссылки становятся кликабельными (в смысле куда надо ведут), но в строке состояния упорно показывается ссылка, указанная в голове.
К сожалению не могу сейчас проверить. Я б вам посоветовал вообще не использовать это меню. Думаю сейчас ie6 не стоит того. Используйте небольшой js для него.
Народ а подскажите как в меню цвет поменять на нужный мне? как задать страницы при нажатии на переход на поб менюшки.? и как местоположение поменять. спасибо зарание
В файлах css. color:; background:; А вообще не рекомендую юзать чужие примеры, не понимая об чём они вообще.
я только начинаю, пока много чего не знаю – чем отличается по коду горизонтальное меню от веритикального?
как сделать выпадающие меню из слов, разбросанных по всему сайту?
Position:absoluteвам в помощь.да спасибо но чрезвычайно тяжело наверное енто сделать
спасибо
спасибо меню просто класс. Поисковики будут довольны
менюшка почему то очень криво стоит в опере, во всех остальных браузерах нормально
направо кривит, пикселей на 40
даже не так – при назначении «margin-top» когда заходит за непонятные границы начинает исчезать по мере опускания
Opera 10.61, всё нормально.
я не говорю что ее не видно, просто по соотношению ко всем браузерам показывает криво – лично у меня только в опере.