В прошлой я писала о том, как сделать выпадающее меню для сайта WordPress при помощи плагина. Ознакомиться с ней вы можете по этой ссылке:
Однако, это решение подходит не всегда, так как, во-первых, вам приходится использовать отдельный дополнительный плагин, стили которого всё равно в большинстве случаев нужно подгонять под ваш сайт. А во-вторых, решение с данным плагином подойдёт только для сайтов, работающих на WordPress.
В этой статье я покажу вам более универсальное решение как сделать выпадающее меню в html, которое подойдёт для любого сайта и не потребует от вас много усилий.
Навигация по статье:
Кроме того это меню является адаптивным, что немаловажно на сегодняшний день!
Выглядеть это выпадающее меню будет вот так:
Для того чтобы его протестировать или скачать исходники воспользуйтесь ссылками ниже.
Само выпадающее меню создаётся исключительно при помощи html и CSS, а для кнопки вызова адаптивного меню на маленьких экранах используется небольшой скрипт.
HTML разметка выпадающего меню
Для создания выпадающего меню на html нам нужно будет создать многоуровневый список.
Для того чтобы избежать путаницы со стилями я сразу обернула данное меню в отдельный блок и присвоила классы для используемых списков.
Горизонтальное выпадающее меню на css и Html своими руками
Если вы попали сюда случайно или вы искали другую реализацию выпадающего меню советую перейти в родительский раздел выпадающее меню.
В этом разделе будет описанное горизонтальное выпадающее меню на CSS и HTML.
Навигация по странице:
сделать горизонтальное меню с выпадающим списком css (на списках ul li) без использования jQuery и Javascript, а также без применения таблиц
в коде.
Выпадающее горизонтальное меню html
к менюПервым делом, перед тем как приступать писать код, нам нужно сделать html шаблон для меню.
В связи с тем, что мы делаем универсальное меню, я хочу его сделать максимально похожим под вывод меню WordPress. На мой взгляд, это один из самых простых и универсальных Html кодов меню. Выглядит он вот так:
Как видно с кода, наше выпадающее меню будет реализовано на списках ul и li. Вот так выглядит это меню без стилей CSS:
Скажем прямо выглядит уродливо, как обычный список. Далее нам нужно разукрасить это меню с помощью стилей CSS.
Горизонтальное выпадающее меню на CSS
к менюСтили CSS для выпадающего меню и не только – вещь необходимая как воздух. Ведь выпадающая вкладка делается на основе псевдокласса :hover.
Для горизонтального выпадающего меню нам потребуются вот такие стили:
Это еще не конец, а только часть CSS для основного горизонтального меню. Далее мы напишем стили для выпадающего списка меню:
Вот теперь все. Сам механизм выпадашки реализован одной строчкой.
Смотрите скин с этим меню:
Рис. 2 (горизонтальное выпадающее меню)
к менюНиже доступен демо просмотр работы выпадающего меню, а также ссылка на скачивание исходников. (Демо будет открыт выпадашкой поверх этой страницы, не нужно нажимать открыть в новом окне 🙂 или колесико мышки)
Горизонтальное выпадающее меню на всю ширину
к менюБольшинство из вас могут меня упрекнуть, мол такие менюшки, как я показал выше, это привет из прошлого и от части вы правы, хотя я встречал свежие верстки с такими менюшками.
Далее я напишу стили для создания выпадающего меню на всю ширину рабочей области. Назвать такое меню адаптивным будет сложно, но динамическим оно будет 100%.
Надеюсь вы скачали пример выше. Html у нас остается прежним, а вот CSS мы поменяем полностью. Вы можете просто взять от сюда код CSS и вставить в скачанный пример, или же посмотреть в режиме демо как он работает.
Я добавил в хтмл випадашку для последнего пункта меню, чтобы показать как она будет работать и прижиматься к правому краю.
Также этот пример отличается от первого тем, что выпадающее меню, сама выпадашка, тянется в зависимости от ширины всех пунктов меню.
Для очень длинных пунктов меню, такой вариант может быть не сильно удобным, так как они будут вылазить за пределы. Чтобы отключить это свойство, достаточно найти свойство «white-space:nowrap;» у селектора #menu1 ul li ul, и удалить его.
Ниже вы можете посмотреть демо или скачать исходники горизонтального выпадающего меню:
Горизонтальное выпадающее меню используется для упорядочения структуры навигации по сайту. Оптимальное количество уровней вложения — один-два. Чем меньше уровней вложений, тем легче посетителю сайта найти нужную информацию. Как создать обычное горизонтальное меню, подробно изложено в этом уроке.
Как сделать горизонтальное выпадающее меню
1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения
Скрыть выпадающее меню можно несколькими способами: 1) display: none; 2) visibility: hidden; 3) opacity: 0; 4) transform: scaleY(0); 5) с помощью библиотеки jQuery.
See the Pen MaObbz by Elena Nazarova (@nazarelen) on CodePen.
Способ 1.
Способ 2.
Способ 3.
Способ 4.
Способ 5. С помощью jQuery
2. 3D выпадающее меню
Интересные эффекты можно создавать с помощью CSS3-трансформаций, например, заставить меню появляться из глубины экрана.
See the Pen OyjVJZ by Elena Nazarova (@nazarelen) on CodePen.
3. Разворачивающееся выпадающее меню с логотипом
В этом примере в верхнем разделе страницы расположены логотип и навигация по сайту. В качестве логотипа может быть картинка или текст. Выпадающее меню постепенно разворачивается из-под элемента верхнего списка с помощью функции CSS3-трансформации.
4. Увеличивающееся выпадающее меню
See the Pen aNbGKv by Elena Nazarova (@nazarelen) on CodePen.
Чтобы сделать меню адаптивным, используем медиа-запросы. В данном примере возьмем переломную точку 600 пикселей, то есть, если разрешение экрана больше 600 пикселей, меню будет горизонтальным, если меньше — то вертикальным.
5. Подъезжающее выпадающее меню
Горизонтальное меню с мини-анимацией: при наведении на ссылки верхнего меню появляется маленький кружок, который также сопровождает появление выпадающего меню.
See the Pen MpqypG by Elena Nazarova (@nazarelen) on CodePen.
Выпадающее меню можно сделать на CSS не используя скрипты и модули. Просто дописываем несколько строк в CSS файл и готово. Несмотря на простоту меню будет достаточно универсальным. Стили подходить под произвольное количество уровней вложенности. Хоть два хоть десять уровней. Код при этом остаётся тем же. В статье описаны три вида меню, но если вы только начинаете разбираться в вёрстке советую читать сначала. Так будет проще понять.
Сначала сделаем HTML разметку для меню. Принято делать меню списком. Это не стандарт просто так сложилось.
Ещё нужно убрать маркеры но это дело вкуса.
Чтобы вложенные пункты появлялись при наведении на родительский пункт используем псевдокласс :hover, при этом нужно сделать так что бы появлялись только пункты первого уровня вложенности. Для этого используем знак >
В этой строчке заключается вся магия нашего выпадающего меню, поэтому разберём её подробнее. Благодаря псевдоклассу :hover, при наведении курсора на пункт меню, он же элемент списка li, для первого вложенного списка ul значение display станет block. Так открывается первый уровень вложенности. Если на этом уровне есть пункты содержащие подпункты, то при наведении на них также откроется только один вложенный уровень.
С основной механикой разобрались. Осталось переопределить место где будут появляться вложенные пункты. Для этого воспользуемся свойством position: absolute. При таком позиционировании отсчёт координат ведётся от края окна браузера если только для родительского элемента не задано свойство position с значением fixed, relative или absolute. В этом случае отсчёт ведётся от края родительского элемента.
Вертикальное выпадающее меню
Используя свойство position мы переместим вложенные пункты в право на расстояние равное ширине меню. В рассматриваемом способе есть одно ограничение. При позиционировании нам придётся жёстко задать ширину. С другой стороны вертикальное меню размещается в сайдбаре ширина которого заранее определена, поэтому привязка к ширине не должна вызвать проблем.
Вот что должно получиться в результате. демка
Горизонтальное выпадающее меню
Для горизонтального меню мы будем так же применять позиционирование но есть несколько нюансов. Что бы сделать меню горизонтальным используем свойство float. Меню будет раскрываться вниз значит при позиционировании нужно учитывать высоту. Для начала сделаем меню с одним уровнем вложенности. Вложенное меню также будет горизонтальным. Для этого вложенное меню позиционируем относительно списка а не родительского пункта и задаём для него ширину.
Вот что получиться в итоге демка.
Многоуровневое горизонтальное выпадающее меню
Вот так будет выглядеть наше многоуровневое меню демка.
Спасибо огромное! Задолбался
Спасибо огромное! Задолбался я иcкать решение простое до нельзя, что бы было только нужное и больше ничего лишнего. А то раздуют css непонятно чем. Здесь же все просто и локанично.
Интересно, а для Вордпресс
Интересно, а для Вордпресс такое решение не подходит? Довольно просто все изложено, сделать сможет любой. Отличные советы, без лишней «шелухи»!
HTML + CSS в чистом виде,
HTML + CSS в чистом виде, поэтому должно подойти для любого сайта. Специально писал с минимумом оформления, чтобы не перегружать CSS.
Очень полезная информация.
Очень полезная информация. Когда такое меню хотела реализовать у себя на блоге, то пришлось обращаться к веб-мастеру. А теперь могу сесть и потихоньку реализовать такую задумку сама. Подписалась на Ваш блог. Буду изучать.
Возникнут вопросы обращайтесь
Возникнут вопросы обращайтесь. Чем смогу помогу.
Что-то мой комментарий не
=========== Спасибо, но у меня (под Инт.Экспл-8) меню не выпадает. Т.е. не работает строка «ul. nav li:hover ul « Подскажите, в чем дело?
Есть пожедания по изложению материала:
-хорошо бы в примерах каждую строку снабжать комментарием, что она делает.
-в частности, неясно, зачем нужна строка «
-перед этой строкой стоят 2 строки, видимо, не относящиеся к делу (Домой и Посмотреть вертикальное меню). У человека, незнакомого с новым материалом (то есть, как раз для того, для которого вы писали), уходит время на осознание того, что эти строки для выпадающего меню не нужны. Или все-таки нужны?
Короче говоря, хотелось бы, чтобы в примерах было только то, что имеет отношение к делу, причем, чтобы про неясные по контексту строки было бы написано, какое именно «отношение к делу» они имеют.
Самый объёмный коммент.
Самый объёмный коммент. Коментарии проходят только после модерации поэтому вы и не увидели свой коммент сразу. Постараюсь ответить на всё. Начнём с вопросов зачем здесь это. Таки да две ссылки просочились с рабочего варианта. Насчёт не корректного отображения текста. Вы смогли прочитать и откоментить эту страницу при том что кодировка у неё такая же как и у примера в посте. Данный пост не предназначен для абсолютных новичков и был написан по желанию подписчиков. Если объяснять абсолютно всё то нужно будет рассказать про классы и идентификаторы, блоки, позиционирование, псевдоселекторы, каскад и прочее. Довольно большая статья получиться и что самое главное бесполезная. ul.nav li:hover > ul будет показывать ранее скрытый пункт. Если разбирать по буквам то(здесь параллельно смотрим на код ) при наведении на пункт меню(ul.nav li) сработает :hover и первый вложенный список >ul будет виден за счёт того что значение display сменит значение с none на block.
Поправил статью с учётом
Поправил статью с учётом ваших замечаний. Про кодировку честно говоря забыл что виндовс сохраняеи файлы в windows-1251 Тут два варианта или как вы заметили указать форточную кодировку в файле или изменить кдировку файла например в Notepad++.
Спасибо за критику приходите к нам ещё
Меню некоректно отображается
Меню некоректно отображается в safari IE Mozila Firefox не подскажите в чем может быть проблема?
Только что проверил в IE и
Только что проверил в IE и FireFox всё работает как надо. Можно подробнее в чём проблема
попробуйте заменить в head
попробуйте заменить в head полностью строчку с meta на
/* Links inside the dropdown */ .dropdown-content a < color: black; padding: 12px 16px; text-decoration: none; display: block; >
/* Change color of dropdown links on hover */ .dropdown-content a:hover
Пример как работает
Мы создали стиль выпадающего кнопки с фоном-цвет, обивка и т.д.
Вместо использования границы мы использовали box-shadow свойство, чтобы выпадающее меню выглядело как «карточка». Мы также используем z-index для размещения раскрывающегося списка перед другими элементами.
:hover селектор используется для отображения раскрывающегося меню, когда пользователь перемещает указатель мыши на кнопку раскрывающегося списка.
Рис. 2 (горизонтальное выпадающее меню)
Для очень длинных пунктов меню, такой вариант может быть не сильно удобным, так как они будут вылазить за пределы. Чтобы отключить это свойство, достаточно найти свойство «white-space:nowrap;» у селектора #menu1 ul li ul, и удалить его.
