Главная / Верстка сайта / Демо: адаптивное выпадающее меню

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

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

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

  • Меню должно работать без поддержки 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, меню всегда будет видно, и располагаться по левую сторону экрана.

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

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-устройстве:

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

Код

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

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

О нас seoexpert

продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

Смотрите также

Создание цветной рамки вокруг текста с помощью HTML и CSS

Рамка на HTML-страницах, созданная с помощью border color, помогает привлечь внимание к тексту или выделить ...