Демо: адаптивное выпадающее меню

Сейчас я занимаюсь обновлением дизайна своего сайта, в том числе и меню навигации. Существует множество шаблонов для навигационного меню, и многие из них я разрабатывал самостоятельно.

Но в этот раз я решил попробовать что-нибудь новенькое, так как ни один из моих шаблонов не отвечал требованиям, которые я выдвигал:

  • Меню должно работать без поддержки Javascript;
  • Удобный доступ к любому пункту меню даже на мобильных устройствах;
  • Основные пункты меню должны всегда отображаться в самом начале.

1) Меню должно работать без поддержки Javascript

Этого довольно просто добиться. Я сделал так, чтобы Javascript работал только в современных браузерах. Затем добавил class=”js” к HTML-элементу, чтобы к меню можно было применять различные стили. Я также добавил EventListener, с помощью которого можно открывать/закрывать меню.

У меня получился вот такой вот Javascript-код:

(function (doc) {
	// инициализация JavaScript происходит только в современных браузерах
	if ('visibilityState' in doc) {

		// Добавляем класс к HTML только в том случае, если поддержка js активирована 
		doc.documentElement.className = 'js';
		
		// Добавляем Eventlistener для открытия/закрытия меню
		var menuLayer = doc.getElementById('is--menu-layer'),
			menuClose = doc.getElementById('is--menu-close'),
			menuOpen = doc.getElementById('is--menu-open');
		
		function openMenu () {
			menuLayer.className = 'is--menu-opened';
		}

		function closeMenu () {
			menuLayer.className = '';
		}

		menuClose.addEventListener("click", closeMenu, false);
		menuOpen.addEventListener("click", openMenu, false);
	}
}(document));

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

menu-no-js

2) Удобный доступ к любому пункту меню даже на устройствах с маленькими экранами

Смартфоны становятся все больше и больше, поэтому до пунктов меню, расположенных в верхнем левом углу, трудно дотянуться. Из-за этого вокруг меню я создал оболочку (wrapper) и зафиксировал ее (position: fixed). На некоторых устройствах это может привести к плачевным результатам, но для перестраховки я использовал прием из предыдущего примера.

Далее я задал списку пунктов меню абсолютное позиционирование (position: absolute), и закрепил его в правом нижнем углу. Благодаря этому любой пункт меню легко нажимается большим пальцем.

3) Основные пункты меню должны всегда отображаться в самом начале

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

.js .navigation ul {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}
.js .navigation li{
	-webkit-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

Взгляните на скриншот меню, открытого на Android-устройстве:

menu-open-android

Код

Демо-пример меню можно посмотреть здесь, а исходный код можно взять на GitHub.

Перевод статьи “Demo: Responsive Pop-out Menu” был подготовлен дружной командой проекта Сайтостроение от А до Я.