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

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

Маємо певне посилання із дуже оригінальною назвою "Меню", по кліку на якому повинні з'явитися всі пункти меню, які до цього часу були сховані.

Створюємо простенький код меню:

<a href="#" id="toogle">Menu</a>
<ul id="top-menu">
	<li class="link">
		<a href="#">Link 1</a>
	</li>
	<li class="link">
		<a href="#">Link 2</a>
	</li>
	<li class="link">
		<a href="#">Link 3</a>
	</li>
</ul>

Посилання із id="toogle" та підписом "Меню" і буде нашою кнопкою, яка викликатиме пункти меню із нірвани на світ Божий.

Для того, щоб спочатку приховати пункти меню, задаємо списку #top-menu нульову висоту – настільки тонке меню, аж прозоре, важко буде помітити 😉

Тепер наперед уявимо, що при кліку по кнопці "Меню", до #top-menu додається клас .menu-opened. Цьому класу присвоюємо зміну висоти до 100% (не забудь вказати значення !important, оскільки ми мусимо дозволити класу переназначити стиль ідентифікатора, а це за замовчуванням заборонено.

Решта стилів прописані для кращого візуального сприйняття, у тебе все може бути по-іншому. Ось код CSS:

#top-menu {
	position: fixed;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100%;
	height: 0;
	transition-duration: 0.6s;
	-webkit-transition-duration: 0.6s;
}

.menu-opened {
	height: 100% !important;
}

.link {
	width: 38.2vw;
	max-width: 440px;
	height: 20vw;
	max-height: 231px;
	margin: 0.5vw;
	text-align: center;
	display: table;
}

.link a {
	color: #fff;
	background: #333;
	display: block;
	width: 100%;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}

І все-таки: як із допомогою JavaScript змінити клас елемента?

А тепер спробуємо, власне, із допомогою JavaScript змінити клас елемента, а вірніше додати його до списку #top-menu:

function menuOpen() {
	if(document.getElementById("top-menu").classList.contains('menu-opened')) {
		document.getElementById("top-menu").classList.remove('menu-opened');
	} else {
		document.getElementById("top-menu").classList.add('menu-opened');
	}
}

function siteLoaded() {
	document.getElementById("toogle").addEventListener('click', menuOpen);
}
document.addEventListener("DOMContentLoaded", siteLoaded);

Даний скрипт перевірятиме, чи немає часом в елемента з id="top-menu" класу під іменем "menu-opened". Якщо немає – автоматично додаватиме, якщо є – видалятиме. Ну просто Робін Гуд, чи не так? 😉

Результатом таких чарів буде поява-зникання пунктів меню при кожному кліку на посиланні "Меню". Переконайся сам/а:

Код ДУЖЕ недосконалий, потребує багато виправлень, але за основу його взяти можна. В наступній статті я торкнуся оформлення кнопки меню у вигляді знаменитого "бургера". Не забувай поширювати мої статті та підписуватися на оновлення блогу 😉