HTML5BOOK

• H TML
• C SS
• J S
• Т ипографика
• У роки
• В ёрстка
• H TML-справочник
• C SS-справочник

• Главная
• »
• Уроки
• »
• Горизонтальное выпадающее меню

Горизонтальное выпадающее меню

Опубликовано: 17 октября 2015 Обновлено: 13 июня 2021 102 Comments

Горизонтальное выпадающее меню используется для упорядочения структуры навигации по сайту. Оптимальное количество уровней вложения — один-два. Чем меньше уровней вложений, тем легче посетителю сайта найти нужную информацию. Как создать обычное горизонтальное меню, подробно изложено в этом уроке .

Как сделать горизонтальное выпадающее меню

• Содержание:
• 1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения
• 2. 3D выпадающее меню
• 3. Разворачивающееся выпадающее меню с логотипом
• 4. Увеличивающееся выпадающее меню
• 5. Подъезжающее выпадающее меню

1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения

HTML-разметка горизонтального выпадающего меню отличается от обычного меню тем, что к нужному элементу списка <li> добавляется вложенный список <ul> или <оl>.

Для позиционирования вложенного меню относительно основного меню объявляются следующие стили:
— для элемента списка, в который вложен выпадающий список: li {position: relative;};
— для выпадающего меню ul {position: absolute;}, а также значения left и top.

Для наглядности и удобства форматирования добавим основному меню класс topmenu, выпадающему — submenu.

Скрыть выпадающее меню можно несколькими способами:
1) display: none;
2) visibility: hidden;
3) opacity: 0;
4) transform: scaleY(0);
5) с помощью библиотеки jQuery.

Способ 1. {display: none;}

Выпадающее меню скрывается с помощью .submenu {display: none;}, при наведении показывается с помощью .topmenu li:hover .submenu {display: block;}.

Способ 2. {visibility: hidden;}

Меню скрывается с помощью .submenu {visibility: hidden;}, показывается — .topmenu li:hover .submenu {visibility: visible;}.

Способ 3. {opacity: 0;}

Меню скрывается с помощью .submenu {opacity: 0;}, показывается — .topmenu li:hover .submenu {opacity: 1;}. Чтобы меню не появлялось при наведении на область, где оно расположено, добавляем visibility: hidden;, а при наведении меняем на visibility: visible;.

Способ 4. {transform: scaleY(0);}

Меню скрывается с помощью .submenu {transform: scaleY(0);}, показывается — .topmenu li:hover .submenu {transform: scaleY(1);}. Поскольку трансформация элемента по умолчанию происходит из центра, нужно добавить для .submenu {transform-origin: 0 0;}, т.е. из верхнего левого угла.

Способ 5. С помощью jQuery

$(".five li ul").hide(); // скрываем выпадающее меню

$(".five li:has('.submenu')").hover(

function(){

$(".five li ul").stop().fadeToggle(300);} /* отбираем элемент списка, который содержит элемент с классом .submenu и добавляем ему функцию при наведении, которая показывает и скрывает выпадающее меню */

);

JavaScript

2. 3D выпадающее меню

Интересные эффекты можно создавать с помощью CSS3-трансформаций, например, заставить меню появляться из глубины экрана.

<nav>

<ul class="topmenu">

<li><a href="">Home</a></li>

<li><a href="">Shop</a></li>

<li><a href="" class="down">Blog</a>

<ul class="submenu">

<li><a href="">Category</a></li>

<li><a href="">Author</a></li>

<li><a href="">Archive</a></li>

<li><a href="">Tags</a></li>

</ul>

</li>

<li><a href="" class="down">Portfolio</a>

<ul class="submenu">

<li><a href="">Category</a></li>

<li><a href="">Author</a></li>

<li><a href="">Archive</a></li>

<li><a href="">Tags</a></li>

</ul>

</li>

<li><a href="">Contact</a></li>

</ul>

</nav>

HTML

* { box-sizing: border-box; }

body {

margin: 0;

background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px);

background-size: 10px 10px;

}

nav ul {

list-style: none;

margin: 0;

padding: 0;

}

nav a {

display: block;

text-decoration: none;

outline: none;

transition: .4s ease-in-out;

}

.topmenu {

backface-visibility: hidden;

background: rgba(255,255,255,.8);

}

.topmenu > li {

display: inline-block;

position: relative;

}

.topmenu > li > a {

font-family: 'Exo 2', sans-serif;

height: 70px;

padding: 0 30px;

font-weight: bold;

color: #003559;

text-transform: uppercase;

}

.down:after {

content: "\f107";

margin-left: 8px;

font-family: FontAwesome;

}

.topmenu li a:hover { color: #E6855F; }

.submenu {

background: white;

border: 2px solid #003559;

position: absolute;

left: 0;

visibility: hidden;

opacity: 0;

z-index: 5;

width: 150px;

transform: perspective(600px) rotateX(-90deg);

transform-origin: 0% 0%;

transition: .6s ease-in-out;

}

.topmenu > li:hover .submenu{

visibility: visible;

opacity: 1;

transform: perspective(600px) rotateX(0deg);

}

.submenu li a {

color: #7f7f7f;

font-size: 13px;

padding: 0 25px;

font-family: 'Kurale', serif;

}

CSS

3. Разворачивающееся выпадающее меню с логотипом

В этом примере в верхнем разделе страницы расположены логотип и навигация по сайту. В качестве логотипа может быть картинка или текст. Выпадающее меню постепенно разворачивается из-под элемента верхнего списка с помощью функции CSS3-трансформации.

<header>

<a href="" class="logo">Лого</a>

<nav>

<ul class="topmenu">

<li><a href="">Главная</a></li>

<li><a href="" class="submenu-link">О нас</a>

<ul class="submenu">

<li><a href="">Производство</a></li>

<li><a href="">Магазин</a></li>

<li><a href="">Сервис</a></li>

</ul>

</li>

<li><a href="">Проекты</a></li>

<li><a href="">Контакты</a></li>

</ul>

</nav>

</header>

HTML

* { box-sizing: border-box; }

body {

margin: 0;

background: #f2f2f2;

}

header {

background: white;

text-align: center;

}

header a {

text-decoration: none;

outline: none;

display: block;

transition: .3s ease-in-out;

}

.logo {

color: #D5B45B;

font-family: 'Playfair Display', serif;

font-size: 2.5em;

padding: 20px 0;

}

nav {

display: table;

margin: 0 auto;

}

nav ul {

list-style: none;

margin: 0;

padding: 0;

}

.topmenu:after {

content: "";

display: table;

clear: both;

}

.topmenu > li {

width: 25%;

float: left;

position: relative;

font-family: 'Open Sans', sans-serif;

}

.topmenu > li > a {

text-transform: uppercase;

font-size: 14px;

font-weight: bold;

color: #404040;

padding: 15px 30px;

}

.topmenu li a:hover { color: #D5B45B; }

.submenu-link:after {

content: "\f107";

font-family: "FontAwesome";

color: inherit;

margin-left: 10px;

}

.submenu {

background: #273037;

position: absolute;

left: 0;

top: 100%;

z-index: 5;

width: 180px;

opacity: 0;

transform: scaleY(0);

transform-origin: 0 0;

transition: .5s ease-in-out;

}

.submenu a {

color: white;

text-align: left;

padding: 12px 15px;

font-size: 13px;

border-bottom: 1px solid rgba(255,255,255,.1);

}

.submenu li:last-child a { border-bottom: none; }

.topmenu > li:hover .submenu {

opacity: 1;

transform: scaleY(1);

}

CSS

4. Увеличивающееся выпадающее меню

Ещё один пример для выпадающего меню. Эффект увеличения при появлении меню реализуется за счет уменьшения первоначального размера .submenu {transform: scale(.8);}, при наведении размер увеличивается до .topmenu > li:hover .submenu {transform: scale(1);}.

<nav>

<ul class="topmenu">

<li><a href="">Home</a></li>

<li><a href="">Shop</a></li>

<li><a href="">Blog</a>

<ul class="submenu">

<li><a href="">Category</a></li>

<li><a href="">Author</a></li>

<li><a href="">Archive</a></li>

<li><a href="">Tags</a></li>

</ul>

</li>

<li><a href="">Portfolio</a>

<ul class="submenu">

<li><a href="">Category</a></li>

<li><a href="">Author</a></li>

<li><a href="">Archive</a></li>

<li><a href="">Tags</a></li>

</ul>

</li>

<li><a href="">Contact</a></li>

</ul>

</nav>

HTML

Чтобы сделать меню адаптивным, используем медиа-запросы. В данном примере возьмем переломную точку 600 пикселей, то есть, если разрешение экрана больше 600 пикселей, меню будет горизонтальным, если меньше — то вертикальным.

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

background: url(https://html5book.ru/wp-content/uploads/2021/04/background_54.png)

}

ul {

list-style: none;

}

.topmenu {

background: white;

}

.topmenu a {

text-decoration: none;

display: block;

transition: .4s ease-in-out;

}

.topmenu>li>a {

padding: 20px;

color: #767676;

text-transform: uppercase;

font-weight: bold;

letter-spacing: 1px;

font-family: 'Exo 2', sans-serif;

}

.topmenu li a:hover {

color: #c0a97a;

}

.submenu li a {

border-bottom: 1px solid #efefef;

font-size: 12px;

color: #484848;

font-family: 'Kurale', serif;

}

@media(max-width: 599px) {

.topmenu>li>a {

padding: 15px 20px;

}

.submenu li a {

padding: 10px 20px;

margin: 0 20px;

}

}

@media(min-width: 600px) {

.topmenu {

width: 100%;

display: flex;

justify-content: center;

}

.topmenu>li {

position: relative;

}

.topmenu>li:after {

content: "";

position: absolute;

right: 0;

width: 1px;

height: 12px;

background: #d2d2d2;

top: 24px;

box-shadow: 4px -2px 0 #d2d2d2;

transform: rotate(30deg);

}

.topmenu>li:last-child:after {

background: none;

box-shadow: none;

}

.submenu {

position: absolute;

left: 50%;

top: 100%;

width: 210px;

margin-left: -105px;

background: #fafafa;

border: 1px solid #ededed;

z-index: 5;

visibility: hidden;

opacity: 0;

transform: scale(.8);

transition: .4s ease-in-out;

}

.topmenu>li:hover .submenu {

visibility: visible;

opacity: 1;

transform: scale(1);

}

.submenu li a {

text-align: center;

padding: 10px 0;

margin: 0 10px;

}

}

CSS

5. Подъезжающее выпадающее меню

Горизонтальное меню с мини-анимацией: при наведении на ссылки верхнего меню появляется маленький кружок, который также сопровождает появление выпадающего меню.

<nav>

<ul class="topmenu">

<li><a href="">Home</a></li>

<li><a href="">Shop</a></li>

<li><a href="" class="down">Blog</a>

<ul class="submenu">

<li><a href="">Category</a></li>

<li><a href="">Author</a></li>

<li><a href="">Archive</a></li>

<li><a href="">Tags</a></li>

</ul>

</li>

<li><a href="" class="down">Portfolio</a>

<ul class="submenu">

<li><a href="">Category</a></li>

<li><a href="">Author</a></li>

<li><a href="">Archive</a></li>

<li><a href="">Tags</a></li>

</ul>

</li>

<li><a href="">Contact</a></li>

</ul>

</nav>

HTML

@import url('https://fonts.googleapis.com/css?family=Kaushan+Script|Libre+Baskerville');

body {

margin: 0;

background-image: url(https://html5book.ru/wp-content/uploads/2017/03/dulcineia-dias-195000.jpg);

background-position: center center;

background-repeat: no-repeat;

background-size: cover;

height: 100vh;

position: relative;

}

body:before {

content: "";

position: absolute;

left: 0;

bottom: 0;

height: 100%;

width: 100%;

background: linear-gradient(45deg, rgba(0,0,0,0), rgba(255,255,255,.8));

}

nav {

text-align: center;

padding: 40px 0 0;

}

nav ul {

list-style: none;

margin: 0;

padding: 0;

}

nav a {

text-decoration: none;

display: block;

color: #222;

}

.topmenu > li {

display: inline-block;

position: relative;

}

.topmenu > li > a {

position: relative;

padding: 10px 15px;

font-family: 'Kaushan Script', cursive;

font-size: 1.5em;

letter-spacing: 3px;

}

.topmenu > li > a:before {

content: "";

position: absolute;

z-index: 5;

left: 50%;

top: 100%;

width: 10px;

height: 10px;

background: white;

border-radius: 50%;

transform: translate(-50%, 20px);

opacity: 0;

transition: .3s;

}

.topmenu li:hover a:before {

transform: translate(-50%, 0);

opacity: 1;

}

.submenu {

position: absolute;

z-index: 4;

left: 50%;

top: 100%;

width: 150px;

padding: 15px 0 15px;

margin-top: 5px;

background: white;

border-radius: 5px;

box-shadow: 0 0 30px rgba(0,0,0,.2);

box-sizing: border-box;

visibility: hidden;

opacity: 0;

transform: translate(-50%, 20px);

transition: .3s;

}

.topmenu > li:hover .submenu {

visibility: visible;

opacity: 1;

transform: translate(-50%, 0);

}

.submenu a {

font-family: 'Libre Baskerville', serif;

font-size: 11px;

letter-spacing: 1px;

padding: 5px 10px;

transition: .3s linear;

}

.submenu a:hover {background: #e8e8e8;}

CSS

3 D flip card

Вертикальное меню для сайта

Поделиться:

54

• H TML
• 1 .1. Основы HTML
• 1 .2. HTML-элементы
• 1 .3. HTML-атрибуты
• 1 .4. HTML-текст
• 1 .5. HTML-ссылки
• 1 .6. HTML-изображения
• 1 .7. HTML-таблицы
• 1 .8. HTML-списки
• 1 .9. Спецсимволы HTML
• 1 .10. HTML-генераторы
• H TML5
• 1 .11. Семантические элементы HTML5
• 1 .11.1. Элемент документа
• 1 .11.2. Метаданные документа
• 1 .11.3. Разделы документа
• 1 .11.4. Группировка содержимого
• 1 .11.5. Семантика уровня текста
• 1 .11.6. Правки документа
• 1 .11.7. Встраиваемое содержимое
• 1 .11.8. Ссылки
• 1 .11.9. Табличные данные
• 1 .11.10 Формы
• 1 .11.11. Интерактивные элементы
• 1 .11.12. Скрипты
• 1 .12. HTML5-аудио
• 1 .13. HTML5-видео
• 1 .14. Необязательные теги HTML5-разметки
• 1 .15. HTML5-формы
• 1 .16. Контентная модель HTML5
• C SS
• 2 .1. Основы CSS
• 2 .2. CSS блочная модель
• 2 .3. Блочные и строчные элементы
• 2 .4. CSS-позиционирование
• 2 .5. CSS-текст
• 2 .6. CSS-шрифты
• 2 .7. CSS-ссылки
• 2 .8. CSS-таблицы
• 2 .9. CSS-списки
• 2 .10. CSS-фон
• 2 .11. CSS-рамка
• 2 .12. CSS content
• 2 .13. CSS-цвета
• 2 .14. CSS-генераторы
• C SS3
• 2 .15. CSS3 UI
• 2 .16. CSS-градиент
• 2 .17. CSS3-рамка
• 2 .18. CSS3-оформление текста
• 2 .19. CSS-тень блока
• 2 .20. CSS-переходы
• 2 .21. CSS-трансформации
• 2 .22. CSS-анимация
• 2 .23. CSS flexbox
• 2 .24. CSS колонки
• 2 .25. CSS 3D-трансформации
• 2 .26. CSS-медиазапросы
• 2 .27. CSS-фильтры
• 2 .28. CSS Grid
• 2 .29. CSS3-шрифты
• 2 .30. CSS3-переполнение
• 2 .31. CSS3-способы письма
• 2 .32. Объединение и смешивание слоев
• 2 .33. CSS-фрагментация
• J avaScript
• 3 .1. Основы JavaScript
• 3 .2. Выражения в JavaScript
• 3 .3. Циклы JavaScript
• 3 .4. DOM — объектная модель документа
• j Query
• 3 .10. Введение в jQuery
• 3 .11. Методы jQuery
• 3 .11.1. Манипуляции HTML-элементами
• 3 .11.2. Чтение и изменение CSS-свойств, классов и атрибутов
• 3 .11.3. Обход DOM и выборка HTML-элементов
• 3 .11.4. jQuery анимация
• 3 .11.5. Методы объекта window
• 3 .12. События jQuery
• 3 .13. Селекторы jQuery
• В еб-типографика

• 4 .1. Пять принципов выбора и использования шрифтов
• 4 .2. Выбираем шрифт для сайта
• 4 .3. Правила веб-типографики

Свежие записи

• Красивое оформление содержания статьи на сайте
• Таблица цен с переключателем
• Красивые кнопки для сайта. Часть 4
• Идеи дизайна шаблона записи в блоге
• Красивое оформление блоков на сайте
• Красивые кнопки для сайта. Часть 3
• Адаптивная вёрстка, урок третий. Сетка из блоков
• Красивое оформление изображений на сайте
• Красивые кнопки для сайта. Часть 2
• Нестандартные блоки на сайте