Выпадающие меню на HTML и CSS. Как создать в CSS выпадающее меню
От автора: всех приветствую. Почему-то выпадающее меню у веб-мастеров ассоциируется со скриптами, но уже давно сделать такую навигацию можно абсолютно спокойно на чистом css. Причем такое меню будет ничем не хуже. Сегодня я вам покажу, как создать в css выпадающее меню. Поделюсь, так сказать, рецептом.
План урока и разметка нашего меню
В общем-то, сначала определимся с тем, как будем создавать само меню. В html5 стандартным способом считается создавать его в контейнере nav с помощью маркированного списка. Давайте именно так и сделаем. Маркеры мы позже уберем с помощью css, в меню они нам совершенно не нужны.
Собственно, я сразу напишу в html разметку с вложенными списками. То есть наши список будет двухуровневым – в нем будут другие списки. А именно, на каждый пункт 1 список, который и будет формировать выпадающее меню.
Тут есть важный момент, который заключается в том, что вам, возможно, не нужно каждый пункт делать выпадающим, а лишь некоторые. Без проблем, тогда в пунктах без выпадения просто не создаем вложенных списков.
Собственно, вот она, вся разметка:
< nav id = "nav" > < ul > < li > < a href = "#" > Пункт1 < / a > < ul class = "second" > < li > < a href = "#" > Подпункт< / a > < / li > < li > < a href = "#" > Подпункт< / a > < / li > < li > < a href = "#" > Подпункт< / a > < / li > < / ul > < / li > < li > < a href = "#" > Пункт2 < / a > < ul class = "second" > < li > < a href = "#" > Подпункт< / a > < / li > < li > < a href = "#" > Подпункт< / a > < / li > < li > < a href = "#" > Подпункт< / a > < / li > < / ul > < / li > < li > < a href = "#" > Пункт3 < / a > < ul class = "second" > < li > < a href = "#" > Подпункт< / a > < / li > < li > < a href = "#" > Подпункт< / a > < / li > < li > < a href = "#" > Подпункт< / a > < / li > < / ul > < / li > < li > < a href = "#" > Пункт4 < / a > < ul class = "second" > < li > < a href = "#" > Подпункт< / a > < / li > < li > < a href = "#" > Подпункт< / a > < / li > < li > < a href = "#" > Подпункт< / a > < / li > < / ul > < / li > < / ul > < / nav > |
Я понимаю, что она огромна. В этом-то и проблема вложенных списков, что требуется писать много кода. Но учитывайте тот факт, что мы делаем 4 основных пункта и для каждого будет выпадающее меню.
Собственно, я задал всей навигации идентификатор nav, а всем вложенным спискам – стилевой класс second, чтобы понимать, что они являются вложенными.
Отлично, разметка у нас готова, можно посмотреть на результат:
Да уж, выглядит ужасно. Но сейчас мы включим в работу css и уже через несколько минут наша навигация преобразится. Давайте работать.
Пишем css-стили
Первое, что я сделаю, это сброшу все отступы по умолчанию для всех элементов. Они нам будут только мешать, лучше зададим потом отступы сами, где это понадобится.
*{ margin: 0; padding: 0; }
margin : 0 ; padding : 0 ; |
#nav{ height: 70px; } #nav ul{ list-style: none; }
#nav{ height : 70px ; #nav ul{ list - style : none ; |
Теперь нам нужно, собственно, решить, каким будет наше меню. Горизонтальным или вертикальным? Я предлагаю сначала сделать горизонтальное и посмотреть все на его примере. Для этого нужно написать такие стили:
#nav > ul > li{ float: left; width: 180px; position: relative; }
#nav > ul > li{ float : left ; width : 180px ; position : relative ; |
Заметьте, что с помощью знака > мы обращаемся к пунктам списка, который непосредственно вложены в ul, а тот непосредственно вложен в nav. Это очень важно, так как позволяет не применить стиль к пунктам вложенных списков. Дело в том, что по моей задумке в главном списке пункты будут располагаться горизонтально, а во вложенных – вертикально.
Но вы, конечно, можете делать по-другому, в согласии со своей задумкой. Вы можете сделать так, чтобы все пункты были в одну строчку.
В любом случае, вышеприведенный код, я надеюсь, вы понимаете. Он заставляет пункты главного списка прижиматься к левому краю, так что все они встают в одну строку, хотя и являются блочными элементами. Также я задал им явную ширину и относительное позиционирование.
Для чего позиционирование? Оно необходимо для того, чтобы потом абсолютно позиционировать вложенные списки. Если вы изучали позиционирование в css, то наверняка знаете, что если задать блоку относительное позиционирование, то все элементы в нем можно будет позиционировать абсолютно внутри именно этого блока, а не всего окна браузера.
Тем временем, вот что у нас уже получилось:
По этому скриншоту вы можете уже представить себе примерный результат. Конечно, нам еще предстоит красиво оформить пункты, чтобы глаза не умоляли о пощаде при просмотре навигации.
#nav li a{ display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; } #nav li a:hover{ background: #2F718E; }
#nav li a{ display : block ; background : #90DA93; border : 1px solid #060A13; color : #060A13; padding : 8px ; text - align : center ; text - decoration : none ; #nav li a:hover{ background : #2F718E; |
Во-первых, сами ссылки нужно сделать блочными. Это необходимо для того, чтобы работали внутренние отступы и корректно применялись все свойства. Далее указываю цвета фона, текста, параметры рамки, внутренние отступы и выравнивание текста по центру. Наконец, отменяю подчеркивание ссылок.
Все эти параметры не обязательно прописывать так, как это сделал я. Цвета вы можете выбрать произвольно, рамку сделать другую или вообще не использовать, отступы можно уменьшать или увеличивать.
Заметьте, что в данном случае мы не использовали знак >, поэтому указанные правила применятся ко всем ссылкам, в том числе и тем, что находятся во вложенных пунктах. Итак, теперь имеем следующее:
Отлично, но ведь вы понимаете, что подпункты не должны быть видно, они должны раскрываться при наведении на нужный пункт. Без этого наше меню похоже на таблицу. Что ж, самое время спрятать вложенные пункты.
#nav li .second{ display: none; position: absolute; top: 100%; }
#nav li .second{ display : none ; position : absolute ; top : 100 % ; |
Во-первых, скрываем полностью вложенные списки. Во-вторых, задаем им абсолютное позиционирование и координату top: 100%. Это означает, что выпадающее меню будет отображаться четко под основным пунктом, которому принадлежит, четко под 100% высоты этого пункта.
Теперь мы видим на веб-странице только основное меню, что нам и нужно.
Реализуем выпадение
Нам осталось сделать самое главное – реализовать само выпадение. В этом нет ничего сложного, смотрите на этот код:
#nav li:hover .second{ display: block; }
#nav li:hover .second{ display : block ; |
Этот код будет работать безукоризненно. При наведении на пункт основного меню, вложенный список будет становиться видимым. Причем только тот список, что вложен в пункт, на который наводится курсор.
Есть только одна незначительная проблема – ширина вложенных пунктов не соответствует ширине основных. Но это очень легко решается дописыванием соответствующих стилей:
#nav li li{ width: 180px; }
#nav li li{ width : 180px ; |
Все, проблема решена:
Все работает отлично. При наведении на основной пункт появляется соответствующее ему выпадающее меню. Если убрать курсор в сторону – оно пропадает. Если перевести курсор на сами вложенные пункты, то можно будет по ним кликнуть и перейти в нужный раздел сайта. Таким образом, мы сделали с вами очень простое и легкое выпадающее меню абсолютно без скриптов.
Переделываем меню в вертикальное
Ну хорошо, с горизонтальной навигацией мы с вами полностью разобрались, но ведь помимо нее на сайтах очень часто встречается и вертикальная и она тоже может быть выпадающей. На самом деле переделать меню с горизонтального на вертикальное очень легко, нам придется изменить буквально пару строк кода.
Во-первых, вам нужно будет убрать float:left у главных пунктов списка. Именно это свойство способствует тому, что наши пункты отображаются в одну строку, но зачем нам это, если навигация должна быть вертикальной?
Теперь остается изменить правила для селектора #nav li .second, то есть для вложенных списков, а именно, их нужно немного по-другому позиционировать. Вот так:
#nav li .second{ display: none; position: absolute; left: 100%; top: 0; }
#nav li .second{ display : none ; position : absolute ; left : 100 % ; top : 0 ; |
То есть необходимо прописать две координаты вместо одной. Во-первых, в случае с горизонтальной навигацией я говорил, что по задумке пункты вложенных меню должны отображаться под основными пунктами. В случае с вертикальным меню это не подходит – пункты должны отображаться сбоку.
Поэтому изменяем top: 100% на left: 100%. Кроме этого, координата top нам тоже нужна. Задаем ей 0, чтобы вложенное меню находилось на одном уровне с пунктом, которому соответствуют.
Все, теперь все работает так, как надо. Можете протестировать. Как видите, я не врал, когда говорил, что придется переписать всего несколько строк кода.
Горизонтальное меню с несколькими уровнями
Используя примерно такой же подход вы можете создать больше уровней меню, если это сильно необходимо. Например, давайте создадим для четвертого пункта главного меню список, который будет вложен в один из подпунктов.
Июль 2, 2016
Сегодня вертикальное выпадающее меню на css сделать не проблема и я покажу вам сегодня как это делается, абсолютно без скриптов.
Не проблема то не проблема, только я вот сегодня неожиданно понял, что забыл, как это делается Чето давно просто не делал. Ну да ладно, просмотром одного урока я полностью исправил эту проблему, так что поделюсь с вами максимально подробно тем, как все это реализовать. Кстати, если вы хотите узнать, как делается обычное вертикальное меню (красивое ), то смотрите .
Полная разметка
Я решил, что в нашем вертикальном меню будет четыре пункта. При наведении на каждый пункт будет появляться выпадающее подменю из трех подпунктов. Идея моя вам понятна? Из-за этого разметка получилась слегка громоздкой, вот она:
В принципе тут все очень просто. Все меню лежит в контейнере nav , там уже мы создаем список и его пункты. Но поскольку наше меню двухуровневое, то в каждый пункт списка (li) мы дополнительно вкладываем список с классом second-ul (типа вложенный ul). Название класса роли не играет. И так делаем с каждым пунктом. Если вы внимательно изучите разметку на примере одного пункта, то все поймете, вот еще раз:
То есть мы в пункт вкладываем список, в котором в свою очередь располагаются вложенные пункты. На этом с html-разметкой все, переходим в css, где все гораздо интереснее.
Оформление нашего меню
Я сделаю некоторые базовые настройки. В частности, нужно убрать маркер у пунктов меню, задать его высоту. Также дополнительно я сброшу отступы у всех элементов. Вы можете этого не делать, это по желанию, просто помните, что по умолчанию у вложенного списка будет отступ.
*{ margin: 0; padding: 0; } #nav{ height: 70px; } #nav ul{ list-style: none; }
Вот такие правила первым делом отправляются в таблицу стилей. Посмотрим, как выглядит наше меню:
Ужасно, не так ли? Но ничего, сейчас мы это исправим!
Следующие стилевые правила очень важны именно с эстетической точки зрения — наше меню станет гораздо красивее на вид. Вот все эти правила:
#nav > ul > li{ width: 180px; position: relative; } #nav li a{ display: block; background: #ccc; border: 1px solid #333; color: #fff; padding: 15px; } #nav li a:hover{ background: #999; }
Что я здесь настроил? Во-первых, для пунктов главного списка указал ширину и относительное позиционирование. Оно нужно для того, чтобы потом выполнить абсолютное позиционирование вложенного меню. Далее настраиваем сам внешний вид ссылок. Делаем их блочными, красим в нужный цвет, добавляем отступы, рамку и т.д. По желанию. Также сделаем изменение фонового цвета при наведении. Итог всех этих манипуляций:
Я обрезал скриншот. Если же вы все делаете за мной, то у вас будут в ряд располагаться все пункты и подпункты. Все, теперь внешний вид не вызывает отвращения, можно сосредоточиться на том, чтобы сделать меню выпадающим!
Делаем вертикальное меню выпадающим
Пока у нас все вложенные меню видно. Это неправильно, по умолчанию их не должно быть на странице, а появляться они должны только при наведении. То есть при наведении на конкретный пункт должно появляться меню только для него. Суть ясна?
Для начала мы скроем все наши вложенные меню, но перед этим их нужно позиционировать, чтобы они располагались не под основным пунктом, а слева от него. Для этого напишем вот что:
#nav li .second-ul{ display: block; position: absolute; left: 100%; top: 0; }
То есть для вложенного списка указываем абсолютное позиционирование и сдвиг влево на 100% ширины от ширины родительского блока (пункта списка). А насколько мы знаем, ширина у него 180 пикселей. По высоте вложенное меню должно быть на одном уровне. После этих манипуляций у вас должно получится так:
Ну и собственно теперь замените в стилях для вложенных списков display: block на display: none . После этого подменю пропадут с экрана, что нам и нужно. Мы подходим к самому важному этапу — реализации выпадания на css. Для этого сделаем вот что:
#nav li:hover .second-ul{ display: block; }
Все очень просто, этой строки вам хватит! Тут мы по сути говорим браузеру: при наведении на пункт главного списка делай видимым вложенный список!
Проверяем. Понаводите на каждый пункт и убедитесь, что для каждого пункта выводиться его, уникальное подменю. Вот так это выглядит:
И так будет для каждого пункта. Если вы все делали за мной, то именно так и будет. Правда я еще добавил ширину для вложенных пунктов списка, чтобы они были такими же по размеру, как основные:
#nav li li{ width: 180px; }
Ну а дальше вы уже по своему усмотрению можете изменять внешний вид всего этого меню, добавлять новые пункты и т.д. Все это уже очень просто делать, когда знаешь технологию. А технологию я вам показал. Если у вас есть какие-либо вопросы, то можете писать их в комментарии, я же на этом заканчиваю статью.
Давно хотел написать статью о том, как сделать подменю на CSS . Многие делают его на JQuery и получается достаточно неплохо, однако, весь базовый принцип создания подменю на CSS я изложу здесь. А уже дальше, отталкиваясь от этой базы, можно совершенствовать подменю дальше.
Привожу сразу CSS-код :
* html ul li {
float: left;
}
* html ul li a {
height: 1%;
}
ul {
border-bottom: 1px solid #000;
list-style: none;
margin: 0;
padding: 0;
width: 100px;
}
ul li {
position: relative;
}
ul li a {
display: block;
border: 1px solid #000;
border-bottom: 1px;
padding: 5px;
text-decoration: none;
}
li ul {
display: none;
left: 99px;
position: absolute;
top: 0;
}
li:hover ul {
display: block;
}
Самое главное здесь - это селектор "li:hover ul ". Фактически, он и показывает содержимое меню. По умолчанию, оно "display: none ", а при наведении курсора на пункт меню, подменю становится: "display: block ", то есть видимым. Это самое главное. Также в первых двух селекторах (которые со * ) идёт CSS-хак для IE , иначе без него в этом браузере ничего работать не будет. Всё остальное - это внешний вид, который, безусловно, можно менять.
Привожу и HTML-код :
Главная
Меню 1
Подменю 1
Подменю 2
Подменю 3
Меню 2
Подменю4
Подменю 5
Подменю 6
Подменю7
Подменю 8
Если внимательно вдуматься в эту структуру, то становится всё очень понятно. Тег ul - создаёт меню. Если ul находится внутри другого ul , то это уже подменю. А тег li отвечает за конкретный пункт меню.
Разумеется, меню самое наипростейшее, как с точки зрения логики и структуры, так и с точки зрения дизайна. Разумеется, можно с помощью JQuery сделать плавное раскрытие. Можно также изменить дизайн, но весь принцип останется тем же, что и в этом подменю, написанном на CSS и HTML .
Горизонтальное выпадающее меню
написано на HTML и CSS. Код HTML и стили CSS лаконичны, просты и понятны. Всего строк CSS стилей, не считая пробельные, меньше 50. В HTML удобно добавлять новые пункты и подпункты. Немного изменив CSS стили можно сделать несколько тем и изменить вид или способ появления подпунктов (темы оранжевая, сиреневая, коричневая).
Основное отличие моего решения в том, что я не использую списки – теги
- и
- , заменив их на простые , а применение CSS3 flexbox - нового элемента CSS3 - значительно упростило написание и читаемость HTML кода и CSS стилей, сократив при этом их объём.
Ниже приведён рабочий пример горизонтального выпадающего меню на CSS.
Идея заключается в следующем: горизонтальное выпадающее меню создаётся как набор колонок. Колонка представляет собой стопку подпунктов.
Непосредственно горизонтальное меню складывается из верхних элементов стопки. Схематично это выглядит так:
Первые (верхние) пункты образуют верхний уровень горизонтального меню; остальные, пока на колонку не навели курсор, скрыты. При наведении курсора скрытая часть плавно разворачивается вниз.
Как это работает:В обёртку
помещены 4 колонки –
блоки.В свою очередь, в каждом из них лежат пункты, составляющие само горизонтальное меню
Загрузка...Возможно вам будет интересно:
Последние статьи
