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

Меню навигации с выпадающим списком на чистом CSS

Чтобы сделать меню навигации с выпадающим списком на чистом CSS, мы воспользуемся возможностями CSS3, а именно, псевдоклассом :checked.

Этот псевдосласс применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение “включено”. Переключение элементов в такое состояние происходит с помощью атрибута checked тега <input> или пользователем.

Разметка

<nav>
	<div>Website</div>
	<ul>
		<li>
			<input type="radio" name="nav-group">
			<label for="home">Home</label>
			<label for="nav-close"></label>
			<div>
				<div>
					<ul>
						<li><a href="#">More about us 1</a></li>
						<li><a href="#">More about us 2</a></li>
						<li><a href="#">More about us 3</a></li>
					</ul>
				</div>
			</div>
		</li>
		<li>
			<input type="radio" name="nav-group">
			<label for="css">CSS</label>
			<label for="nav-close"></label>
			<div>
				<div>
					<ul>
						<li><a href="#">More about us 1</a></li>
						<li><a href="#">More about us 2</a></li>
						<li><a href="#">More about us 3</a></li>
					</ul>
				</div>
			</div>
		</li>
		<li>
			<input type="radio" name="nav-group">
			<label for="dropdown">Dropdown</label>
			<label for="nav-close"></label>
			<div>
				<div>
					<ul>
						<li><a href="#">More about us 1</a></li>
						<li><a href="#">More about us 2</a></li>
						<li><a href="#">More about us 3</a></li>
					</ul>
				</div>
			</div>
		</li>
	</ul>
	
	<input type="radio" name="nav-group">
</nav>

Стили

. nav-main {
	width: 100%;
	background-color: #222;
	height: 70px;
	color: #fff;
}
.nav-main .logo {
	float: left;
	height: 40px;
	padding: 15px 30px;
	font-size: 1.4em;
	line-height: 40px;
}
.nav-main > ul {
	margin: 0;
	padding: 0;
	float: left;
	list-style-type: none;
}
.nav-main > ul > li {
	float: left;
}
.nav-option {
	display: none;
}
.nav-option:checked ~ .nav-content {
	max-height: 400px;
	-webkit-transition: max-height 0.4s ease-in;
	-moz-transition: max-height 0.4s ease-in;
	transition: max-height 0.4s ease-in;
}
.nav-option:checked + label {
	background-color: #444;
}
.nav-option:checked ~ .nav-close {
	display: block;
}
.nav-item {
	display: inline-block;
	padding: 15px 20px;
	height: 40px;
	line-height: 40px;
	margin: 0;
}
.nav-item:hover {
	background-color: #444;
	cursor: pointer;
}
.nav-content {
	position: absolute;
	top: 70px;
	overflow: hidden;
	max-height: 0;
	background-color: #222;
	color: #fff;
}
.nav-content a {
	color: #fff;
	text-decoration: none;
}
.nav-content a:hover {
	text-decoration: underline;
}
. 

  
 nav-sub {
	padding: 20px;
}
.nav-sub ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
.nav-sub ul a {
	display: inline-block;
	padding: 5px 0;
}
.nav-close {
	display: none;
	position: absolute;
	top: 70px;
	left: 0;
	height: 100%;
	width: 100%;
}
.nav-close-option {
	display: none;
}

Результат:

Смотреть результат

Теги: css

Редактировать

Дебаунсинг выпадающего списка (меню сайта) средствами одного CSS / Sandbox / Habr

Предыстория

Около пяти-шести лет назад я переделывал меню на рабочем сайте (не называю). Меняли меню каталога со старомодного разворачивающегося на (сейчас относительно) современное выпадающее. Меню делали горизонтальное, выпадающее вправо.

Коллега обратил мое внимание на проблему «цепляния за соседние пункты» при передвижении курсора мыши к выпавшим подпунктам меню. Он предложил решить ее так, как это было тогда сделано на сайте Амазона, и скинул мне местную статью Загадка выпадающего списка «Амазона» (где и постановка задачи и описание решения и ссылки на).

Но мне не хотелось не глядя вставлять чужое решение, не хотелось разбираться в нем, не хотелось писать свой велосипед, зато как-то быстро пришла в голову идея своего на одном лишь CSS. И получилось удобоваримо.

Я долго ждал, когда увижу, что кто-то сделал что-то подобное (и мне не придется писать на Хабр), но пока не дождался. Возможно плохо смотрел.

Проблема

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

На картинке, думаю, понятно изображено. Двигать нужно по синим стрелкам. Кратчайшее движение по красной стрелке приведет к перескоку на пункты 4 и 3. Кто хочет проверить: ссылка на jsfiddle.

Мое решение

Живой пример возможно многим пояснит лучше дальнейших слов.

Мое решение: при зависании мыши над корневым пунктом меню закрываем соседние пункты прозрачным дочерним элементом (dom-елементом) этого пункта, таким образом, чтобы на соседних элементах событие hover уже не происходило.

В примере для наглядности этот вспомогательный элемент div.unhover сделал полупрозрачным красным. В продакте, конечно, ставим ему в стиле background: transparent.

А чтобы другой корневой пункт все-таки можно было выбрать, прячем этот вспомогательный div, если курсор передвинут непосредственно на него или на выпавший блок. Но делаем это с анимацией свойства width этого вспомогательного элемента.

В общем при движении курсора к подпунктам (зеленая стрелка) эта «шторка» div.unhover плавно но быстро сворачивается ему вслед. Скорость анимации нужно подбирать по ширине меню и скорости движения мыши среднестатистического посетителя.

Чтобы не происходило осцилляций вспомогательного блока, названия корневых пунктов обернуты в span‘ы, которые при наведении получают больший z-index, чем их сестринский div. unhover.

Заключение

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

Но в последнее время даже на ведущих сайтах в лучшем случае отделываются простой задержкой переключения корневых пунктов. Оно и понятно тач-интерфейсы основательно вышли на передний план.

15 Удивительных раскрывающихся меню JavaScript [Примеры]

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

или «элемент» , который обычно имеет то же имя, что и HTML-элемент select , также известный как тег select или select box .

Элемент select — это тег HTML, который позволяет нам выбирать один или несколько вариантов, обычно в формах.

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

В этой статье мы сосредоточимся на обоих. Их просто и легко интегрировать в ваш дизайн, используя чистый HTML, CSS и немного JavaScript.

См. перо на КодПене.

Предварительный просмотр

Вот отличный пример того, как выглядит простое выпадающее меню .

Код JavaScript очень прост. Он просто привязывает событие щелчка к основному видимому элементу, поэтому после щелчка отображается подменю.

Очень простой, но эффективный способ создать очень простое складное меню.

См. перо на КодПене.

Предварительный просмотр

Вот настраиваемый элемент поля выбора, сделанный из HTML, CSS и чистого JavaScript .

Этот тип выпадающего меню имитирует поведение ввода HTML Select, позволяя пользователям выбрать один вариант.

Индивидуальный стиль делает его минималистичным и чистым. Он использует белый и синий цвета и тонкое использование теней, чтобы избежать использования жестких границ.

См. перо на КодПене.

Предварительный просмотр

Красивый список из 8 различных выпадающих меню с разными стилями.

Четыре из них реагируют на щелчок, а остальные 4 — на наведение мыши.

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

См. перо на КодПене.

Предварительный просмотр

Отличный пример выпадающего меню с несколькими подменю.

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

И, кроме того, самое классное в этом меню то, что оно предоставляет вам возможность добавлять подменю в элементы списка.

Отличное решение очень распространенной проблемы, с которой сталкиваются разработчики при разработке заголовков меню.

См. перо на КодПене.

Предварительный просмотр

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

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

Это может быть очень хорошим вариантом для больших боковых меню с большим количеством опций. Это помогает ограничить возможности для посетителя.

См. перо на КодПене.

Предварительный просмотр

Великолепный пример подменю с выпадающим меню со значками социальных сетей.

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

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

8. Раскрывающийся список Alpine JavaScript

См. перо на КодПене.

Предварительный просмотр

Если вы используете инфраструктуру Alpine.js, это поле выбора может быть для вас.

Вот простой пример того, как интегрировать окно выбора HTML с логикой JavaScript с помощью Alpine.js.

Он также использует TailwindCSS для стилизации. (Что может быть не идеально для всех, но имеет простое решение)

См. перо на КодПене.

Предварительный просмотр

Если вы ищете выпадающее меню для работы в качестве контекстного меню для вашего веб-приложения, то этот пример для вас.

Красиво реализованное меню, которое допускает значки, групповые категории и подменю внутри меню.

Он использует React и библиотеку поставщика Popper.js.

См. перо на КодПене.

Предварительный просмотр

Если вам нравится Bootstrap, вам следует рассмотреть возможность использования этого меню.

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

Позволяет группировать категории и переключать тумблеры в списке.

См. перо на КодПене.

Предварительный просмотр

Если вас устраивает использование jQuery, то посмотрите на эту красоту!

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

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

Окно выбора имеет очень простой стиль, что делает его идеальным для минималистичных веб-сайтов с белой тематикой.

См. перо на КодПене.

Предварительный просмотр

Этот пример — произведение искусства.

У нас есть не только адаптивное меню, но и адаптивное выпадающее меню, в котором учтена каждая деталь.

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

Лично мне нравится эффект, который меню имеет на рабочем столе, и его простота в адаптивном режиме. Что делает его идеальным для всех видов устройств!

См. перо на КодПене.

Предварительный просмотр

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

Поскольку в раскрывающемся списке используется jQuery, он также позволяет получить выбранное значение поля выбора в JavaScript. Таким образом, вы можете использовать его в своей логике.

См. перо на КодПене.

Предварительный просмотр

Это раскрывающееся меню на чистом CSS, в котором не используется JavaScript.

Возможно, это не то, что вы искали, но, безусловно, то, на что стоит обратить внимание, если вы ищете боковое меню.

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

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

В этой статье мы показали вам, что мы думаем о красивые выпадающие меню . Меню, которые вы легко сможете интегрировать с кодом JavaScript . Вы можете использовать React, Vue, Angular или чистый простой ванильный JavaScript.

Некоторые, например эффекты выпадающего списка для заголовков и меню, не потребуют много логики с точки зрения JavaScript, в то время как другие, использующие ввод HTML select
, сделают это.

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

• Примеры предупреждений JavaScript
• Как выучить JavaScript
• 20 Индикатор выполнения CSS [CodePens]
• 10+ гамбургер-меню CSS [CodePens]
• Красивые стили CSS для ваших флажков
• Проверить, установлен ли флажок, используя jQuery

сообщить об этом объявлении

Bulma: бесплатная современная CSS-инфраструктура с открытым исходным кодом на основе Flexbox0011

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

• раскрывающийся список основной контейнер
  • триггер раскрывающегося списка контейнер для кнопки
  • выпадающее меню переключаемое меню, скрытое по умолчанию
    • раскрывающийся список раскрывающийся список коробка , с белым фоном и тенью
      • раскрывающийся список каждый отдельный элемент раскрывающегося списка, который может быть либо a , либо div
      • раскрывающийся разделитель горизонтальная линия для разделения элементов раскрывающегося списка

Пример

HTML

 <дел>
  <дел>
    
      Кнопка раскрывающегося списка
      <диапазон>