Всем привет. Сегодня я хочу рассказать о способе создания выпадающего меню при помощи CSS. Например, такого:
Предложенный способ позволяет создавать сколько угодно уровней вложенности меню и достаточно прост в использовании.
HTML:
<div id="menu">
<ul class="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Об авторе и блоге</a></li>
<li><a href="#">Портфолио</a>
<ul class="submenu">
<li><a href="#">Дизайн</a></li>
<li><a href="#">Верстка</a></li>
<li><a href="#">Веб-интерфейсы</a></li>
</ul>
</li>
<li><a href="#">Реклама в блоге</a></li>
</ul>
</div>
CSS:
#menu {
height: 43px;
behavior: url(csshover.htc);
background: #9ea8b2 url(images/mbg.gif) repeat-x;
}
#menu ul, li {
margin: 0px;
padding: 0px;
}
ul.menu {
float: left;
}
#menu ul.menu li {
margin: 0px;
float: left;
width: 200px;
height: 30px;
display: block;
padding-top: 13px;
text-align: center;
}
#menu ul.menu li:hover {
background: #5e717f url(images/mbgh.gif) repeat-x;
}
#menu ul.menu li:hover ul.submenu {
display: block;
-margin-top: 30px;
-margin-left: -141px;
}
#menu ul.menu li ul.submenu {
display: none;
margin-top: 13px;
position: absolute;
background: #bcc4ce;
}
#menu ul.menu li ul.submenu li {
float: none;
display: block;
}
#menu ul.menu ul.submenu li:hover {
background: #9ca6b0;
}
#menu ul li a {
color: #fff;
font-size: 14px;
text-decoration: none;
}
#menu ul li a:hover {color: #ecd661;}
#menu ul.submenu li a {
color: #4f5458;
font-size: 14px;
text-decoration: none;}
#menu ul.submenu li a:hover {
color: #152535;
}
Валидностью CSS пришлось пожертвовать, т.к. ИЕ никак не хочет понимать :hover у чего бы то нибыло кроме тэга a.
Костылем для ИЕ является использование «html-компонента» (.htc). Никто кроме ИЕ HTC не понимает, и никак на него не реагирует.
Скачать его можно с сайта разработчика: http://www.xs4all.nl/~peterned/csshover.html
или отсюда: csshover.htc.
На этом на сегодня все. Появились вопросы — задавайте не стесняйтесь.
Обмен постовыми
- Здесь я узнал как поднять тИЦ.
2leep.com
08 октября 2009 в 12:38
Я где-то читал, что такого рода меню очень плохо индексируются пауками? Что скажешь ?
03 ноября 2009 в 14:26
Да. Люблю чистые менюшки без всякого программинга.
03 ноября 2009 в 19:00
Как говориться, все гениальное — просто:)
12 ноября 2009 в 1:10
Это о флеш меню они плохо индексируются ПС.
22 ноября 2009 в 18:33
Кто знает где возможно заполучить XRumer 5.08 Palladium???
очень нужно…
оч незаменимый инструмент для сеошника да и не только… все советуют. Помогите!
24 ноября 2009 в 5:51
ValeyLem, вот здесь версия XRumer 5.0.10 Palladium.
04 декабря 2009 в 0:38
Отличное решение вывода меню,одно из многих всплывающих,выпадающих. Преимуществом таких меню считаю появление простора для неуемной фантазии строителей сайтов.
Можно создать интересное меню используя всего один javascript файл: Пример
08 декабря 2009 в 13:55
Спасибо!
Под ие7 надо фиксик писать маленький
09 декабря 2009 в 0:29
Как раз сижу над таким меню корпею, спасибо
11 декабря 2009 в 18:01
Сразу скажу — я ламер в WP.
Сайт почти создан в WP на основе шаблона, а вот с меню — ну полная хрень в башке.
Не могу никак уяснить себе — в каких файлах я должен все это прописать??? Никаких htm у меня и в помине нету! а CSS куда прописывать, если меню генерится из заголовков?
зы: для автора этого блога — менюшка — супер!
только на Maxthone она в раскарячку почему то, хотя он на движке IE-8, который ее нормально кажет.
Ну и спасибо, конечное, хлебнул тут много полезы!
28 февраля 2010 в 8:20
Давно ещё прикрутил себе на сайт c горизонтально-вертикальным двухуровневым выпадением.
Что интересно поисковики учитывают все ссылки меню не склеивая их.
28 февраля 2010 в 9:14
Ну, да. Решение не без греха.
14 марта 2010 в 11:00
Красивое меню получается, но я на своем сайте убрал, так как оно криво отображается в IE6. Дело в том что я делал не по вашей технологии вот и получился такой косяк. Возможно я зря убрал его, так как я думаю что не у многих стоит браузер IE6 у вех уже 7 или 8…
15 марта 2010 в 13:26
не получается менюшку, выпадающую сделать помогите кто может?
[вырезано цензурой]
15 марта 2010 в 15:41
В общем так, кода — куча смысла — ноль. Слишком все замусорено и т.д. и т.п. Нафига было прописывать класс каждому диву? Забыл про наследование. Ладно. По твоему примеру вот что надо было сделать.
25 марта 2010 в 14:56
[...] Выпадающее меню на CSS | Демо версия [...]
25 марта 2010 в 18:57
спасибо за переведенный урок взял его для своего сборника- 99 меню для сайта CSS и jQuery
26 марта 2010 в 2:56
Пожалуйста, всегда приятно когда твой работа нужна еще кому-то кроме тебя самого. Только это не перевод, а, так сказать, авторская идея
27 апреля 2010 в 11:22
Нашел много полезной информации на Вашем блоге, в том числе и эта менюшка очень пригодилась, спасибо!
29 апреля 2010 в 7:37
Хороший способ, особенно для ИЕ костыль понравился. Я применял подобный метод, теперь попробую Ваш.
01 мая 2010 в 14:44
[...] Еще одно очень интересное решение вывода меню смотрите в записях : Дневник неизвестного верстальщика [...]
23 октября 2010 в 23:42
А я вот знаю вариант выпадающего меню, там вроде нет никаких скриптов. Все сделано на html+css.
Только вот не припомню по поводу эксплорера, возможно он как всегда глючит
вот заметка http://plohoneponyal.ru/vsplyvayushhee-menyu.html
15 декабря 2010 в 22:07
Алексей, в моей теме меню располагается в файле sidebar.php, но на самом деле оно может лежать где угодно, CSS подгружается в header.php.
Объяснять как создается тема для блога на WP долго и одного коммента мало, поэтому вам сюда:
http://codex.wordpress.org/ru:Main_Page
http://maxsite.org/category/wordpress
19 января 2011 в 17:33
Так будет эта менюшка индексироваться поисковиками или нет? Это же один из основных элементов большинства сайтов, и возможность индексации должна учитываться в первую очередь.
19 января 2011 в 17:58
да, конечно, будет. я вообще не понимаю откуда растут ноги этой идеи, что не будет индексироваться
23 января 2011 в 23:28
Подскажите куда вставлять эти кода, в програмировании я не ас.
Большое спасибо.
19 февраля 2011 в 21:34
У меня это меню становится вертикальным+не выпадающим, а обычным хостинг от юкоза.
21 февраля 2011 в 11:27
Читайте внимательно статью и проверяйте шаг за шагом все ваши действия.
25 февраля 2011 в 0:19
css и html — нет, вот если бы js, то да..
08 марта 2011 в 23:54
большое спасибо! вот хоть кто-то нормально выложил код! а главное работающий! без замороков! а то выложат и догадывайся что куда вставить надо)))))))
13 октября 2011 в 20:13
и то #menu ul.menu {width: 1000px; margin: 0 auto;}
и другое
ul.menu {
display: table;
width: auto;
}
не получилось сделать — в чем возможна проблема и как её решить ? подскажите
14 октября 2011 в 9:17
Код меню в студию! Ну, или ссылку на проект.
18 октября 2011 в 22:27
Классно написано, респект, компактный код и главное доступен для понимания))) Буду ждать еще чего-нибудь полезного от Вас)
Спасибо)
24 октября 2011 в 20:47
А для вордпрес подойдет или только для редактора таких как юкоз ?
25 октября 2011 в 9:35
А с чего вы решили, что это решение для юкоза? При должной прямоте рук это решение можно применить для любых CMS. Я его использую для WP и Drupal.
09 января 2012 в 11:07
помогите пожалуйста, у меня почему-то меню квадратным получается, а не полукругом как у вас….помогите, и что за image/mbgh.gif в CSS коде
09 января 2012 в 11:15
Я не совсем понял, что значит "полукруглое", но подозреваю, что вы о эффекте глянца говорите… так вот, это картинка, которая кладеться в бакгроунд, а image/mbgh.gif — это картинка, которая выводится при реакции (hover) на наведение курсора.
09 января 2012 в 11:21
да все верно….глянец….а вы не могли бы скинуть это изображении, так как понятия и не имею откуда взять… и как сделать, и можно ли сделать это изображение зеленым?
09 января 2012 в 14:21
Изображение можете вытянуть со страницы с примером (ссылка под статьей), а для того чтобы "сделать зеленым" надо перерисовывать и тут вам поможет любой графический редактор
09 января 2012 в 15:45
спс, я уже сделал…но у меня возник еще один вопрос….при наведении на какую-нибудь ячейку у меня получается не как у Вас меню сновится темно-синее и глянцевое, а прямоугольное с серым цветом, а при статике как у Вас все нормально
09 января 2012 в 21:23
у меня не получается при выделении чтобы меню становилось темно-синим и глянцевым как у Вас, а становится серым и квадратным при выделении….А если не выделять меню, то получается так же как у вас, глянцево-серый цвет, в чем проблема?