Випадаюче навігаційне меню на CSS/HTML

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

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

Тобто наводимо на перший рівень → бачимо вкладені пункти → натискаємо і переходимо на сторінку другого рівня (підпункт). Фактично одне натискання.

Якщо ми не даємо можливість відразу перейти на підпункт, то користувачеві потрібно буде спочатку відвідати батьківський розділ, а потім тільки в нього вкладений пункт меню. Це не зручно з погляду юзабіліти – ми маємо зайве натискання та перехід, тобто два натискання.

Коли це потрібно

При наявності каталогу. У більшості випадків каталог має категорії та підкатегорії.
Наприклад вкладеність:
– Магазин (рівень 1)
— Категорія 1 (рівень 2)
— Категорія 2 (рівень 2)
— Категорія 3 (рівень 2)
В інших випадках, коли є розділ “Про нас”, наприклад
– Про нас (рівень 1)
— Наша історія (рівень 2)
— Наша команда (рівень 2)
— Відгуки (рівень 2)

Навігаційне меню

Умови

Навігаційне меню має бути зроблене невпорядкований списком, тобто на тегах <ul> – <li>, всі властивості на елементи задаємо від основного класу на батьківському елементі.
Активний клас має назву ‘active’
У неупорядкованому списку немає тегів крім <ul>, <li>, <a>. Якщо потрібно додати обгортку <div>, <span> та інші – зробить це на js

По коду додатково можна подивитись тут – “Стандартні HTML елементи та структура сайту“, а також там можна завантажити HTML шаблон.

Чому саме так

Навігаційне меню інтегруватиметься в CMS, а 100% CMS таких як Worpdress, Joomla, Opencart та багато інших мають саме таку розмітку – невпорядкований список без класів на посиланнях або інших додаткових конструкціях типу як обгортка навколо вкладеного <ul>
Класи можуть відрізнятися в різних CMS. Наприклад, у WordPress активний клас це current-menu-item, у Joomla – active, це лише приклад, а не проблема. Перейменувати чи додати через комусь клас це не проблема. Проблема це коли будуть додані класи на <li>, <a> на всі рівні і ще різні, і потрібно це якось буде інтегрувати. Так, можна підключити свою розмітку меню через Walker_Nav_Menu у Wordrpess або додати через модуль у Joomla, спробувати зробити там розмітку, ось тільки навіщо – це все набагато складніше, ніж зробити це в css.
Загалом це стандарт використовувати невпорядкований список без зайвих елементів для навігаційного меню.

Як робити меню

Написання коду для навігайійного меню можна поділіти на дві частини – робимо перший рівень і після додаємо другій рвіен. Це приклад, тому я використовував колір та розміри на свій розсуд. Починаємо з написання коду для першого рівня навігаційного меню.

HTML код для навігаційного меню першого рівня


<ul class="menu">
	<li><a href="#">Home</a></li>
	<li><a href="#">Shop</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Contact Us</a></li>
</ul>

Тег <a> не залишаємо порожнім. Якщо нам невідоме посилання, то ставимо ‘#‘. Це обов’язково.

Тег <li> це блоковий елемент, щоб зробити його лінійним (пункти поруч один з одним), нам потрійно використовувати css властивість display щоб змінити поведінку елемента.

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

Допустимо використовувати одне з трьох значень:

display: flex (немає зараз великих проблем при застосуванні)
float: left (потрібно буде додавати додаткові властивості на батьківський контейнер, тому ще після застосування на дочірні <li> елементи властивості float, висота батьківського <ul> дорівнюватиме нулю)
inline-block (потрібно буде враховувати додатковий відступ у 4px, який буде додано на кожен елемент, також будуть проблеми з вертикальним позиціонуванням тексту або інших елементів усередині елемента <li>)

СSS код для навігаційного меню першого рівня


.menu {
	display: flex; /* задаємо flex на батьківський контейнер щоб зробити вкладені елементи в один рядок */
	background: #4d6719; /* додаю фон на батьківський контейнер */
}
.menu li {
	font-size: 16px; /* розмір шрифту */
	font-family: Arial, Helvetica; /* додаємо через кому шрифти */
	border-left: 1px solid #7ba428; /* візуальний елемент – смужка між пунктами */
	position: relative; /* це потрібно, щоб позиціонувати другий рівень щодо першого */
}
.menu>li:last-child {
	border-right: 1px solid #7ba428; /* ми додали смужку зліва, але у останнього пункту смужки не буде праворуч, тому додаємо її окремо лише на останній пункт */
}
.menu li a {
	display: block; /* робимо тег блоковим, щоб можна було застосувати відступи */
	padding: 0 25px; /* додаю відступи ліворуч і праворуч - щоб був простір між смужками */
	line-height: 40px; /* такої висоти у нас буде контейнер, ми його центруємо по вертикалі. */
	color: #9acd32;
	text-decoration: none;
}
.menu li a:hover, 
.menu li.active>a {
	color: #fff;
	background: #9acd32; 
        /* змінюємо при наведенні колір фону пункту меню, колір тексту, через кому прописуємо значення для активного пункту  */
}

По “.menu li a”:

відступи потрібно ставити саме на посилання, щоб користувачеві простіше було натиснути (юзабіліті) на посилання – воно буде розміром на весь елемент.
центрувати текст за допомогою відступів складно; центрувати за допомогою align-items – можна, але все одно потрібно задавати розмір на <a>, так як у блокового елемента висота дорівнює нулю і буде в нашому випадку дорівнювати 16px – розміру шрифта навігційного меню. Тому line-height найпростіший і найшвидший спосіб
.menu li.active>a – пропишемо через комбінатор (>), щоб ці властивості не наслідував другий рівень меню

Візуально меню буде виглядати так:

Додамо другій рівень меню для пункту “Shop”. Код HTML буд таким


<ul class="menu">
	<li><a href="#">Home</a></li>
	<li class="active">
		<a href="#">Shop</a>
		<ul>
			<li><a href="#">Category 1</a></li>
			<li class="active"><a href="#">Category 2</a></li>
			<li><a href="#">Category 3</a></li>
		</ul>
	</li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Contact Us</a></li>
</ul>

Код CSS для другого рівня випадаючого меню


/* sublevel */
.menu li ul {
	position: absolute; /* позиціонуємо абсолютно, щоб цей елемент був у межах першого рівня "shop" - я додавав на нього relative */
	top: 40px; /* вказуємо відступ зверху який дорівнює нашому line-height */
	left: 0; /* позиціонування зліва */
	width: 200px; /* задаємо розмір контейнера, інакше ширина дорівнюватиме ширині пункту меню другого рівня */
	border: 1px solid #5c7b1e; /* задамо обводку */
	border-top: none; /* приберемо обведення зверху – воно у нас буде додана на li зверху */
	display: none; /* після того, як усі стилі оформлені, приховуємо другий рівень меню */
}
.menu li ul li {
	border: none; /* обнуляємо стилі з першого рівня */
	border-top: 1px solid #5c7b1e;
}
.menu li ul li a {
	line-height: 23px; /* обнулюємо міжрядковий інтервал з першого рівня */
	background: #c2e184;
	color: #3d5214;
	padding: 10px 15px; /* задаємо відступи */
}
.menu li ul li a:hover, 
.menu li ul li.active a {
	background: #6b9023; 
	color: #fff;
}
/* mouse over */
.menu li:hover ul {
	display: block; /* показуємо меню при наведенні на перший рівень меню */
}

Візуально навігаційне меню виглядатиме так

Код HTML випадаючого меню повністю


<ul class="menu">
	<li><a href="#">Home</a></li>
	<li class="active">
		<a href="#">Shop</a>
		<ul>
			<li><a href="#">Category 1</a></li>
			<li class="active"><a href="#">Category 2</a></li>
			<li><a href="#">Category 3</a></li>
		</ul>
	</li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Contact Us</a></li>
</ul>

Код CSS випадаючого меню повністю


.menu {
	display: flex; /* задаємо flex на батьківський контейнер щоб зробити вкладені елементи в один рядок */
	background: #4d6719; /* додаю фон на батьківський контейнер */
}
.menu li {
	font-size: 16px; /* розмір шрифту */
	font-family: Arial, Helvetica; /* додаємо через кому шрифти */
	border-left: 1px solid #7ba428; /* візуальний елемент – смужка між пунктами */
	position: relative; /* це потрібно, щоб позиціонувати другий рівень щодо першого */
}
.menu>li:last-child {
	border-right: 1px solid #7ba428; /* ми додали смужку зліва, але у останнього пункту смужки не буде праворуч, тому додаємо її окремо лише на останній пункт */
}
.menu li a {
	display: block; /* робимо тег блоковим, щоб можна було застосувати відступи */
	padding: 0 25px; /* додаю відступи ліворуч і праворуч - щоб був простір між смужками */
	line-height: 40px; /* такої висоти у нас буде контейнер, ми його центруємо по вертикалі. */
	color: #9acd32;
	text-decoration: none;
}
.menu li a:hover, 
.menu li.active>a {
	color: #fff;
	background: #9acd32; 
        /* змінюємо при наведенні колір фону пункту меню, колір тексту, через кому прописуємо значення для активного пункту  */
}
/* sublevel */
.menu li ul {
	position: absolute; /* позиціонуємо абсолютно, щоб цей елемент був у межах першого рівня "shop" - я додавав на нього relative */
	top: 40px; /* вказуємо відступ зверху який дорівнює нашому line-height */
	left: 0; /* позиціонування зліва */
	width: 200px; /* задаємо розмір контейнера, інакше ширина дорівнюватиме ширині пункту меню другого рівня */
	border: 1px solid #5c7b1e; /* задамо обводку */
	border-top: none; /* приберемо обведення зверху – воно у нас буде додана на li зверху */
	display: none; /* після того, як усі стилі оформлені, приховуємо другий рівень меню */
}
.menu li ul li {
	border: none; /* обнуляємо стилі з першого рівня */
	border-top: 1px solid #5c7b1e;
}
.menu li ul li a {
	line-height: 23px; /* обнулюємо міжрядковий інтервал з першого рівня */
	background: #c2e184;
	color: #3d5214;
	padding: 10px 15px; /* задаємо відступи */
}
.menu li ul li a:hover, 
.menu li ul li.active a {
	background: #6b9023; 
	color: #fff;
}
/* mouse over */
.menu li:hover ul {
	display: block; /* показуємо меню при наведенні на перший рівень меню */
}