Горизонтальное выпадающее меню
Горизонтальное выпадающее меню используется для упорядочения структуры навигации по сайту. Оптимальное количество уровней вложения — один-два. Чем меньше уровней вложений, тем легче посетителю сайта найти нужную информацию. Как создать обычное горизонтальное меню, подробно изложено в этом уроке.
Как сделать горизонтальное выпадающее меню
- Содержание:
- 1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения
- 2. 3D выпадающее меню
- 3. Разворачивающееся выпадающее меню с логотипом
- 4. Увеличивающееся выпадающее меню
- 5. Подъезжающее выпадающее меню
1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения
Для позиционирования вложенного меню относительно основного меню объявляются следующие стили:
— для элемента списка, в который вложен выпадающий список: li ;
— для выпадающего меню ul , а также значения left и top .
Для наглядности и удобства форматирования добавим основному меню класс topmenu , выпадающему — submenu .
Скрыть выпадающее меню можно несколькими способами:
1) display: none;
2) visibility: hidden;
3) opacity: 0;
4) transform: scaleY(0);
5) с помощью библиотеки jQuery.
See the Pen MaObbz by Elena Nazarova (@nazarelen) on CodePen.
Способ 1.
Выпадающее меню скрывается с помощью .submenu , при наведении показывается с помощью .topmenu li:hover .submenu .
Способ 2.
Меню скрывается с помощью .submenu , показывается — .topmenu li:hover .submenu .
Способ 3.
Меню скрывается с помощью .submenu , показывается — .topmenu li:hover .submenu . Чтобы меню не появлялось при наведении на область, где оно расположено, добавляем visibility: hidden; , а при наведении меняем на visibility: visible; .
Способ 4.
Меню скрывается с помощью .submenu , показывается — .topmenu li:hover .submenu . Поскольку трансформация элемента по умолчанию происходит из центра, нужно добавить для .submenu , т.е. из верхнего левого угла.
Способ 5. С помощью jQuery
$(".five li ul").hide(); // скрываем выпадающее меню $(".five li:has('.submenu')").hover( function() < $(".five li ul").stop().fadeToggle(300);>/* отбираем элемент списка, который содержит элемент с классом .submenu и добавляем ему функцию при наведении, которая показывает и скрывает выпадающее меню */ );2. 3D выпадающее меню
Интересные эффекты можно создавать с помощью CSS3-трансформаций, например, заставить меню появляться из глубины экрана.
See the Pen OyjVJZ by Elena Nazarova (@nazarelen) on CodePen.
* < 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; line-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
3. Разворачивающееся выпадающее меню с логотипом
В этом примере в верхнем разделе страницы расположены логотип и навигация по сайту. В качестве логотипа может быть картинка или текст. Выпадающее меню постепенно разворачивается из-под элемента верхнего списка с помощью функции CSS3-трансформации.
* < 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
4. Увеличивающееся выпадающее меню
Ещё один пример для выпадающего меню. Эффект увеличения при появлении меню реализуется за счет уменьшения первоначального размера .submenu , при наведении размер увеличивается до .topmenu > li:hover .submenu .
See the Pen aNbGKv by Elena Nazarova (@nazarelen) on CodePen.
Чтобы сделать меню адаптивным, используем медиа-запросы. В данном примере возьмем переломную точку 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; >>5. Подъезжающее выпадающее меню
Горизонтальное меню с мини-анимацией: при наведении на ссылки верхнего меню появляется маленький кружок, который также сопровождает появление выпадающего меню.
See the Pen MpqypG by Elena Nazarova (@nazarelen) on CodePen.
@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; line-height: 1; 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
Выезжающее меню на чистом CSS
Выезжающее меню при клике по кнопке без использования скриптов, то есть на чистом html + CSS. Статья будет полезна тем, кто хочет создать свой сайт и изучает верстку. Пример того как это работает можно посмотреть кликнув по ссылке ниже. Или как это было реализовано на одном из созданных мною сайтов в видео ниже.
Если это то что вам нужно и вы хотите сделать выезжающее меню с левой или правой стороны без использования скриптов у себя на сайте, то начнем.
>>> Посмотреть пример выезжающее меню
Вначале добавляем html разметку. Это обычное меню сделанное списком, но его особенность это checkbox. Обычный чекбокс с label, которые мы и превратим в кнопку, то есть бургер меню. Бургер меню — это обычно три полоски расположены друг под другом, напоминая бургер. Поэтому меню и носит такое название. Для посетителей сайтов и пользователей мобильных устройств данный вид кнопки привычный и люди интуитивно понимают что это кнопка меню. Как раз нажимая на наш чекбокс в виде бургера и будет происходить появление панели с пунктами меню.
На вашем сайте в то место где вы хотите разместить бургер кнопку выезжающего меню добавьте следующий html код:
Давайте разберемся что и как тут устроено и для чего каждый элемент
- Сначала идет главный блок-контейнер с классом burger-menu, внутри которого и располагается наше меню и кнопка бургер. Можете задавать любой класс или вообще изъять все меню и кнопку из контейнера. Он не обязателен. Он сделан для удобства. Возможно вам он будет мешать. Например, вы решите разместить меню в виде UL списка в одном месте, а кнопку-чекбокс бургер меню в другом.
- Далее идет чекбокс с ID — menu-toggle, которое менять нельзя (можно, если вы понимаете что делает и аналогично смените в стилях CSS все подвязки к этому айди). Чекбокс будет скрываться но он и будет кнопкой, его мы модифицируем.
- Далее идет label с классом —menu-btn, менять тоже не нужно, если для вас это не критично. Внутри label расположен span элемент, который в будущем будет полосками бургер меню. Сделаем это благодаря псевдоэлементам before и after.
- После идет наше основное меню в виде ul списка с классом — menubox. Наш чекбокс, будет использовать данный класс, чтобы открыть панель. Тут как вам удобно, располагаете пункты вашего меню со ссылками. Классы, порядок, структуру — делаете как вам нравится, у меня просто сделано для примера пять простых пунктов в виде ссылок.
Как вы поняли, суть способа в том, что у нас есть скрытое выезжающее меню за пределами страницы и обычный чекбокс, стилизованный под бургер меню. Когда мы нажимаем на чекбокс, мы задаем новые параметры для нашей скрытой панели/блока который появляется сбоку. В примере он выезжает слева, можете поменять и сделать справа.
Далее добавим CSS стили, потом вы сможете их поменять под дизайн вашего сайта. Открывайте свой файл стилей и добавьте в него следующий код:
.menu-btn < display: flex; align-items: center; position: absolute; top: 0; right:0; width: 26px; height: 26px; cursor: pointer; z-index: 1; >.menu-btn > span, .menu-btn > span::before, .menu-btn > span::after < display: block; position: absolute; width: 100%; height: 2px; background-color: #616161; transition-duration: .25s; >.menu-btn > span::before < content: ''; top: -8px; >.menu-btn > span::after < content: ''; top: 8px; >.menubox < display: block; position: fixed; visibility: hidden; top: 0; left: -100%; width: 300px; height: 100%; margin: 0; padding: 80px 0; list-style: none; background-color: #ECEFF1; box-shadow: 1px 0px 6px rgba(0, 0, 0, .2); transition-duration: .25s; >.menu-item < display: block; padding: 12px 24px; color: #333; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 600; text-decoration: none; transition-duration: .25s; >.menu-item:hover < background-color: #CFD8DC; >#menu-toggle < opacity: 0; >#menu-toggle:checked ~ .menu-btn > span < transform: rotate(45deg); >#menu-toggle:checked ~ .menu-btn > span::before < top: 0; transform: rotate(0); >#menu-toggle:checked ~ .menu-btn > span::after < top: 0; transform: rotate(90deg); >#menu-toggle:checked ~ .menubox
Задаем стили нашему label и span внутри него, чтобы он стал кнопкой в виде бургера.
.menu-btn < . >. > .menu-btn > span::before < . >.menu-btn > span::after
Далее задаем стили для ul списку.
.menubox
left: -100%; — в шестой строке это и есть расположение панели меню слева за пределами страницы. Если надо справа, смените на right: -100%;.
Далее стили для пунктов меню. Тут можете задавать что хотите, свои, эти стили не обязательны
.menu-item < . >.menu-item:hover
Скрываем стандартный чекбокс в виде галочки
#menu-toggle
Задаем правила, что делать с нашим бургер меню, и самим выезжающим меню, когда происходит активирование чекбокса, то есть когда вы жмете по нему и по label. Одну полоску мы поворачиваем, а две нижние поднимаем вверх и тоже поворачиваем и в результате из трех полосок получаем крестик. Так же делаем видимым наш скрытый блок с пунктами выезжающего меню.
#menu-toggle:checked ~ .menu-btn > span < . >#menu-toggle:checked ~ .menu-btn > span::before < . >#menu-toggle:checked ~ .menu-btn > span::after < . >#menu-toggle:checked ~ .menubox
В предпоследнем рядке, мы указываем, что панель появится слева в самом начале страницы — left: 0;. Если хотите справа, то просто смените на right: 0;.
Как выезжающее меню было реализовано на одном из созданных мною сайтов смотрите в этом коротком ролике.
Если вы все сделали правильно, то все должно работать так как в примере. Надеюсь, что статья вам полезна и вы установите выезжающее меню на своем сайте. Если у вас возникли вопросы или проблемы, можете обратиться ко мне или заказать услугу по доработке сайта.
Как сделать — Выпадающее меню
Выпадающее меню — это переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка:
Выпадающее
Создать выпадающее меню
Создайте выпадающее меню, которое появляется при наведении курсора мыши на элемент.
Шаг 1) Добавить HTML:
Пример
Ссылка 2
Ссылка 3
Объяснение примера
Используйте любой элемент, чтобы открыть выпадающее меню, например элемент , или
.
Используйте элемент контейнера (например, ), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки.
Оберните элемент вокруг кнопки и , чтобы правильно расположить выпадающее меню с помощью CSS.
Шаг 2) Добавить CSS:
Пример
/* Кнопка выпадающего списка */
.dropbtn background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
>
/* Контейнер — необходим для размещения выпадающего содержимого */
.dropdown position: relative;
display: inline-block;
>
/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>
/* Ссылки внутри выпадающего списка */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover
/* Показать выпадающее меню при наведении курсора */
.dropdown:hover .dropdown-content
/* Изменение цвета фона кнопки раскрывающегося списка при отображении содержимого раскрывающегося списка */
.dropdown:hover .dropbtn
Объяснение примера
Мы оформили кнопку выпадающего списка с цветом фона, отступами и т.д.
Класс .dropdown использует position:relative , что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью position:absolute ).
Класс .dropdown-content содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание установлено значение min-width 160px. Не стесняйтесь изменить это. Совет: Если вы хотите, чтобы ширина раскрывающегося содержимого была такой же широкой, как кнопка раскрывающегося списка, установите width на 100% (и overflow:auto чтобы включить прокрутку на небольших экранах).
Вместо того, чтобы использовать границу, мы использовали свойство box-shadow чтобы сделать выпадающее меню похожим на «карту». Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.
Селектор :hover используется для отображения выпадающего меню, когда пользователь перемещает курсор мыши на кнопку раскрывающегося списка.
Как Создать Выпадающее Меню CSS
Для сайта время его загрузки и удобство использования являются одними из самых важных аспектов. Поэтому, вы не должны загромождать ваш сайт дополнительными JavaScript и большими изображениями. Но что, если вы хотите красивое выпадающее CSS меню? Для этого не нужно использовать JavaScript, сегодня выпадающее меню можно сделать используя только CSS. В этом руководстве вы научитесь, как создать выпадающее меню CSS.
Нужен недорогой, но надёжный хостинг для вашего нового проекта? Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!
Что вам понадобится
Перед тем, как мы начнем это руководство, вам понадобится следующее:
- Доступ к контрольной панели вашего хостинга
Шаг 1 — Создание HTML-файла
Во-первых, вам нужно создать пустой HTML-файл. В этом руководстве мы создадим новый файл под названием menu.html. Для этого мы будем использовать Файловый менеджер. Однако тот же результат может быть достигнут с использованием FTP-клиента (создайте файл menu.html на вашем компьютере и загрузите его на ваш хостинг).
Шаг 2 — Добавление кода HTML меню
Наше меню будет сделано из одного родительского элемента под названием Главное меню и пяти подразделов. Изменяя адрес внутри атрибута href, вы можете связать каждый подраздел с разными страницами вашего сайта. Вы наверное заметили, что каждый элемент имеет разный класс — dropdown, mainmenubtn и dropdown-child. Классы необходимы для применения правил CSS.
Подраздел 1 Подраздел 2 Подраздел 3 Подраздел 4 Подраздел 5
Вот, как это выглядит без применения каких-либо CSS-правил:
Как вы видите обычное HTML меню не оптимизировано и выглядит не очень красиво. Однако мы применим CSS правила и изменим это в следующем шаге.
Шаг 3 — Как создать выпадающее меню CSS
Мы стилизуем наш HTML код используя следующие CSS правила:
.mainmenubtn < background-color: red; color: white; border: none; cursor: pointer; padding:20px; margin-top:20px; >.mainmenubtn:hover < background-color: red; >.dropdown < position: relative; display: inline-block; >.dropdown-child < display: none; background-color: black; min-width: 200px; >.dropdown-child a < color: white; padding: 20px; text-decoration: none; display: block; >.dropdown:hover .dropdown-child
Как вы видите, класс .dropdown-child имеет CSS правило display: none. Однако, как только пользователь проведет курсором (.dropdown:hover) по родительскому элементу, это правило изменит его отображение на display: block. Это и создаст эффект выпадающего меню.
Ниже представлен финальный результат нашего файла menu.html:
.mainmenubtn < background-color: red; color: white; border: none; cursor: pointer; padding:20px; margin-top:20px; > .dropdown < position: relative; display: inline-block; >.dropdown-child < display: none; background-color: black; min-width: 200px; > .dropdown-child a < color: white; padding: 20px; text-decoration: none; display: block; > .dropdown:hover .dropdown-childПодраздел 1 Подраздел 2 Подраздел 3 Подраздел 4 Подраздел 5
В этом примере мы используем внутренние таблицы стилей, что означает CSS стили находятся в самом файле HTML. Однако существует множество способов для подключения CSS стилей к HTML документу.
Как только вы закончите, финальный результат должен быть похож на это:
Не бойтесь экспериментировать c CSS стилем, изменяя цвета и размер. Адаптируйте меню под ваши нужды.
Заключение
Закончив данное руководство вы научились, как создать выпадающее меню CSS. Код приведенный в данном руководстве достаточно легок и не повлияет на время загрузки вашего сайта.