Как сделать выпадающее меню на js

Выпадающее меню выбора с использованием Javascript

Цель создания выпадающего меню — это оптимальное использование пространства на маленьких дисплеях. Иногда к такому приему организации меню, прибегают и для больших мониторов.

HTML разметка

Поместим в контейнер dropdown поле input и блок option с иконками и названиями пунктов меню. Подключим библиотеку ionicons, откуда копируем названия нужных иконок. Вставим иконки в разметку через тег ion-icon.

CSS стилизация поля input

Рисуем стрелочку с помощью псевдоэлемента before и свойства border. При наведении стрелочка будет поворачиваться вниз.

@import url(‘https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900’);
* margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif;
>
body display: flex;/*сетка flexbox*/
justify-content: center;/*горизонтальное выравнивание*/
min-height: 100vh;
background: #fafafa;
>
.dropdown position: relative;/*относительное позиционирование*/
margin-top: 100px;/*отступ сверху*/
width: 300px;
height: 50px;
>
.dropdown::before content: »;
position: absolute;
top: 15px;
right: 20px;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
z-index: 10;
transition: 0.5s;
>
.dropdown.active::before top: 22px;
transform: rotate(-225deg);/*поворот вниз*/
>
.dropdown input position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
border: none;
border-radius: 10px;
padding: 12px 20px;
font-size: 16px;
background: #fff;
text-transform: capitalize;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
outline: none;
>

CSS стилизация блока option

Пришло время сделать ключевое действие — спрятать пункты меню, прописав свойство display: none.

.dropdown .option position: absolute;
top: 70px;
width: 100%;
border-radius: 10px;
background: #fff;
box-shadow: 0 30px 30px rgba(0,0,0,0.05);
overflow: hidden;
display: none;/*прячем пункты меню*/
text-transform: capitalize;
>

JavaScript функция

Навешиваем на все пункты меню событие onclick. При клике на пункт меню будет срабатывать функция show.

Функция находит все пункты меню.

При клике в области контейнера dropdown, переключает класс option на active. Активный класс снова делает видимым выпадающее меню и тогда можно делать свой выбор.

.dropdown.active .option display: block;
>
.dropdown .option div:hover background: #62baea;/*окрашивает синим цветом*/
color: #fff;/*меняет цвет текста*/
>
.dropdown .option ion-icon position: relative;
top: 4px;
font-size: 1.2em;
>

Создано 14.02.2022 10:47:28

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Как сделать выпадающее меню на js

Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на другие языки.

Светлая тема Тёмная тема
Поделиться

• Учебник
• Браузер: документ, события, интерфейсы
• Введение в события
• Введение в браузерные события

Создать раскрывающееся меню

важность: 5

Создать меню, которое по нажатию открывается либо закрывается:

P.S. HTML/CSS исходного документа можно и нужно менять.

HTML/CSS

Для начала создадим разметку HTML/CSS нашего меню.

Меню – это отдельный графический компонент на странице, так что его лучше вынести в отдельный DOM-элемент.

Список пунктов меню может быть представлен в виде списка ul/li .

Для заголовка мы используем тег , потому что , как и любой блочный элемент, имеет скрытое свойство display:block , а значит, занимает ширину 100%.

Сладости (нажми меня)!

Таким образом, если мы зададим обработчик события onclick , то он будет срабатывать по клику на всей ширине поля.

…тег – строчный элемент, по умолчанию имеет свойство display: inline , который занимает ровно столько места, сколько занимает сам текст:

Сладости (нажми меня)!

Переключение меню

Переключение меню

Переключение меню должно менять стрелку и скрывать или показывать список элементов меню.

Все эти изменения прекрасно обрабатываются средствами CSS. Посредством JavaScript мы будем отмечать текущее состояние меню, добавляя или удаляя класс .open .

Без класса .open меню будет закрыто:

.menu ul < margin: 0; list-style: none; padding-left: 20px; display: none; >.menu .title::before

…А с ним (с классом .open ) стрелка будет меняться, и список будет показываться:

.menu.open .title::before < content: '▼ '; >.menu.open ul

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

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

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

• Содержание:
• 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

Выпадающее меню на HTML / CSS без использования JavaScript

Очень часто необходимо сделать на сайте выпадающее при наведении меню. Большинство используют для этого JavaScript / Jquery. Это конечно хорошо, но такого роди задачи легко решаются с помощью HTML / CSS .

Вот простой пример меню:

Для построения меню был использован список с классом menu. Подменю сделаны списками с классом submenu.

Теперь давайте минимально оформим наше меню стилями:

body < font: 14px 'Verdana'; margin: 0; padding: 0; >ul < display: block; margin: 0; padding: 0; list-style: none; >ul:after < display: block; content: ' '; clear: both; float: none; >ul.menu > li < float: left; position: relative; >ul.menu > li > a < display: block; padding: 10px; color: white; background-color: red; text-decoration: none; >ul.menu > li > a:hover < background-color: black; >ul.submenu < display: none; position: absolute; width: 120px; top: 37px; left: 0; background-color: white; border: 1px solid red; >ul.submenu > li < display: block; >ul.submenu > li > a < display: block; padding: 10px; color: white; background-color: red; text-decoration: none; >ul.submenu > li > a:hover

Для класса submenu было установлено свойство ‘display: none’. Это позволило на спрятать наше выпадающее меню.

Теперь добавим в CSS такой код:

 ul.menu > li:hover > ul.submenu

Это позволит показывать подменю при наведении.

Вот и все. Просто и легко без JavaScript.