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

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

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

  • Меню должно работать без поддержки 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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *