Если вы попали сюда случайно или вы искали другую реализацию выпадающего меню советую перейти в родительский раздел выпадающее меню.
В этом разделе будет описанное горизонтальное выпадающее меню на CSS и HTML.
Навигация по странице:
И так, наша задача:
сделать горизонтальное меню с выпадающим списком css (на списках ul li) без использования jQuery и Javascript, а также без применения таблиц <table> в коде.
к менюПервым делом, перед тем как приступать писать код, нам нужно сделать html шаблон для меню.
В связи с тем, что мы делаем универсальное меню, я хочу его сделать максимально похожим под вывод меню WordPress. На мой взгляд, это один из самых простых и универсальных Html кодов меню. Выглядит он вот так:
<nav id="menu1"> <ul> <li><a href="#m1">Главная</a></li> <li><a href="#m2">О нас</a></li> <li><a href="#m3">Наши услуги</a> <ul> <li><a href="#m3_1">Наша услуга №1</a></li> <li><a href="#m3_2">Наша услуга №2</a></li> <li><a href="#m3_3">Наша услуга №3</a></li> <li><a href="#m3_4">Наша услуга №4</a></li> <li><a href="#m3_5">Услуга 5</a></li> </ul> </li> <li><a href="#m4">Новости</a></li> <li><a href="#m5">Контакты</a></li> </ul> </nav><!--menu1-->
Как видно с кода, наше выпадающее меню будет реализовано на списках ul и li. Вот так выглядит это меню без стилей CSS:
Скажем прямо выглядит уродливо, как обычный список. Далее нам нужно разукрасить это меню с помощью стилей CSS.
к менюСтили CSS для выпадающего меню и не только – вещь необходимая как воздух. Ведь выпадающая вкладка делается на основе псевдокласса :hover.
Для горизонтального выпадающего меню нам потребуются вот такие стили:
#menu1{ position:relative; display:block; width:100%; height:auto; z-index:10; } #menu1 ul{ position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; } #menu1 > ul::after{ display:block; width:100%; height:0px; clear:both; content:" "; } #menu1 ul li{ position:relative; display:block; float:left; width:auto; height:auto; } #menu1 ul li a{ display:block; padding:9px 25px 0px 25px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; } #menu1 ul li > a:hover, #menu1 ul li:hover > a{ background:#EBBD5B; color:#2B45E0; }
Это еще не конец, а только часть CSS для основного горизонтального меню. Далее мы напишем стили для выпадающего списка меню:
#menu1 ul li ul{ position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; } #menu1 ul li:hover ul{display:block;}/*эта строчка реализует механизм выпадения*/ #menu1 ul li ul li{ float:none; width:100%; } #menu1 ul li ul li a{ display:block; text-transform:none; height:auto; padding:7px 25px; width:100%; box-sizing:border-box; border-top:1px solid #ffffff; } #menu1 ul li ul li:first-child a{border-top:0px;} #menu1 ul li ul li a:hover{ background:#FDDC96; color:#6572BC; }
Вот теперь все. Сам механизм выпадашки реализован одной строчкой.
Смотрите скин с этим меню:
Рис. 2 (горизонтальное выпадающее меню)
к менюНиже доступен демо просмотр работы выпадающего меню, а также ссылка на скачивание исходников. (Демо будет открыт выпадашкой поверх этой страницы, не нужно нажимать открыть в новом окне 🙂 или колесико мышки)
к менюБольшинство из вас могут меня упрекнуть, мол такие менюшки, как я показал выше, это привет из прошлого и от части вы правы, хотя я встречал свежие верстки с такими менюшками.
Далее я напишу стили для создания выпадающего меню на всю ширину рабочей области. Назвать такое меню адаптивным будет сложно, но динамическим оно будет 100%.
Надеюсь вы скачали пример выше. Html у нас остается прежним, а вот CSS мы поменяем полностью. Вы можете просто взять от сюда код CSS и вставить в скачанный пример, или же посмотреть в режиме демо как он работает.
#conteiner{ width:1000px; height:auto; margin:0px auto; padding-top:10px; } #menu1{ position:relative; display:block; width:100%; height:auto; z-index:10; } #menu1 ul{ position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; } #menu1 > ul{ text-align:justify; font-size:1px; line-height:1px; } #menu1 > ul::after{ display:inline-block; width:100%; height:0px; content:" "; } #menu1 ul li{ position:relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; } #menu1 ul li a{ display:block; padding:9px 35px 0px 35px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; } #menu1 ul li > a:hover, #menu1 ul li:hover > a{ background:#EBBD5B; color:#2B45E0; } #menu1 ul li ul{ position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; } #menu1 ul li:last-child ul{/*последний пункт будет прикреплен по правому краю*/ left:auto; right:0px; } #menu1 ul li:hover ul{display:block;}/*эта строчка реализует механизм выпадения*/ #menu1 ul li ul li{ display:block; width:auto; } #menu1 ul li ul li a{ display:block; text-transform:none; height:auto; padding:7px 35px; width:100%; box-sizing:border-box; border-top:1px solid #ffffff; } #menu1 ul li ul li:first-child a{border-top:0px;} #menu1 ul li ul li a:hover{ background:#FDDC96; color:#6572BC; }
Я добавил в хтмл випадашку для последнего пункта меню, чтобы показать как она будет работать и прижиматься к правому краю.
Также этот пример отличается от первого тем, что выпадающее меню, сама выпадашка, тянется в зависимости от ширины всех пунктов меню.
Для очень длинных пунктов меню, такой вариант может быть не сильно удобным, так как они будут вылазить за пределы. Чтобы отключить это свойство, достаточно найти свойство "white-space:nowrap;" у селектора #menu1 ul li ul, и удалить его.
Ниже вы можете посмотреть демо или скачать исходники горизонтального выпадающего меню:
Без разделителей это меню смотрится так себе. Разделители можно добавить в хтмл руками, но если у вас CMS, например WordPress, – то руками там добавлять не сильно удобно.
Далее я покажу вам как можно добавить разделители в меню.
к менюСуществует несколько десятков вариантов, как на чистом CSS добавить полоску (разделитель) между пунктами меню. Варианты, которые используют ::before или ::after , или куда проще border-left, border-right я дублировать не буду.
Бывают ситуации, когда верстка построена так чудесненько, что без jquery не обойтись.
Html код у нас остается прежним, мы только подключаем в самом начале библиотеку jQuery и файл, который ее использует:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script type="text/javascript" src="script-menu-3.js"></script>
Сразу после </title>.
Как вы поняли, нужно создать файл script-menu-3.js и туда закинуть вот такой маленький код:
$(document).ready(function(){ $("#menu1 > ul > li:not(:last-child)").after(' <li class="razd"> </li>'); });
Стили CSS для такого меню нужно оставить те что есть, + забросить вот этот кусок в конец:
#menu1 ul li.razd{ height:28px; width:1px; background:#ffffff; margin-top:4px; }
Можно просмотреть в режиме демо или скачать шаблон горизонтального меню ниже:
Преимуществами такого решения является:
к менюРаз пошла речь о многоуровневых выпадающих меню при наведении, наверное стоить поделить их на подгруппы:
В своих примерах я буду показывать многоуровневое меню CSS на 3 уровня, далее думаю будет не сложно догадаться что нужно делать.
к менюДля начала нам нужно немножко подкоректировать наш хтмл. Там добавится парочка строк для 3 уровня:
<nav id="menu1"> <ul> <li><a href="#m1">Главная</a></li> <li><a href="#m2">О нас</a></li> <li><a href="#m3">Наши услуги</a> <ul> <li><a href="#m3_1">Наша услуга №1</a> <ul> <li><a href="#m3_1_1">Дополнение к услуге 1</a></li> <li><a href="#m3_1_1">Дополнение к услуге 2</a></li> </ul> </li> <li><a href="#m3_2">Наша услуга №2</a> <ul> <li><a href="#m3_2_1">Дополнение к услуге 3</a></li> <li><a href="#m3_2_1">Дополнение к услуге 4</a></li> </ul> </li> <li><a href="#m3_3">Наша услуга №3</a></li> <li><a href="#m3_4">Наша услуга №4</a></li> <li><a href="#m3_5">Услуга 5</a></li> </ul> </li> <li><a href="#m4">Новости</a></li> <li><a href="#m5">Контакты</a> <ul> <li><a href="#m5_1">Карта проезда</a> <ul> <li><a href="#m5_1_1">Дополнение для карты</a></li> <li><a href="#m5_1_1">Дополнение для карты 2</a></li> </ul> </li> <li><a href="#m5_2">Форма обратной связи</a></li> </ul> </li> </ul> </nav><!--menu1-->
Далее, для нашего горизонтального выпадающего меню нужно поменять стили CSS, меняем полностью все:
#conteiner{ width:1000px; height:auto; margin:0px auto; padding-top:10px; } #menu1{ position:relative; display:block; width:100%; height:auto; z-index:10; } #menu1 ul{ position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; } #menu1 > ul{ text-align:justify; font-size:1px; line-height:1px; } #menu1 > ul::after{ display:inline-block; width:100%; height:0px; content:" "; } #menu1 ul li{ position:relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; } #menu1 ul li.razd{ height:28px; width:1px; background:#ffffff; margin-top:4px; } #menu1 ul li a{ display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; } #menu1 ul li > a:hover, #menu1 ul li:hover > a{ background:#EBBD5B; color:#2B45E0; } #menu1 ul li ul{ position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; } #menu1 > ul > li:last-child > ul{/*последний пункт будет прикреплен по правому краю*/ left:auto; right:0px; } #menu1 ul li:hover > ul{display:block;}/*эта строчка реализует механизм выпадения*/ #menu1 ul li ul li{ display:block; width:auto; } #menu1 ul li ul li a{ display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing:border-box; border-top:1px solid #ffffff; } #menu1 ul li ul li:first-child > a{border-top:0px;} #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a{ background:#FDDC96; color:#6572BC; } #menu1 ul li ul li ul{ top:0px; left:100%; display:none; background:#fddc96; } #menu1 > ul > li:last-child > ul ul{left:auto; right:100%;} #menu1 ul li ul li ul a{color:#F38A01;}
Файлы для jQuery копируем как были с предыдущего примера. Решил оставить разделители, что б меню хоть немного лучше смотрелось. Можно конечно и без них.
Вот так получилось: Я сделал 2 скина в одном, что бы показать как выпадашка смотрится справа и по средине.
Ниже вы можете посмотреть демо а также скачать пример:
к менюНемного масло масляное получилось в заголовке, но прокатит, главное код.
Суть этого примера сделать горизонтальное выпадающее меню на всю ширину с выпадашкой на всю ширину + многоуровневость.
Хтмл код я менять не буду, его можно взять с предыдущего примере. Разделители на jQuery также оставляем.
Будет меняться только CSS полностью:
#conteiner{ width:1000px; height:auto; margin:0px auto; padding-top:10px; } #menu1{ position:relative; display:block; width:100%; height:auto; z-index:10; } #menu1 ul{ position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; } #menu1 > ul{ text-align:justify; font-size:1px; line-height:1px; } #menu1 > ul::after{ display:inline-block; width:100%; height:0px; content:" "; } #menu1 ul li{ position:relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; } #menu1 > ul > li{position:static;} #menu1 ul li.razd{ height:28px; width:1px; background:#ffffff; margin-top:4px; } #menu1 ul li a{ display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; } #menu1 ul li > a:hover, #menu1 ul li:hover > a{ background:#EBBD5B; color:#2B45E0; } #menu1 ul li ul{ position:absolute; top:36px; left:0px; display:none; width:100%; background:#EBBD5B; } #menu1 > ul > li > ul::after{ clear:both; float:none; width:100%; height:0px; content:" "; } #menu1 ul li:hover > ul{display:block;}/*эта строчка реализует механизм выпадения*/ #menu1 ul li ul li{ display:block; width:30%; float:left; } #menu1 ul li ul li a{ display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing:border-box; } #menu1 ul li ul li:first-child > a{border-top:0px;} #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a{ background:#FDDC96; color:#6572BC; } #menu1 ul li ul li ul{ top:0px; left:100%; display:none; background:#fddc96; z-index:15; } #menu1 ul li ul li ul li{display:block; float:none; width:100%;} #menu1 ul li ul li ul a{ color:#F38A01; border-top:1px solid #ffffff; }
Вот так меню будет смотреться:Единственный момент – у сайта должно быть достаточно места, так как крайнего пункта справа нет места для выпадашки. Эту проблему можно решить через :nth-child но я не стал городить огород.
Смотрите демо горизонтального многоуровневого выпадающего меню:
Как вы могли заметить: нижняя плашка тоже на всю ширину. Вот так делаются выпадашки в несколько блоков.
На этом у меня все, надеюсь хоть один мой пример вам подошел. Спасибо за внимание.
В качестве благодарности можно поделиться ссылкой со своими друзьями:
это принесет пользу и им и мне 🙂 .Если вы прочли пост полностью, но не нашли как сделать свое горизонтальное выпадающее меню на css, задайте вопрос в комментариях или воспользуйтесь поиском по сайту.
Также, советую посетить родительскую страницу https://help-wp.ru/vypadayushhee-menu/, там собраны все примеры и разновидности выпадающих меню.
Здравствуйте.подскажите пожалуйста,как сделать,чтоб при выпадающем меню сдвигался контент?
Добрый день! Очень полезная информация, спасибо. Пытаюсь понять в opencart как выровнять выпадающее меню строго под нужным пунктом, подскажите пожалуйста: (-url-)
Да, спасибо. Все нашел, исправил))) Еще есть момент: дайте идею как реализовать пункт меню "ткани" и "трикотаж", чтобы они не были такими длинными вниз, а открывались в бок, чтобы все подпункты могли быть видны в одном экране без прокрутки. Как это реализовать? Спасибо.
Большое спасибо!!!
Спасибо помогло ОЧЕНЬ!
Помогите,пожалуйста! Нам в школе задали сделать сайт по любой теме, разбившись на команды.Я с подругой основное сделала, но выпадающее меню-не могу.Я не понимаю, как подставлять стили CSS.Объясните, пожалуйста.
Проверь горизонтальное меню css у тя там демо не работает.
И в следующем примере тоже
Доброго времени суток. Во сколько обойдется попросить вас посмотреть мое выпадающее меню и найти причину траблов?
Вот сайт: (-url-)
наведите мышкой на горизонтальное меню, часть пунктов перекрывается картинками, как исправить ситуацию не подскажите?
Спасибо.
Огромная благодарочка автору !!!
Скачал у вас примеры горизонтальное выпадающее меню на css. Все отлично работает.
Искал как сделать многоуровневое меню на вордпресс.
Хотел подписаться на ваши посты, а подписки нет. Нужно срочно решать проблему 🙂
за примеры еще раз спасибо.
Круто 2020, актуально, а самое главное с wordpress вобще ни каких проблем!