Як створити випадаюче меню, використовуючи лише HTML та CSS

В одній з попередніх статей ми розглядали створення випадаючого меню за допомогою JavaScript (jQuery). У цій статті ми розглянемо, як створити випадаюче меню, використовуючи лише HTML та CSS. Така реалізація не завжди підходить для всіх, але в деяких випадках може бути корисною. Наше меню буде горизонтальним. Пункти меню матимуть фіксовану ширину. Встановимо position: relative для всіх елементів списку. А для вкладеного меню встановимо position: absolute. Підменю з’явиться при наведенні курсора миші на батьківський елемент. Вся механіка досягається завдяки псевдокласу :hover. Наше меню міститиме кілька рівнів вкладеності.

Video

HTML

<ul class="menu">
	<li>
		<a href="#">Item 1</a>
		<ul>
			<li><a href="#">Subitem 1-1</a></li>
			<li>
				<a href="#">Subitem 1-2</a>
				<ul>
					<li><a href="#">Subitem 1-2-1</a></li>
					<li><a href="#">Subitem 1-2-2</a></li>
					<li><a href="#">Subitem 1-2-3 </a></li>
				</ul>
			</li>
			<li>
				<a href="#">Subitem 1-3</a>
				<ul>
					<li><a href="#">Subitem 1-3-1</a></li>
					<li><a href="#">Subitem 1-3-2</a></li>
					<li><a href="#">Subitem 1-3-3</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li>
		<a href="#">Item 2</a>
		<ul>
			<li>
				<a href="#">Subitem 2-1</a>
				<ul>
					<li><a href="#">Subitem 2-1-1</a></li>
					<li><a href="#">Subitem 2-1-2</a></li>
					<li><a href="#">Subitem 2-1-3</a></li>
				</ul>
			</li>
			<li><a href="#">Subitem 2-2</a></li>
			<li><a href="#">Subitem 2-3</a></li>
		</ul>
	</li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
</ul>

CSS

.menu {
	display: flex;
}

.menu li {
	width: 200px;
	list-style: none;
	position: relative;
}

.menu a {
	display: block;
	color: #fff;
	background: #07355e;
	text-decoration: none;
	text-align: center;
	height: 40px;
	line-height: 40px;
	transition: all 0.5s;
}

.menu a:hover {
	opacity: 0.8;
}

.menu ul {
	position: absolute;
	left: 0;
	top: 100%;
	display: none;
	padding: 0;
}

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

.menu ul ul {
	top: 0;
	left: 100%;
}

Ви можете побачити приклад того, як може виглядати та працювати меню на Codepen: https://codepen.io/igorrybalko/pen/EaaopVO

Випадаюче меню є одним із найпоширеніших елементів інтерфейсу, що використовуються на сучасних веб-сайтах. Його можна знайти в панелях навігації, заголовках, панелях інструментів та різних типах веб-додатків. Його популярність пояснюється тим, що воно дозволяє розробникам організовувати велику кількість посилань або опцій компактним та структурованим способом, не перевантажуючи інтерфейс.

З точки зору користувача, випадаючі меню є знайомими та інтуїтивно зрозумілими. Більшість користувачів вже розуміють, як вони працюють, що робить навігацію швидшою та зручнішою. ​​Крім того, добре розроблене випадаюче меню може покращити загальний вигляд веб-сайту, зробивши його чистішим та професійнішим, зберігаючи при цьому зручність використання.