Как сделать выпадающее меню html: Простое выпадающее меню — htmllab

03.04.2021 alexxlab

Содержание

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

На этом уроке мы создадим выпадающее меню на чистом CSS3, которое вы можете найти в Impressionist UI от Владимира Кудинова.

Шаг 1 — HTML-разметка

Мы создадим неупорядоченный список с ссылкой для каждого пункта меню. Для создания подменю, добавим еще один неупорядоченный список внутрь ранее созданного списка.

<ul>

<li><a href=»#»>My dashboard</a></li>
<li><a href=»#»>Likes</a></li>
<li><a href=»#»>Views</a>

<ul>
<li><a href=»#»>Documents</a></li>
<li><a href=»#»>Messages</a></li>
<li><a href=»#»>Sign Out</a></li>
</ul>

</li>
<li><a href=»#»>Uploads</a></li>
<li><a href=»#»>Videos</a></li>
<li><a href=»#»>Documents</a></li>

</ul>

Шаг 2 — Макет меню

Мы начнем с удаления полей, отступов, границ и контуров всех элементов меню. Затем мы установим фиксированную ширину и высоту для меню, закругленные углы и CSS3-градиенты. Для выравнивания ссылок горизонтально, мы установим для списка float:left. Нам также необходимо установить относительное позиционирование (position: relative), это нам нужно для выравнивания подменю.

.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}

.menu {
height: 40px;
width: 505px;

background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}

Мы временно скроем подменю, чтобы оно нам не мешало при написании стилей для первого уровня меню.

.menu ul { display: none; }

Шаг 3 — Ссылки меню

Для стилей ссылок меню мы добавим некоторые базовые свойства CSS, такие как шрифты, цвета, отступы и т.д. Затем мы добавим темную тень для текста и цветовые переходы для создания плавного эффекта, когда цвет будет меняться при наведении курсора. Для создания разделителя ссылок добавим border слева и справа, а затем удалим левый border для первой ссылки и правый border для последней ссылки. При наведении курсора мыши мы только изменим цвет текста.

.menu li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;

border-left: 1px solid #393942;
border-right: 1px solid #4f5058;

font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;

color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);

-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a { color: #8fde62; }

Шаг 4 — Подменю

Прежде всего, давайте удалим эту строку кода, которую мы добавили на втором шаге.

.menu ul { display: none; }

Теперь мы зададим стили для подменю. Подменю мы разместим в 40px от верхней границы и 0px от левой границы пункта меню и добавим закругленные углы снизу. Установим прозрачность равную 0, а при наведении мыши будем изменять её до 1.

.menu ul {
position: absolute;
top: 40px;
left: 0;

opacity: 0;
background: #1f2024;

-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;

-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
height: 0;
overflow: hidden;
padding: 0;

-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;

-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}

.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}

Установим ширину ссылок подменю равную 100px. В качестве разделителя добавим нижнюю границу для ссылок, а для последней ссылки удалим её.

.menu ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;

border: none;
border-bottom: 1px solid #353539;
}

.menu ul li:last-child a { border: none; }

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

.menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

Демонстрация

Перевод статьи с designmodo.com

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

сделать выпадающее меню на CSS и HTML.

Задача

Создать выпадающее меню инструментами CSS и HTML.

Решение

Для начала давайте создадим список, разместим его горизонтально и оформим его внешний вид. Это будет основное меню, а потом сделаем для его пунктов выпадающее меню.

<!DOCTYPE html>
<html>
<head>
	<title>Выпадающее меню</title>
<style>
        ul.menu{
            padding: 3px;       /* убираем отступы */
            margin-top: 50px;   /* для красоты отодвигаю вниз */
            text-align: center; /* выравниваю элементы спаска по центру */
        }
        ul.menu > li{
            list-style: none;	    /* убираем маркеры списка */
            display: inline-block;	/* разещаем списки горизонтально */
            background-color: #D87171;
            padding: 5px 15px;
        }
        /* устанавливаем стиль ссылок в меню */
        ul.menu > li > a{
            color: #FFFFFF;
            text-decoration: none;
        }
        /* устанавливаем стиль ссылок при наведении курсора */
        ul.menu > li > a:hover{
            text-decoration: underline;
        }
</style>
</head>
<body>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Услуги</a></li>
</ul>

</body>
</html>

У нас получился список такого вида:

Рисунок 1. Подготовительные работы.

Обратите внимание: стиль ссылки меняется при наведении на неё курсора. Это реализовывается с помощью псевдокласса :hover. Этот псевдокласс задаёт стиль элемента при наведении на него курсора, при этом кнопка мыши не нажата. Если есть нажатие кнопки — это уже другой псевдокласс.

Теперь перейдём к решению нашей задачи. Сделаем выпадающее меню для пункта «Услуги», добавим выпадающие разделы: «Купить», «Продать», «Обменять». Эти пункты — это отдельный список, который вложен в тег <li>

Создадим этот список и добавим стили, описывающие его внешний вид.

<!DOCTYPE html>
<html>
<head>
	<title>Выпадающее меню</title>
<style>
    ul.menu{
        padding: 3px;       /* убираем отступы */
        margin-top: 50px;   /* для красоты отодвигаю вниз */
        text-align: center; /* выравниваю элементы спаска по центру */
    }
    ul.menu > li{
        list-style: none;	    /* убираем маркеры списка */
        display: inline-block;	/* разещаем списки горизонтально */
        background-color: #D87171;
        padding: 5px 15px;
    }
    /* устанавливаем стиль ссылок в меню */
        ul.menu > li > a{
        color: #FFFFFF;
        text-decoration: none;
    }
    /* устанавливаем стиль ссылок при наведении курсора */
    ul.menu > li > a:hover{
        text-decoration: underline;
    }
    /* устанавливаем стиль для внутреннего меню */
    .menuInner{
        list-style: none;
        padding: 4px;
        border: 1px solid #000000;
        border-radius: 5px;
        background-color: #FFFFFF;
        text-align: left;
    }
</style>
</head>
<body>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li>Купить</li>
			<li>Продать</li>
			<li>Обменять</li>
		</ul>
	</li>
</ul>

</body>
</html>

Теперь у нас получился такой список:

Рисунок 2. Подготовительные работы.

Безусловно, это не то, что нам нужно. По умолчанию этот список должен быть скрыт и становиться видимым только при наведении мыши. Скрыть элемент можно при помощи правила правила {display: none}. А при наведении курсора его нужно активировать сделав снова видимым правила {display: inline-block}.

<!DOCTYPE html>
<html>
<head>
	<title>Выпадающее меню</title>
<style>
    ul.menu{
        padding: 3px;
        margin-top: 50px;
        text-align: center;
    }
    ul.menu > li{
        list-style: none;
        display: inline-block;
        background-color: #D87171;
        padding: 5px 15px;
    }
    /* устанавливаем стиль ссылок в меню */
        ul.menu > li > a{
        color: #FFFFFF;
        text-decoration: none;
    }
    /* устанавливаем стиль ссылок при наведении курсора */
    ul.menu > li > a:hover{
        text-decoration: underline;
    }
    /* устанавливаем стиль для внутреннего меню */
    .menuInner{
        display: none; /* делаем невидимым */
        list-style: none;
        padding: 4px;
        border: 1px solid #000000;
        border-radius: 5px;
        background-color: #FFFFFF;
        text-align: left;
    }
    /* делаем видимым при наведении курсора на блок li */
    .menu > li:hover > .menuInner{
        display: block;
    }
</style>
</head>
<body>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li>Купить</li>
			<li>Продать</li>
			<li>Обменять</li>
		</ul>
	</li>
</ul>

</body>
</html>

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

Чтобы элемент отображался не влияя на отображение других элементов, его нужно спозиционировать со значением absolute.

<!DOCTYPE html>
<html>
<head>
	<title>Выпадающее меню</title>
<style>
    ul.menu{
        padding: 3px;
        margin-top: 50px;
        text-align: center;
    }
    ul.menu > li{
        position: relative;         /* добавляем позиционирование */
        list-style: none;
        display: inline-block;
        background-color: #D87171;
        padding: 5px 15px;
        height: 20px;               /* добавляем высоту */
    }
    /* устанавливаем стиль ссылок в меню */
        ul.menu > li > a{
        color: #FFFFFF;
        text-decoration: none;
    }
    /* устанавливаем стиль ссылок при наведении курсора */
    ul.menu > li > a:hover{
        text-decoration: underline;
    }
    /* устанавливаем стиль для внутреннего меню */
    .menuInner{
        display: none; /* делаем невидимым */
        list-style: none;
        padding: 4px;
        border: 1px solid #000000;
        border-radius: 5px;
        background-color: #FFFFFF;
        text-align: left;
    }
    .menu > li:hover > .menuInner{
        display: block;
        position: absolute;
        top: 30px;
        left: 0;
    }
</style>
</head>
<body>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li>Купить</li>
			<li>Продать</li>
			<li>Обменять</li>
		</ul>
	</li>
</ul>

</body>
</html>

Что мы тут сделали:

Добавили в родительский элемент <li> правило позиционирования {position: relative;}. Это сделано для того, чтобы отчёт координат абсолютного позиционирования вложенного списка начался с верхнего левого угла этого блока, а не угла экрана.
Добавили в родительский элемент <li> правило {height: 20px;}. Задали ему высоту, чтобы удобней было позиционировать выпадающий список.
Установили абсолютное позиционирование {position: absolute;} выпадающему списку и установили координаты: top и left.

Теперь выпадающее меню работает корректно.

Рисунок 3. Окончательный вариант.

Конечно, тут можно сделать более красивый внешний вид выпадающего меню, но в рамках нашей задачи и этого достаточно.

Учебная задача решена. Пока.

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

Вы здесь: Главная — CSS — CSS Основы — Горизонтальное выпадающее меню на CSS

Я уже когда-то писал о том, как сделать вертикальное выпадающее меню на CSS. В этой же статье я расскажу о том, как сделать горизонтальное выпадающее меню на CSS.

Привожу HTML-код:

<ul>

  <li>

    <a href="#">Главная</a>

  </li>

  <li>

    <a href="#">Меню 1</a>

    <ul>

      <li>

        <a href="#">Подменю 1</a>

      </li>

      <li>

        <a href="#">Подменю 2</a>

      </li>

      <li>

        <a href="#">Подменю 3</a>

      </li>

    </ul>

  </li>

  <li>

    <a href="#">Меню 2</a>

    <ul>

      <li>

        <a href="#">Подменю4</a>

      </li>

      <li>

        <a href="#">Подменю 5</a>

      </li>

      <li>

        <a href="#">Подменю 6</a>

      </li>

      <li>

        <a href="#">Подменю7</a>

      </li>

      <li>

        <a href="#">Подменю 8</a>

      </li>

    </ul>

  </li>

</ul>

И CSS-код:

ul.menu {

  display: inline-block;

  margin: 0;

  padding: 0;

}

ul.menu li {

  float: left;

  list-style: none;

}

ul.menu li a {

  display: block;

  padding: 8px 20px 10px;

  text-decoration: none;

}

ul.menu li ul {

  display: none;

  padding-left: 10px;

}

ul.menu li:hover ul {

  display: block;

  position: absolute;

}

ul.menu li:hover ul li {

  float: none;

}

ul.menu li:hover ul li a {

  padding: 6px 0 8px;

}

Безусловно, здесь дан чуть ли не минимум свойств. Чтобы это всё украсить, нужно менять стили. Что касается HTML-кода, то он идентичен и для горизонтального, и для вертикального меню.

Теперь у Вас не должно быть проблем с созданием горизонтального выпадающего меню на CSS.

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

Создано 06.03.2013 04:25:07
Михаил Русаков

Предыдущая статья Следующая статья

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

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

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

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

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

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

Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Плавно открывающееся меню с помощью CSS

Осуществим нашу задумку с помощью самого обычного CSS. В следующей статье, если не забуду, то опишу этот же эффект с помощью jQuery. Но а пока, давайте приступим к разбору данного метода. Но, сначала предложу посмотреть, что получится в итоге:

Первым делом, давайте напишем HTML код нашего меню. Меню будет простейшим. Для примера у него будет 2 пункта у каждого из которых будет выпадающий список с подпунктами.


<nav>
	<ul>
		<li>
		<a href="#">пункт 1</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>
		<li>
		<a href="#">пункт 2</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>

	</ul>
</nav>

Думаю тут все понятно, самое простое 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 пикселей.

Далее уже задаем стили для выпадающего меню, так что на них подробно останавливаться не буду. Ту как бы и все. Это и есть весь способ. Он простой и действенный и справляется со своей задачей на все 100%.

Данный способ можно применять не только к самописным меню но и к тем же динамическим меню, которые создаются системами управления сайтом, например WordPress. Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂 Я дал идею и способ, а Вам решать, применять его или нет.

На этом все, спасибо за внимание. 🙂

CSS: Выпадающее меню с задержкой

Обычное выпадающие css-меню сделанное с помощью переключения display:none;/display:block; повешенного на hover обладает двумя раздражающими недостатками:

— подменю показывается мгновенно, как только курсор мыши попал в область родительского пункта
— подменю мгновенно пропадает, как только курсор вышел за пределы подменю

Пример такого меню:

<ul>
    <li>
        <a href="#">item</a>
        <ul>
            <li>subitem 1</li>
            <li>subitem 2</li>
        </ul>
   </li>
</ul>
 
<style>
.menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu .menu-item {
    float: left;
    margin: 0 1px 0 0;
    padding: 0;
    background: #E1E1E1;
}
.menu .menu-item a {
    display: block;
    padding: 5px 10px;
}
.menu .submenu {
    display: none; /* По умолчанию скрываем подменю */
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #E1E1E1;
}
.menu .menu-item:hover .submenu {
    display: block; /* Показываем подменю при ховере */
}
.menu .submenu-item {
    margin: 0;
    padding: 5px 10px;
}
</style>

Демо

Чтобы создать небольшую задержку перед показом и скрытием подменю раньше приходилось использовать javascript, но теперь наткнулся на css вариант.

Весь фокус в свойстве transition, а точнее его подсвойстве transition-delay, которое позволяет добавить задержку перед показом анимации:

.menu .submenu {
    opacity: 0; /* По умолчанию скрываем подменю */
    visibility: hidden;
    transition-property: opacity, visibility; /* Важно чтобы transition применялось к обоим свойствам */
    transition-duration: 0.2s; /* Добавляем анимацию 0.3 сек. */
    transition-delay: 0.15s; /* Добавляем задержку в 0.15 сек. */
}
.menu .menu-item:hover .submenu {
    opacity: 1; /* Показываем подменю при ховере */
    visibility: visible;
}

Демо

Поскольку анимацию нельзя вешать на display, то для скрытия подменю приходится использовать связку opacity:0; visibility:hidden;.

Выпадающие элементы. Компоненты · Bootstrap. Версия v4.0.0

Переключайте контекстные оверлеи для отображения списков ссылок и многого другого с помощью модуля выпадающих меню Bootstrap.

Обзор

Выпадающие элементы — это переключаемые, контекстные элементы поверхностного наложения для отображения списков ссылок и т.п. Они интерактивны благодаря плагину JavaScript в BS4. Функциональность toggle в выпадающих элементах запускается по клику, а не по наведению – это сделано умышленно.

Выпадающие элементы «построены» на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и определение размера окна просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper.js.

Если вы компилируете наши JS файлы, необходим util.js.

Доступность

Стандарт WAI ARIA описывает и определяет виджет role="menu" как настоящий виджет, но лишь для меню «а-ля приложение», запускающих действия или функции. Меню ARIA могут содержать лишь пункты меню, чекбоксы, «радио-кнопки», группы «радио-кнопок» и подменю.

Выпадающие элементы Bootstrap, с другой стороны, спроектированы для решения множества задач и могут работать в разных структурах разметки. Например, можно создать выпадающие элементы, содержащие дополнительные поля ввода и элементы контроля форм, такие как поиск или поле ввода логина. По этой причине BS4 не «ожидает» (и не добавляет автоматически) ни один из атрибутов (role и aria-), необходимых для меню согласно стандарту ARIA.

Однако Bootstrap всегда добавляет встроенную поддержку для большинства стандартных взаимодействий меню и клавиатуры, таких как возможность двигаться через отдельные элементы класса .dropdown-item кнопками курсора на клавиатуре и закрывать меню кнопкой ESC.

Примеры

Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом .dropdown или другим элементом с position: relative;. При необходимости выпадающие элементы можно запускать из элементов <a> или <button>.

Выпадающие элементы одинарных кнопок

Любую одинарную кнопку .btn можно превратить в «контролирующий» элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами <button>:

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Кнопка выпадающего списка
  </button>
  <div aria-labelledby="dropdownMenuButton">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

А вот так — с <a> элементами:

<div>
  <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Выпадающая ссылка
  </a>

  <div aria-labelledby="dropdownMenuLink">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

Самое забавное, что это можно сделать с любым из вариантов кнопок: «главная, вторичная, успех, инфо, предупреждение, опасность»:

Предупреждение

<!-- Example single danger button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Выпадающие элементы кнопок с разделенными зонами

По такому же принципу создавайте выпадающие элементы в кнопках с разделенными зонами, используя почти такую же разметку, как в пункте выше, но с добавлением класса .dropdown-toggle-split для правильного спейсинга вокруг выпадающего элемента.

Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг padding с обеих сторон выпадающей «каретки» и удаляет margin-left, добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.

Главная Toggle Dropdown Вторичная Toggle Dropdown Успех Toggle Dropdown Предупреждение Toggle Dropdown Опасность Toggle Dropdown

<!-- Example split danger button -->
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Размеры

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

<!-- Large button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Large button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Small button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>

«Выпадающий вверх»

Добавьте класс .dropup и выпадающий элемент будет «выпадать» вверх.

Split dropup Toggle Dropdown

<!-- Default dropup button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div>
  <button type="button">
    Split dropup
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

«Выпадающий вправо»

Добавьте класс .dropright и выпадающий элемент будет «выпадать» вправо.

Split dropright Toggle Dropdright

<!-- Default dropright button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div>
  <button type="button">
    Split dropright
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropright</span>
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

«Выпадающий влево»

Добавьте класс .dropleft и выпадающий элемент будет «выпадать» влево.

<!-- Default dropleft button -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div>
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div>
  <div role="group">
    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span>Toggle Dropleft</span>
    </button>
    <div>
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button">
    Split dropleft
  </button>
</div>

Исторически содержимым выпадающих элементов всегда были ссылки, но BS4 изменил это. Сейчас вы можете использовать в качестве содержимого выпадающих элементов <button>, а не только <a>.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div aria-labelledby="dropdownMenu2">
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

По умолчанию выпадающее меню автоматически расположено в 100% от вершины и на левой стороне родителя. Добавьте класс .dropdown-menu-right к элементу класса .dropdown-menu для выравнивания выпадающего меню по правой стороне.

Внимание! Выпадающие элементы позиционируются благодаря Popper.js (за исключением случаев, когда они содержатся в navbar).

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Добавьте заголовок, чтобы обозначить секции действий любого выпадающего меню.

<div>
  <h6>Dropdown header</h6>
  <a href="#">Action</a>
  <a href="#">Another action</a>
</div>

Разделяйте группы родственных элементов меню разделителем.

<div>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
  <div></div>
  <a href="#">Separated link</a>
</div>

Расположите форму внутри выпадающего меню, и используйте утилиты паддинга или марджина для ее уплотнения.

<div>
  <form>
    <div>
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" placeholder="[email protected]">
    </div>
    <div>
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" placeholder="Password">
    </div>
    <div>
      <input type="checkbox">
      <label for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit">Sign in</button>
  </form>
  <div></div>
  <a href="#">New around here? Sign up</a>
  <a href="#">Forgot password?</a>
</div>

<form>
  <div>
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" placeholder="[email protected]">
  </div>
  <div>
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" placeholder="Password">
  </div>
  <div>
    <input type="checkbox">
    <label for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit">Sign in</button>
</form>

Добавьте класс .active к элементу выпадающего меню для его стилизации как «активированного».

<div>
  <a href="#">Regular link</a>
  <a href="#">Active link</a>
  <a href="#">Another link</a>
</div>

Добавьте класс .disabled к элементу выпадающего меню для его стилизации как «деактивированного».

<div>
  <a href="#">Regular link</a>
  <a href="#">Disabled link</a>
  <a href="#">Another link</a>
</div>

Использование

Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса .show элемента родительского списка. Атрибут data-toggle="dropdown" отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.

На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики ($.noop) mouseover к непосредственным «детям» элемента <body>. Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.

Через атрибуты

Добавьте к ссылке или кнопке атрибут data-toggle="dropdown" для скрытия\показа выпадающего элемента.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div aria-labelledby="dLabel">
    ...
  </div>
</div>

Через JS

Управляйте выпадающими элементами с помощью JavaScript:

$('.dropdown-toggle').dropdown()

data-toggle="dropdown" still required

Независимо от того, управляете вы выпадающим элементом через JavaScript или атрибутами, атрибут data-toggle="dropdown" всегда необходим в элементе, запускающем выпадающий элемент.

Параметры

Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к data- как в data-offset="".

Название	Тип	По умолч.	Описание
offset	number \| string \| function	0	Смещение выпадающего элемента относительно его триггера. См. отступы Popper.js
flip	boolean	true	Позволяет выпадающему элементу «перевернуться», если произошло перекрытие другого элемента. Больше информации: flip docs.
boundary	string \| element	‘scrollParent’	Граница ограничения переполнения выпадающего меню. Принимает значения `'viewport'`, `'window'`, `'scrollParent'` или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации preventOverflow от Popper.js.

Обратите внимание, что если для boundary установлено значение, отличное от 'scrollParent', позиция position: static применяется к контейнеру .dropdown.

Методы

Метод	Описание
`$().dropdown('toggle')`	Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом.
`$().dropdown('update')`	Обновляет позицию «выпадения» элемента.
`$().dropdown('dispose')`	Уничтожает выпадающий элемент.

События

Все события выпадающих элементов наступают в родительском элементе класса .dropdown-menu и несут свойство relatedTarget, значение которого равно элементу «якоря» (ссылка, т.е. <a>), запускающего функциональность toggle.

Событие	Описание
`show.bs.dropdown`	Это событие наступает немедленно по вызову экземпляра метода show.
`shown.bs.dropdown`	Это событие наступает, когда выпадающий элемент стал видимым юзеру (будет ждать завершения CSS-переходов).
`hide.bs.dropdown`	Это событие наступает немедленно по вызову экземпляра метода hide.
`hidden.bs.dropdown`	Это событие наступает, когда выпадающий элемент стал невидимым юзеру (будет ждать завершения CSS-переходов).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Как сделать выпадающее меню на чистом CSS с нуля

Сейчас, уже довольно распространенная практика использовать выпадающее меню на сайтах. Чтобы реализовать такую задачу, можно использовать несколько способов, но я расскажу про самый простой, это меню без использования JavaScript / Jquery

Расписывать тут все прям до тонкостей не буду, но расскажу про основное.

HTML

Для начала сделаем HTML- структуру нашего выпадающего меню

<ul> <li><a href=#>Menu 1</a> <ul> <li><a href=#>SubMenu 1</a></li> <li><a href=#>SubMenu 1</a></li> <li><a href=#>SubMenu 1</a></li> </ul> </li> <li><a href=#>Menu 2</a> <ul> <li><a href=#>SubMenu 2</a></li> <li><a href=#>SubMenu 2</a></li> <li><a href=#>SubMenu 2</a></li> </ul> </li> <li><a href=#>Menu 3</a> <ul> <li><a href=#>SubMenu 3</a></li> <li><a href=#>SubMenu 3</a></li> <li><a href=#>SubMenu 3</a></li> </ul> </li> <li><a href=#>Menu 4</a> <ul> <li><a href=#>SubMenu 4</a></li> <li><a href=#>SubMenu 4</a></li> <li><a href=#>SubMenu 4</a></li> </ul> </li> <li><a href=#>Menu 5</a> <ul> <li><a href=#>SubMenu 5</a></li> <li><a href=#>SubMenu 5</a></li> <li><a href=#>SubMenu 5</a></li> </ul> </li> </ul>

<ul>

<ul>

<li><a href=#>SubMenu 1</a></li>

</ul>

</li>

<ul>

<li><a href=#>SubMenu 2</a></li>

</ul>

</li>

<ul>

<li><a href=#>SubMenu 3</a></li>

</ul>

</li>

<ul>

<li><a href=#>SubMenu 4</a></li>

</ul>

</li>

<ul>

<li><a href=#>SubMenu 5</a></li>

</ul>

</li>

</ul>

Все что мы сделали, создали основной список, с классом menu и дальше, в каждую li мы положили новые списки, которые являются нашими подменю, так же это можно понять и по классу который мы им присвоили submenu

CSS

Добавим немного стилей для меню и сделаю все магию появления выпадающего меню

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 { text-decoration: underline; } ul.menu > li:hover > ul.submenu { display: block; }

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 {

text-decoration: underline;

}

ul.menu > li:hover > ul.submenu {

display: block;

}

Немного внесу пояснения, чтобы вам было понятнее как это работает. Все элементам с классом submenu мы присвоили значение display: none. И теперь нам необходимо сделать что бы при наведении на одну из li главного меню, появлялось подменю. Это мы сделали при помощи таких стилей:

ul.menu > li:hover > ul.submenu { display: block; }

ul.menu > li:hover > ul.submenu {

display: block;

}

Они и позволяют видеть подменю при наведении.

Так же прочитайте статью, Как сделать выпадающее меню на чистом CSS

Если у вас есть вопросы, пишите в комментарии, буду рад помочь.
Чтобы не пропустить выход новых статей, подписывайтесь на мой telegram-канал

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

Что такое выпадающие списки?

Выпадающие меню используются в CSS для скрытия предопределенного списка внутри кнопки.

Примеры:

  
  
  
     Один 
     Два 
     Три

Затем вы должны настроить классы в CSS следующим образом:

 .падать {
  положение: относительное;
  дисплей: встроенный блок;
}

.dropbtn {
  цвет фона: красный;
  отступ: 10 пикселей;
}

.dropdown-content {
  дисплей: нет;
  позиция: абсолютная;
}

.dropdown: hover .dropdown-content {
  дисплей: блок;
}

Вам нужны отдельные классы div для создания кнопки и еще один div для разделения списка того, что содержит кнопка.

Пример

  
  
        
  
            
  
                
                     Содержание 1 
                
                
                     Контент 2 
                
  
            
  
         
  
         
  
              и время 
            
  
                
                     Содержание 3 
                
                
                    Содержание 4 
                
                
                   Содержание 5

  # myNav1 {
    высота: 0;
    ширина: 50%;
    положение: фиксированное;
    z-индекс: 6;
    верх: 0;
    слева: 0;
    цвет фона: #ffff;
    переполнение: скрыто;
    переход: 0.3с;
    непрозрачность: 0,85;
}

# myNav2 {
    высота: 0;
    ширина: 50%;
    положение: фиксированное;
    z-индекс: 6;
    внизу: 0;
    справа: 0;
    цвет фона: #ffff;
    переполнение: скрыто;
    переход: 0,3 с;
    непрозрачность: 0,85;
}

.overlay-content {
    положение: относительное;
    ширина: 100%;
    выравнивание текста: центр;
    маржа сверху: 30 пикселей;
}

# myNav1-content {
    верх: 12%;
    осталось: 5%;
    дисплей: нет;
}

# myNav2-content {
    верх: 12%;
    справа: 10%;
    дисплей: нет;
}

Подробнее о раскрывающихся списках CSS:

Простое раскрывающееся меню с CSS

Выпадающее меню — довольно распространенная функция, особенно на веб-сайтах с большим количеством страниц.Это отличный способ организовать ваш веб-сайт и отфильтровать посетителей туда, куда вы бы хотели, чтобы они пошли. Существует множество способов реализовать этот тип меню с использованием множества приемов, функций Javascript и так далее. В рамках этого поста вы увидите, как создать это, используя только HTML и CSS. Этот вариант очень легкий и хорошо работает.

Раскрытие раскрывающегося меню

При создании навигации по сайту это может выглядеть примерно так:

 

   
        Элемент 1  
        Пункт 2  
        Пункт 3  
        Пункт 4

Это отличное начало.Чтобы этот метод работал, вам нужно будет вложить еще один элемент

. Если вы изменяете приведенный выше код, он может выглядеть примерно так:
```
 

   
        Элемент 1  
        Пункт 2 
         
              Подпункт 1  
              Подпункт 2  
         
      
        Пункт 3  
        Пункт 4  
   
  
```
Теперь о CSS
Это весь HTML, который вам нужен.Все просто, правда? Проблема в том, что в приведенном выше коде раскрывающееся меню будет отображаться и потенциально может испортить вашу навигацию верхнего уровня. К счастью для вас, некоторые быстрые дополнения к вашему CSS могут решить эту проблему.
С помощью CSS вы сможете скрыть раскрывающееся меню и сделать его видимым только тогда, когда посетитель наводит курсор на соответствующий элемент
.
```
 
nav li {
   дисплей: встроенный блок;
   тип-стиль-список: нет;
   положение: относительное;
}

nav li ul {
   дисплей: нет;
   позиция: абсолютная;
   ширина: 100 пикселей;
   слева: 0;
   верх: 100%;
   маржа: 0;
   отступ: 0;
}

nav li: hover> ul {
   дисплей: блок;
}

nav a {
   отступ: 5 пикселей 10 пикселей;
   цвет: #fff;
   выравнивание текста: центр;
   фон: # 000;
   высота: 20 пикселей;
   дисплей: блок;
}
  
```
И снова все! С помощью этого кода у вас есть горизонтальная навигация с функционирующими раскрывающимися меню.Здесь следует отметить несколько моментов: расположение раскрывающегося меню и принцип работы при наведении курсора. Для того, чтобы раскрывающееся меню стало видимым при наведении курсора без воздействия на другие элементы на странице, когда это происходит, для позиционирования установлено значение position: absolute .
Кроме того, обычно, когда вы добавляете : hover к элементу, это тот элемент, который получит указанное изменение. В данном случае вы не хотите, чтобы наведение курсора на элемент
запускало изменение вложенного
- запускайте внутри него

Как сделать выпадающее меню html: Простое выпадающее меню — htmllab

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

Шаг 1 — HTML-разметка

Шаг 2 — Макет меню

Шаг 3 — Ссылки меню

Шаг 4 — Подменю

Демонстрация

сделать выпадающее меню на CSS и HTML.

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

Плавно открывающееся меню с помощью CSS

CSS: Выпадающее меню с задержкой

Выпадающие элементы. Компоненты · Bootstrap. Версия v4.0.0

Обзор

Доступность

Примеры

Выпадающие элементы одинарных кнопок

Выпадающие элементы кнопок с разделенными зонами

Размеры

«Выпадающий вверх»

«Выпадающий вправо»

«Выпадающий влево»

Использование

Через атрибуты

Через JS

Параметры

Методы

События

Как сделать выпадающее меню на чистом CSS с нуля

HTML

CSS

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

Пример

Подробнее о раскрывающихся списках CSS:

Простое раскрывающееся меню с CSS

Раскрытие раскрывающегося меню

Теперь о CSS

Вот и все!

Как создать [для начинающих]

Как создать раскрывающееся меню WordPress с основными функциями

Шаг 2: Добавьте ссылки в меню

Более наглядный способ управления раскрывающимися меню

3 быстрых совета по использованию раскрывающихся меню

Заключительные мысли

Бесплатный гид

5 основных советов по ускорению работы вашего сайта на WordPress

Сократите время загрузки даже на 50-80%

Как создать раскрывающееся меню в WordPress (за 5 шагов)

Введение в навигацию и раскрывающиеся меню WordPress

Как создать раскрывающееся меню в WordPress (за 5 шагов)

Шаг 1. Создание пунктов меню

Шаг 2. Организуйте свое меню WordPress

Подпишитесь на информационный бюллетень

Мы увеличили наш трафик на 1187% с помощью WordPress.

Шаг 3. Добавьте изображения в меню WordPress

Шаг 4. Добавьте собственный CSS в раскрывающееся меню

Шаг 5: опубликуйте свое меню в лучших местах

WordPress для улучшения раскрывающихся меню

Устранение неполадок раскрывающегося меню WordPress

Сводка

, Ultimate HTML Dropdown Menu Builder

Как добавить раскрывающееся меню на HTML-страницу?

Создание раскрывающегося меню CSS

Шаг 1

Создание раскрывающихся меню для сенсорного экрана

Добавить комментарий Отменить ответ