Давно хотел написать статью о том, как сделать подменю на 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
.
В этом уроке мы сделаем, классическое горизонтальное меню на чистом CSS. Оно имеет иконки в списках. При наведение на пункт он плавно меняет цвет кнопки и текста, добавляется тень. Выпадающие списки можно делать многоуровневыми и главное это все довольно просто реализовано на чистом CSS3.
В уроке задействуем:
- display: flex;
- используем transition
;
- будем позиционировать элементы при помощи position
.
HTML структура горизонтального меню
П
ервым делом напишем разметку под горизонтальное меню. Открываем свою среду разработки в моем случае это PhpStorm
, создаем index.html
файл, пропишем каркас html:5
, заменю lang
на ru
.
Все meta
удалю кроме кодировки, пропишу свой заголовок «Tom menu
».
Между body
пишем тег header
, а в нем блок с классом .dws-menu
в котором будет находиться наше меню. Далее структура будет следующая, создадим списки в количестве пяти штук. В каждом списке будет ссылка с атрибутом href="#"
. Затем будет идти иконка I
с классом .fa .fa-
ul>li*5>a>i.fa.fa-
Жмем применить.
Пропишем название пунктов меню (Главная, Продукция, Услуги, Новости, Контакты
).
Далее отбираем и подключаем иконки. Переходим на сайт
Font Awesome , отберем себе иконки под данные пункты меню:
Скачиваем архив с сайта с иконками, извлекаем его содержимое к себе на компьютер, копируем папку fonts
и папку css
в свою среду разработки.
В папке fonts
лежат шрифты иконок, а в папке css
их стили. Сжатые стили можно удалить font-awesome.min, подключим не сжатый font-awesome.css
.
В index.html
подключаем иконки, и прописываем каждому пункту свой стиль иконки (home
, shopping-cart
, cogs
, th-list
, envelope-open
).
Основной каркас мы сделали, подменю сформируем после описания основного стиля, а теперь создадим файл где будем описывать основные стили горизонтального меню style.css
и подключим его к index.html
. Для проверки, что стили подключены, создам папку img
, в ней размещу произвольную картинку на задний фон. Пропишем подключение картинки при помощи background
.
Body{
background-image: url("../img/ep_naturalwhite.png");
}
Описываем
CSS стили горизонтального меню
Первым делом сбросим все отступы, которые могут задавать по умолчанию разные браузеры:
Dws-menu *{
margin: 0;
padding: 0;
}
Зададим header
в 200 пик. и назначим
шрифт Cuprum который можно скачать и отдельно подключить к себе на сайте, на всякий случай пропишем дополнительные шрифты.
Header{
margin: 200px;
font-family: Cuprum, Arial, Helvetica, sans-serif;
}
Скроем маркеры у списков:
Dws-menu ul,
.dws-menu ol{
list-style: none;
}
Списки отобразим по горизонтали при помощи display: flax
, и делаем его по центру:
Dws-menu > ul{
display: flex;
justify-content: center;
}
В header
сделаем отступ только сверху, пропишем margin-top
.
Header{
margin-top: 200px;
font-family: Cuprum, Arial, Helvetica, sans-serif;
}
Оформим наше меню, зададим цвет кнопок, шрифт и т.д.
Dws-menu > ul li a{
display: block;
background: #ececed;
padding: 15px 30px 15px 40px;
font-size: 14px;
color: #454547;
text-decoration: none;
text-transform:uppercase;
}
Затем позиционируем иконки, спискам присвоим position: relative;
для дальнейшее центровки иконок:
Dws-menu > ul li{
position: relative;
}
Dws-menu > ul li > a i.fa{
position: absolute;
top: 15px;
left: 12px;
font-size: 18px;
}
Назначим спискам разделитель в виде бордюрчика, отбираем первый элемент LI, задаем бордюр. Отбираем последний элемент LI
присваиваем ему аналогичный бордюр.
Dws-menu > ul li:first-child{
border-left: 1px solid #b2b3b5;
}
.dws-menu > ul li:last-child{
border-right: 1px solid #babbbd;
}
Делаем разделители спискам LI
:
.dws-menu > ul li{
position: relative;
border-right: 1px solid #c7c8ca;
}
Меню приобрело внешний вид, затем можно приступать к описанию стилей при наведении.
Анимируем горизонтальное меню при наведение
Dws-menu li a:hover{
background: #454547;
color: #ffffff;
box-shadow: 1px 5px 10px -5px black;
transition: all 0.3s ease;
}
И что бы этот эффект плавно исчезал, добавим этот стиль к ссылке в покое:
.dws-menu > ul li a{
display: block;
background: #ececed;
padding: 15px 30px 15px 40px;
font-size: 14px;
color: #454547;
text-decoration: none;
text-transform:uppercase;
transition: all 0.3s ease;
}
Основное меню закончили и можно приступать к описанию подменю и вложенные в них меню.
Описываем выпадающее
меню CSS / HTML
О
ткрываем index.html
и добавим, к примеру, в продукцию дополнительное меню. Между списками LI
вставляем UL
, в нем разместим пять списков, в которых будут находиться ссылки с атрибутом herf=”#”
.
ul>li*5>a
Жмем применить, пропишем название пунктов (Одежда, Электроника, Продукты питания, Инструменты, Быт. химия
).
- Одежда
- Электроника
- Продукты питания
- Инструменты
- Быт. химия
Затем открываем style.css
и опишем стили подменю.
Отбираем второй список и присвоим ему position: absolute;
, зададим минимальную ширину в 150 пик.
/*sub menu*/
.dws-menu li ul{
position: absolute;
min-width: 150px;
}
Пропишем спискам border
в 1 пик.
Dws-menu li > ul li{
border: 1px solid #c7c8ca;
}
Для ссылок в подменю установим отступы в 10 пик., уберем трансформацию текста и фон сделаем на пару тонов темнее background: #e4e4e5;
.
Dws-menu li > ul li a{
padding: 10px;
text-transform: none;
background: #e4e4e5;
}
Затем создадим еще одно вложенное меню. Перейдем в файл разметки и к примеру в "Электронике" формируем по аналогии меню как делали мы до этого. Описываем заголовки пунктов (Камеры, Компьютеры, Телефоны
) и сохраняемся.
Электроника
- Камеры
- Компьютеры
- Телефоны
Они вывелись, но скрыты под основным меню, теперь position: absolute;
вложенного UL
и сдвинем его на 150 пик. в сторону:
Dws-menu li > ul li ul{
position: absolute;
right: -150px;
top: 0;
}
/*sub menu*/
.dws-menu li ul{
position: absolute;
min-width: 150px;
display: none;
}
А для их появления отберем списки при наведении и отобразим их при помощи display: block;
.
Dws-menu li:hover > ul{
display: block;
}
Теперь можно добавлять многоуровневые меню просто простым копированием блока UL
, изменением его пунктов.
- Главная
- Продукция
- Одежда
- Электроника
- Камеры
- Компьютеры
- Телефоны
- Продукты питания
- Инструменты
- Быт. химия
- Услуги
- Услуга 1
- Услуга 2
- Услуга 3
- Новости
- Контакты
Затем давайте завершающим этапам оформим кнопки ингредиентом. Я пользуюсь
CSS генератором , у меня создано несколько Presets
, вы можете создать свои, в моем случае я просто копирую данный код и размещаю в место background
который прописывал до этого.
.dws-menu > ul li a{
display: block;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */
background: #c9c9c9; /* Old browsers */
background: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */
padding: 15px 30px 15px 40px;
font-size: 14px;
color: #454547;
text-decoration: none;
text-transform:uppercase;
transition: all 0.3s ease;
}
.dws-menu li a:hover{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0,454547+2,454547+98,e0e1e5+100 */
background: #e0e1e5; /* Old browsers */
background: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0e1e5", endColorstr="#e0e1e5",GradientType=0); /* IE6-9 */
color: #ffffff;
box-shadow: 1px 5px 10px -5px black;
transition: all 0.3s ease;
}
При желании данное меню можно оформить под тот стиль, который именно подойдем вам на сайте, достаточно просто с генерировать цвет и заменить его в коде. Получилась простое и в тоже время симпатичное горизонтальное меню, сделанное на чистом CSS.
Приветствую! Если ты начинающий верстальщик, то рано или поздно ты столкнешься с тем, что захочешь как-то оживить свои страницы, сделать их хоть немного интерактивными. Как нельзя лучше тут тебя смогут выручить 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?
Спасибо за внимание и до скорых встреч!
Вы дочитали до самого конца?
Была ли эта статья полезной?
Да
Нет
Что именно вам не понравилось? Статья была неполной или неправдивой?
Напишите в клмментариях и мы обещаем исправиться!
Продолжаем серию уроком посвященных выпадающим меню. На очереди горизонтальное выпадающее меню на css своими руками.
Если вы попали сюда случайно или вы искали другую реализацию выпадающего меню советую перейти в родительский раздел .
В этом разделе будет описанное горизонтальное выпадающее меню на CSS и HTML.
Навигация по странице:
И так, наша задача:
сделать горизонтальное меню с выпадающим списком css (на списках ul li) без использования jQuery и Javascript, а также без применения таблиц
в коде.
Выпадающее горизонтальное меню html
Первым делом, перед тем как приступать писать код, нам нужно сделать html шаблон для меню.
В связи с тем, что мы делаем универсальное меню, я хочу его сделать максимально похожим под вывод меню WordPress. На мой взгляд, это один из самых простых и универсальных Html кодов меню. Выглядит он вот так:
- Главная
- О нас
- Наши услуги
- Наша услуга №1
- Наша услуга №2
- Наша услуга №3
- Наша услуга №4
- Услуга 5
- Новости
- Контакты
Как видно с кода, наше выпадающее меню будет реализовано на списках ul и li. Вот так выглядит это меню без стилей CSS:
Скажем прямо выглядит уродливо, как обычный список. Далее нам нужно разукрасить это меню с помощью стилей 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 (горизонтальное выпадающее меню)
Ниже доступен демо просмотр работы выпадающего меню, а также ссылка на скачивание исходников. (Демо будет открыт выпадашкой поверх этой страницы, не нужно
нажимать открыть в новом окне 🙂 или колесико мышки)
Горизонтальное выпадающее меню на всю ширину
Большинство из вас могут меня упрекнуть, мол такие менюшки, как я показал выше, это привет из прошлого и от части вы правы, хотя я встречал свежие верстки с такими менюшками.
Надеюсь вы скачали пример выше. 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-menu-3.js
и туда закинуть вот такой маленький код:
$(document).ready(function(){
$("#menu1 > ul > li:not(:last-child)").after(" ");
});
Стили CSS для такого меню нужно оставить те что есть, + забросить вот этот кусок в конец:
#menu1 ul li.razd{
height:28px;
width:1px;
background:#ffffff;
margin-top:4px;
}
Выглядеть такое горизонтальное выпадающее меню с разделителями на jQuery будет вот так:
Можно просмотреть в режиме демо или скачать шаблон горизонтального меню ниже:
Преимуществами такого решения является:
- меню будет тянутся динамически;
- отступы от разделителя до пункта везде одинаковые;
- более красивое и гибкое оформление.
Горизонтальное многоуровневое выпадающее меню CSS+HTML
Раз пошла речь о многоуровневых выпадающих меню при наведении, наверное стоить поделить их на подгруппы:
с випадашкой при наведении в сторону
со всплывающей выпадашкой третьего уровня
В своих примерах я буду показывать многоуровневое меню CSS на 3 уровня, далее думаю будет не сложно догадаться что нужно делать.
Многоуровневое выпадающее меню с випадашкой в сторону при наведении
Для начала нам нужно немножко подкоректировать наш хтмл. Там добавится парочка строк для 3 уровня:
- Главная
- О нас
- Наши услуги
- Наша услуга №1
- Дополнение к услуге 1
- Дополнение к услуге 2
- Наша услуга №2
- Дополнение к услуге 3
- Дополнение к услуге 4
- Наша услуга №3
- Наша услуга №4
- Услуга 5
- Новости
- Контакты
- Карта проезда
- Дополнение для карты
- Дополнение для карты 2
- Форма обратной связи
#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://сайт/vypadayushhee-menu/
, там собраны все примеры и разновидности выпадающих меню.
Горизонтальное меню
представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента
, а затем применить CSS-стили к его элементам. Такое расположение меню является наиболее распространенным в силу очевидных преимуществ в его позиционировании на веб-странице.
Как сделать горизонтальное меню: разметка и примеры оформления
HTML-разметка и базовые стили для горизонтального меню
По умолчанию все элементы списка располагаются вертикально
, занимая по ширине всю ширину элемента контейнера , который в свою очередь занимает всю ширину его блока-контейнера.
HTML разметка для горизонтальной навигации
Горизонтальное меню, находящееся внутри тега , можно дополнительно помещать внутрь элемента ... и/или ... . Благодаря этому html-разметке придается семантический смысл, а также появляется дополнительная возможность для форматирования блока меню.
Существует несколько способов разместить их горизонтально
. Для начала нужно сбросить стили браузера по умолчанию для элементов навигации:
Ul {
list-style: none; /*убираем маркеры списка*/
margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/
padding-left: 0; /*убираем левый отступ, равный 40px*/
}
a {text-decoration: none; /*убираем подчеркивание текста ссылок*/}
Способ 1. li {display: inline;}
Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li {margin-right: -4px;} . Дальше стилизуем ссылки по своему желанию.
Способ 2. li {float: left;}
Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul {overflow: hidden;} , расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.
Способ 3. li {display: inline-block;}
Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.
Способ 4. ul {display: flex;}
Делаем список ul гибким контейнером с помощью модели . В результате элементы списка располагаются горизонтально. Добавляем для ссылок a {display: block;} и стилизуем их по своему желанию.
1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed");
.menu-main {
list-style: none;
margin: 40px 0 5px;
padding: 25px 0 5px;
text-align: center;
background: white;
}
.menu-main li {display: inline-block;}
.menu-main li:after {
content: "|";
color: #606060;
display: inline-block;
vertical-align:top;
}
.menu-main li:last-child:after {content: none;}
.menu-main a {
text-decoration: none;
font-family: "Ubuntu Condensed", sans-serif;
letter-spacing: 2px;
position: relative;
padding-bottom: 20px;
margin: 0 34px 0 30px;
font-size: 17px;
text-transform: uppercase;
display: inline-block;
transition: color .2s;
}
.menu-main a, .menu-main a:visited {color: #9d999d;}
.menu-main a.current, .menu-main a:hover{color: #feb386;}
.menu-main a:before,
.menu-main a:after {
content: "";
position: absolute;
height: 4px;
top: auto;
right: 50%;
bottom: -5px;
left: 50%;
background: #feb386;
transition: .8s;
}
.menu-main a:hover:before, .menu-main .current:before {left: 0;}
.menu-main a:hover:after, .menu-main .current:after {right: 0;}
@media (max-width: 550px) {
.menu-main {padding-top: 0;}
.menu-main li {display: block;}
.menu-main li:after {content: none;}
.menu-main a {
padding: 25px 0 20px;
margin: 0 30px;
}
}
2. Адаптивное меню для свадебного сайта
@import url("https://fonts.googleapis.com/css?family=PT+Sans");
.top-menu {
position: relative;
background: #fff;
box-shadow: inset 0 0 10px #ccc;
}
.top-menu:before,
.top-menu:after {
content: "";
display: block;
height: 1px;
border-top: 3px solid #575350;
border-bottom: 1px solid #575350;
margin-bottom: 2px;
}
.top-menu:after {
border-bottom: 3px solid #575350;
border-top: 1px solid #575350;
box-shadow: 0 2px 7px #ccc;
margin-top: 2px;
}
.menu-main {
list-style: none;
padding: 0 30px;
margin: 0;
font-size: 18px;
text-align: center;
position: relative;
}
.menu-main:before,
.menu-main:after {
content: "\25C8";
line-height: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.menu-main:before {left: 15px;}
.menu-main:after {right: 15px;}
.menu-main li {
display: inline-block;
padding: 5px 0;
}
.menu-main a {
text-decoration: none;
display: inline-block;
margin: 2px 5px;
padding: 6px 15px;
font-family: "PT Sans", sans-serif;
font-size: 16px;
color: #777777;
border-bottom: 1px solid transparent;
transition: .3s linear;
}
.menu-main .current, .menu-main a:hover {
border-radius: 3px;
background: #f3ece1;
color: #313131;
text-shadow: 0 1px 0 #fff;
border-color: #c6c6c6;
}
@media (max-width: 500px) {
.menu-main li {display: block;}
}
3. Адаптивное меню с фестонами
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption");
.menu-main {
list-style: none;
padding: 0 30px;
margin: 0;
font-size: 18px;
text-align: center;
position: relative;
background: white;
}
.menu-main:after {
content: "";
position: absolute;
width: 100%;
height: 20px;
left: 0;
bottom: -20px;
background: radial-gradient(white 0%, white 70%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%) 0 -10px;
background-size: 20px 20px;
background-repeat: repeat-x;
}
.menu-main li {display: inline-block;}
.menu-main a {
text-decoration: none;
display: inline-block;
margin: 0 15px;
padding: 10px 30px;
font-family: "PT Sans Caption", sans-serif;
color: #777777;
transition: .3s linear;
position: relative;
}
.menu-main a:before,
.menu-main a:after {
content: "";
position: absolute;
top: calc(50% - 3px);
width: 6px;
height: 6px;
border-radius: 50%;
background: #F58262;
opacity: 0;
transition: .5s ease-in-out;
}
.menu-main a:before {left: 5px;}
.menu-main a:after {right: 5px;}
.menu-main a.current:before,
.menu-main a.current:after,
.menu-main a:hover:before,
.menu-main a:hover:after {opacity: 1;}
.menu-main a.current,
.menu-main a:hover {color: #F58262;}
@media(max-width:680px) {
.menu-main li {display: block;}
}
4. Адаптивное меню на ленточке
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption");
.top-menu {
margin: 0 60px;
position: relative;
background: #5A394E;
box-shadow:
inset 1px 0 0 rgba(255,255,255,.1),
inset -1px 0 0 rgba(255,255,255,.1),
inset 150px 0 150px -150px rgba(255,255,255,.12),
inset -150px 0 150px -150px rgba(255,255,255,.12);
}
.top-menu:before,
.top-menu:after {
content: "";
position: absolute;
z-index: 2;
left: 0;
width: 100%;
height: 3px;
}
.top-menu:before {
top: 0;
border-bottom: 1px dashed rgba(255,255,255,.2);
}
.top-menu:after {
bottom: 0;
border-top: 1px dashed rgba(255,255,255,.2);
}
.menu-main {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
.menu-main:before,
.menu-main:after {
content: "";
position: absolute;
width: 50px;
height: 0;
top: 8px;
border-top: 18px solid #5A394E;
border-bottom: 18px solid #5A394E;
transform: rotate(360deg);
z-index: -1;
}
.menu-main:before {
left: -30px;
border-left: 12px solid rgba(255, 255, 255, 0);
}
.menu-main:after {
right: -30px;
border-right: 12px solid rgba(255, 255, 255, 0);
}
.menu-main li {
display: inline-block;
margin-right: -4px;
}
.menu-main a {
text-decoration: none;
display: inline-block;
padding: 15px 30px;
font-family: "PT Sans Caption", sans-serif;
color: white;
transition: .3s linear;
}
.menu-main a.current,
.menu-main a:hover {background: rgba(0,0,0,.2);}
@media (max-width: 680px) {
.top-menu {margin: 0;}
.menu-main li {
display: block;
margin-right: 0;
}
.menu-main:before,
.menu-main:after {content: none;}
.menu-main a {display: block;}
}
5. Адаптивное меню с логотипом по середине
- Work
- About
- Story
- Contact
- Shop
- Gallery
@import url("https://fonts.googleapis.com/css?family=Arimo");
.top-menu {
position: relative;
background: rgba(34,34,34,.2);
}
.menu-main {
list-style: none;
margin: 0;
padding: 0;
}
.menu-main:after {
content: "";
display: table;
clear: both;
}
.left-item {float: left;}
.right-item {float: right;}
.navbar-logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.menu-main a {
text-decoration: none;
display: block;
line-height: 80px;
padding: 0 20px;
font-size: 18px;
letter-spacing: 2px;
font-family: "Arimo", sans-serif;
font-weight: bold;
color: white;
transition: .3s linear;
}
.menu-main a:hover {background: rgba(0,0,0,.3);}
@media (max-width: 830px) {
.menu-main {
padding-top: 90px;
text-align: center;
}
.navbar-logo {
position: absolute;
left: 50%;
top: 10px;
transform: translateX(-50%);
}
.menu-main li {
float: none;
display: inline-block;
}
.menu-main a {
line-height: normal;
padding: 20px 15px;
font-size: 16px;
}
}
@media (max-width: 630px) {
.menu-main li {display: block;}
}
6. Адаптивное меню с логотипом слева
- Work
- About
- Story
- Shop
- Gallery
- Contact
@import url("https://fonts.googleapis.com/css?family=Arimo");
.top-menu {
background: rgba(255,255,255,.5);
box-shadow: 3px 0 7px rgba(0,0,0,.3);
padding: 20px;
}
.top-menu:after {
content: "";
display: table;
clear: both;
}
.navbar-logo {display: inline-block;}
.menu-main {
list-style: none;
margin: 0;
padding: 0;
float: right;
}
.menu-main li {display: inline-block;}
.menu-main a {
text-decoration: none;
display: block;
position: relative;
line-height: 61px;
padding-left: 20px;
font-size: 18px;
letter-spacing: 2px;
font-family: "Arimo", sans-serif;
font-weight: bold;
color: #F73E24;
transition:.3s linear;
}
.menu-main a:before {
content: "";
width: 9px;
height: 9px;
background: #F73E24;
position: absolute;
left: 50%;
transform: rotate(45deg) translateX(6.5px);
opacity: 0;
transition: .3s linear;
}
.menu-main a:hover:before {opacity: 1;}
@media (max-width: 660px) {
.menu-main {
float: none;
padding-top: 20px;
}
.top-menu {
text-align: center;
padding: 20px 0 0 0;
}
.menu-main a {padding: 0 10px;}
.menu-main a:before {transform: rotate(45deg) translateX(-6px);}
}
@media (max-width: 600px) {
.menu-main li {display: block;}
}
