Выпадающее меню на html и css. Как создать в CSS выпадающее меню
Горизонтальное выпадающее меню
написано на HTML и CSS. Код HTML и стили CSS лаконичны, просты и понятны. Всего строк CSS стилей, не считая пробельные, меньше 50. В HTML удобно добавлять новые пункты и подпункты. Немного изменив CSS стили можно сделать несколько тем и изменить вид или способ появления подпунктов (темы оранжевая, сиреневая, коричневая).
Основное отличие моего решения в том, что я не использую списки – теги
- и
- , заменив их на простые , а применение CSS3 flexbox - нового элемента CSS3 - значительно упростило написание и читаемость HTML кода и CSS стилей, сократив при этом их объём.
Ниже приведён рабочий пример горизонтального выпадающего меню на CSS.
Идея заключается в следующем: горизонтальное выпадающее меню создаётся как набор колонок. Колонка представляет собой стопку подпунктов.
Непосредственно горизонтальное меню складывается из верхних элементов стопки. Схематично это выглядит так:Первые (верхние) пункты образуют верхний уровень горизонтального меню; остальные, пока на колонку не навели курсор, скрыты. При наведении курсора скрытая часть плавно разворачивается вниз.
Как это работает:Joomla-3 - отличный движок для вашего сайта! Базовые расширения Модули, компоненты, плагтны, шаблоны Структура каталогов Joomla-3 Метод замещения компоновок CSS3 - продвинутые возможности дизайна Плавная смена изображений. Часть 1 Плавная смена изображений. Часть 2 Плавная смена фона Изменение фона наведением мыши Псевдоклассы и псевдоэлементы JavaScript - Активные элементы WEB-страниц Скрипт плавной смены изображений HTML5 - используйте новые теги, элементы и атрибуты Использование поигрывателя HTML5
В обёртку помещены 4 колонки –
блоки .В свою очередь, в каждом из них лежат пункты, составляющие само горизонтальное меню (перед top пробел!) и вложенные подпункты .
Чтобы при выпадении вертикальных подпунктов контент, расположенный следом, не прыгал вниз длина обёртки должна немного превышать полное выпадение колонок.@import url("https://fonts.googleapis.com/css?family=Roboto"); #dd-menu__wrapper { display: flex; justify-content: space-between; width: 640px; min-height: 120px; margin: 1px auto; overflow: auto; } .dd-menu__column { display: flex; flex-direction: column; width: 159px; max-height: 38px; overflow: hidden; transition: 1.2s; z-index: 1000; } .dd-menu__column:hover { max-height: 600px; } .dd-menu__item { display: block; font-family: "Roboto", sans-serif; font-size: 11px; color: #ffffff; background-color: #1e90ff; border-bottom: 1px solid #fff; padding: 4px 6px; } .dd-menu__item.top { min-height: 30px; max-height: 38px; } .dd-menu__item:hover { cursor: pointer; background-color: #0062c1; } .dd-menu__item a { display: block; height: 100%; width: 100%; vertical-align: middle; text-decoration: none; color: #ffffff; }
Обёртка горизонтального меню (3) определяется как flex-контейнер (4). Здесь же указывается, что все элементы контейнера будут равномерно распределены по горизонтали в родительском блоке (5).
Следующие вложенные блоки (12) также будут flex-контейнерами (13), а содержащиеся в них элементы (26) будут блочными (27) и выстраиваться в колонку (14), образуя вертикальные подпункты. Изначально максимальная высота стопки равна высоте верхних пунктов (16). Все остальные элементы стопки будут скрыты (17). То есть, пока не наведётся курсор, отображаться будут только верхние пункты.
При наведении курсора на колонку ограничение высоты снимается (22) и всё содержимое стопки выпадает вниз. Когда курсор переместится в другую область все пункты утянутся наверх.
Все развёртки будут проходить плавно, в течение заданного времени (18). Чтобы контент не просвечивал из под развёрнутой стопки установим z-index (19).
Поскольку, в отличии от разворачивающихся подпунктов, которые могут иметь различную высоту в зависимости от содержимого, первые (верхние) пункты всегда должны иметь высоту строки горизонтального меню, установлено жесткое ограничение min и max высоты (37,38).
Обратите внимание, в моём случае min-height на 8 пикселей меньше max-height. Это связано с тем, что все элементы имеют снизу и сверху внутренние отступы по 4 пикселя (33). Именно сумма этих отступов и дополняет минимальную высоту пунктов горизонтального меню. Если отступов не будет значения min-height и max-height будут одинаковы.
Примечание: В строке (36) .dd-menu__item.top top пишется через точку, без пробела!Все стили написаны на языке (препроцессора CSS) LESS и оттранслированы в CSS программой WinLess. Очень удобно, трудоёмкость сокращается в разы, рекомендую.
Надеюсь, что статья оказалась для вас полезной. Good luck!Каждый, кто решил создать свой сайт, сталкивается с потребностью создания симпатичного меню для своего сайта . В этой статье я расскажу, как при помощи обычного HTML-кода и несложных CSS-правил, можно создать отличное выпадающее меню , которое легко менять и дополнять. И для этого нам не понадобится никакой JavaScript-код!
Первым и самым важным этапом, при создании выпадающего меню, является создание его структуры. Лучше всего это делать, используя ненумерованные списки. Давайте создадим вот такое простое меню:
- Главная
- Статьи
- HTML
- CSS
- PHP
- MySQL
- Книги
- Раскрутка и продвижение
- Е-Бизнес
- Web-Дизайн
- Платежные системы
- О нас
Довольно простой и не сложный получился html-код. Выглядеть этот список будет так .
На следующем этапе мы приведем наше меню к более красивому виду. Это легко можно сделать благодаря использованию CSS .
Первым делом уберем меркеры в ненумерованном списке, отступы, а также зададим ширину нашего меню.#nav ul { margin: 0px; padding: 0px; list-style:none; width:200px; }
Теперь нам необходимо задать положение элементов списка. Так как наше меню будет вертикальное, это облегчает нашу работу. Однако, нам необходимо задать значение для свойства "position" , как "relative" . Это необходимо для того, чтобы относительно основного меню абсолютно позиционировать подменю. Также зададим нижнее подчеркивание для пунктов меню.
#nav ul li { position: relative; border-bottom:1px solid #ccc; }
Теперь необходимо подкорректировать наше подменю . Так как мы хотим, чтобы наше меню появлялась справа от основного меню в тот момент, когда над этим пунктом находится курсор, то нам необходимо вложенному списку, свойству "position" задать значение "absolute" . Также нам необходимо задать его положение. Это делается следующим образом
#nav li ul { position: absolute; left: 200px; top: 0; display: none; }
Используя атрибуты left и top мы задаем абсолютное позиционирование нашего подменю относительно родительского пункта меню. Также я присвоил атрибуту "display" значение "none" , так как мы не хотим видеть подменю при открытии страницы.
Итак, теперь наше меню выглядит так.
Теперь придадим вид нашим ссылкам. В первую очередь для того, чтобы каждая ссылка занимала всё отведённое для неё место внутри содержащего её элемента списка, присвоим атрибуту "display" значение "block" . Также уберем нижнее подчеркивание и зададим цвет фона и цвет текста ссылок.
#nav ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; }
#nav li:hover ul { display: block; }
Вот теперь наше меню уже работает и выглядит так .
Осталось придать ему более привлекательный вид.
Для начала давайте сделаем так, чтобы при наведении на пункты нашего меню изменялся фон и цвет текста. Для этого добавим следующий код
#nav li:hover a { color:#FFFFFF; background: url(img/fone-tr.png); }
Здесь я в качестве фона использую вот эту картинку , но Вы можете использовать и заливку любым другим цветом (например: background-color:#0000ff; ).
#nav li:hover ul a:hover { background-color:#cccccc; background-image:none; color:#FFFFFF; }
Ну вот и все! Наше выпадающее меню на html и CSS готово. Можете посмотреть, что у нас получилось .
На этом казалось бы можно было закончить, но нет. К сожалению ранние версии Internet Explorer понимают псевдокласс :hover лишь для тега - так что li:hover , на который у нас завязано появление подменю и изменение цвета фона, ему ни о чём не говорит.
Для того чтобы устранить эту проблему, добавим небольшой JavaScript-код:
А теперь сделаем так, чтобы при наведении на пункт подменю, он также изменял цвет своего фона. Для этого используем следующий код:
jsHover = function() { var hEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0, len=hEls.length; i 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 . Но а пока, давайте приступим к разбору данного метода. Но, сначала предложу посмотреть, что получится в итоге:
Первым делом, давайте напишем HTML код нашего меню. Меню будет простейшим. Для примера у него будет 2 пункта у каждого из которых будет выпадающий список с подпунктами.
-
пункт 1
- Выпадающий пункт 1
- Выпадающий пункт 2
- Выпадающий пункт 3
-
пункт 2
- Выпадающий пункт 1
- Выпадающий пункт 2
- Выпадающий пункт 3
Думаю тут все понятно, самое простое 2-х уровневое меню. Как и говорил, меню имеет два главных пункта, можете добавить сколько угодно, если нужно. Дальше нужно просто добавить стили, которые и сделают всю магию 🙂
#slow_nav > ul{ width: 500px; margin:25px auto 0; } #slow_nav > ul > li{ list-style: none; display: inline-block; position:relative; padding:0; } #slow_nav a{text-decoration:none;} #slow_nav > ul > li > a{ font-size:18px; padding:5px; background-color:#333; color:#fff; } #slow_nav li ul{ position:absolute; list-style:none; text-align:center; top:15px; font-size:15px; left:0; margin:0; padding:0; /* Данные строки нужны для правильной работы анимации */ max-height:0px; overflow:hidden; -webkit-transition:max-height 0.4s linear; -moz-transition:max-height 0.4s linear; transition:max-height 0.4s linear; /* конец */ } #slow_nav li:hover ul{ max-height:300px; } #slow_nav li ul li{ background-color:#333; border-bottom:1px solid #888; } #slow_nav li ul li:last-child{ border-bottom:none; } #slow_nav li ul li a{ padding:5px 12px; color:#fff; display:block; } #slow_nav li ul li:hover{ background-color:#444; } #slow_nav li ul li:first-child{ margin-top:25px; position:relative; } #slow_nav li ul li:first-child:before{ content:""; position:absolute; width:1px; height:1px; border:5px solid transparent; border-bottom-color:#333; left:10px; top:-10px; }
Код CSS не маленький., но по своей сути не сложный. Если Вы владеете навыками верстки, то запросто разберетесь что и как. Я лишь остановлюсь на некоторых моментах, которые являются важными.
Первым делом это сама анимация. Нужный код выделен комментариев в коде - /* Данные строки нужны для правильной работы анимации */ . Удалять из нельзя, в противном случаи анимация перестанет работать. В данном отрезке кода, изначально мы задаем высоту в ноль пикселей -
max-height:0px; и прописываем свойство overflow:hidden; , чтобы скрыть наше дочернее меню, то есть выпадающее. Дальше уже прописываем кроссбраузерное свойство transition , которое совершит анимацию.
Webkit-transition:max-height 0.4s linear; -moz-transition:max-height 0.4s linear; transition:max-height 0.4s linear;
Тут можете изменить разве что время анимации. В данный момент время задано 0.4 секунды. Сразу после того как задали анимацию, добавлено свойство, для задания новой высоты при наведении на главные пункты меню:
#slow_nav li:hover ul{ max-height:300px; }
Тут такая картинка. Высота задается максимальная фиксированная, если у Вас высота выпадающего меню будет побольше, то и значение меняйте на больше. В противном случаи Ваше меню обрежет по высоте 300 пикселей.
Данный способ можно применять не только к самописным меню но и к тем же динамическим меню, которые создаются системами управления сайтом, например WordPress . Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂 Я дал идею и способ, а Вам решать, применять его или нет.
На этом все, спасибо за внимание. 🙂
Приветствую! Если ты начинающий верстальщик, то рано или поздно ты столкнешься с тем, что захочешь как-то оживить свои страницы, сделать их хоть немного интерактивными. Как нельзя лучше тут тебя смогут выручить CSS анимации. Но нужно знать, где и как их применять.
Сегодня я расскажу, как сделать выпадающее меню на чистом CSS и как добавить ему плавности с помощью CSS анимации. Если ты не знаешь, то самое время ознакомиться с азами.
Верстаем меню HTML + CSSДля начала, чтобы нам было с чем работать, давайте сверстаем простое одноуровневое меню. Не будем сильно заморачиваться с дизайном, для наглядности хватит и этого:
Что мы имеем? Самый обыкновенные ненумерованный список с идентификатором «top_menu» и со ссылками, обернутыми в элементы этого самого списка. Все банально и просто. При наведении пункты меню меняют цвет… это все вы уже знаете и понимаете, как это сделать (я надеюсь).
Добавляем меню второго уровняЧтобы сделать многоуровневое меню, нам нужно добавить второй ненумерованный список внутрь первого. Думаю, это вы проходили где-то на начальных уроках. А также то, что его вставить нужно не просто внутри нашего списка, а именно внутри элемента списка, то есть тега «li », сразу после закрывающего тега «a».
Позиционируем вложенные списки абсолютно по отношению к «li », в которые они вложены. А все «li » верхнего уровня позиционируем относительно (relative ). Чтобы выпадающее меню находилось СРАЗУ же после нашего меню верхнего уровня, ему (выпадающему – “inner_menu ”) нужно задать
Position: absolute; top: 100%;
То есть отступ от верхней границы родителя будет равен высоте родителя. Очень логично, по-моему.
Помимо позиционирования нужно придать выпадающему меню стиль как у меню верхнего уровня. Яблочко от яблоньки, как говорится…
Как видите, наше выпадающее меню пока выглядит не выпадающим, а выпавшим и висящим. Но ничего, это мы скоро исправим.
Как сделать выпадающее меню действительно выпадающим
Нет ничего проще! Чтобы наш вложенный список сделать выпадающим меню, его нужно просто скрыть! А потом открывать только тогда, когда курсор мыши будет проноситься над пунктом меню верхнего уровня, который содержит в себе выпадающее меню. Звучит, может быть, немного сложно, но на самом деле это решается буквально несколькими строчками кода.
Выпадающему меню добавляем:
Display: none;
А чтобы его отобразить, нужно прописать:
#top_menu > li:hover > ul { display: block; }
Что нам говорит это целое скопище селекторов? Читаем с конца. Мы задаем стили (видмости) для списка второго уровня, который лежит внутри элемента списка первого уровня, но стили эти сработают только в том случае, если мы наведем мышкой (ховер) на элемент « li» в который вложен наш список второго уровня.
Надеюсь, я выразился понятно. Если нет, попробуйте прочитать несколько раз. А еще лучше просто понимать это, глядя на код. Смотрим, что у нас получилось:
Да, мы вроде бы добились того, чего хотели – мы сделали выпадающее меню, самое настоящее выпадающее меню, мать его! Но ему чего-то не хватает. А знаете чего? Плавности! Ведь все выглядит так, как будто меню не выпадает, а просто появляется. Причем очень резко, моментально даже, я бы сказал.
Ну что же, давайте еще немного поколдуем над ним.
Плавное выпадающее меню – это простоИтак, давайте сделаем плавное выпадающее меню на чистом CSS. Зачем это делать? Потому что люди любят, когда все плавненько и мягонько… и это выглядит красиво. Будет плюс к юзабилити вашего сайта. Погнали!
Запомните, вы можете анимировать только точные математические величины, например 50px и 300px, 0 и 100%, 0,5 и 1,0 и так далее. В нашем случае мы не сможем анимировать два состояния нашего выпадающего меню (display:none; и display:block; ).
Но мы можем заменить их на прозрачность – opacity:0 и opacity:1. И задать время в течение которого наше меню будет проявляться из прозрачного состояния. Да, это действительно сработает, однако это не совсем тот эффект, который вы возможно ожидали. Поэтому давайте сделаем немного сложнее. Но это того стоит, поверьте.
Чтобы анимация получилась более плавной и предсказуемой, пришлось задать фиксированную высоту пунктам выпадающего меню, хотя можно было обойтись и без этого. Методов уйма, только придумывай комбинации и решай задачи.
Как видно из кода, мы анимировали высоту элементов выпадающего списка и их прозрачность. Этого оказалось достаточно для того, чтобы сделать красивую плавную анимацию выпадающего меню.
Что нам понадобилось для анимации? Два состояния пунктов нашего меню, а также свойство transition, которое проинтерполировало эти состояния, то есть заполнило все промежуточные значения за отведенный промежуток времени. Вот и все!
Еще проще можно было бы сделать с применением jQuery, но мы же оговорили сначала, что будем сегодня работать с чистым CSS. А еще красивее можно было сделать, добавив к анимациям кривые Безье, однако эта тема немного выходит за рамки сегодняшней. Но мы к ней обязательно вернемся позже.
Вывод:Теперь вы можете похвастаться своим друзьям и близким, что знаете, как сделать выпадающее меню на чистом CSS. Это действительно полезный навык, который вам еще не раз пригодится. Ну, сами посудите, много ли вы видели сайтов со статичным меню? Нет, большинство сайтов имеют именно выпадающее меню.
Кстати это был мой первый урок по CSS. Опишите, как вам? Понятно все объяснил или нужно еще подробнее разжевывать? И стоит ли вообще продолжать писать статьи на тему лайфхаков в CSS?
Спасибо за внимание и до скорых встреч!
Вы дочитали до самого конца?
Была ли эта статься полезной?
Да Нет
Что именно вам не понравилось? Статья была неполной или неправдивой?
Напишите в клмментариях и мы обещаем исправиться!