Создание бокового выпадающего меню на Slideout.js

В этом уроке я расскажу как создать боковое выпадающее меню. Для создания такого меню нам понадобится библиотека Slideout.js.

Сложность

Slideout.js - Боковое, выпадающее меню навигации, которое разработано для устройств с сенсорным экраном, отлично подходит для внедрения в мобильные веб-приложения.

Особенности

  • Свободное распространение
  • Простая разметка
  • Нативная прокрутка
  • Легкая кастомизация
  • CSS transforms & transitions.
  • Всего 2 Kb! (min & gzip)

Установка

Библиотеку Slideout.js можно добавить из CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/slideout/0.1.11/slideout.min.js"></script>

Либо вы можете использовать любой менеджер пакетов:


$ npm install slideout

$ spm install slideout

$ bower install slideout.js

$ component install mango/slideout

Использование

Добавить боковое меню Slideout.js для вашего проекта, очень просто!

Прежде всего, вам нужно создать разметку. В которой должен находится элемент nav с идентификатором #menu, а также main с идентификатором #panel в теле страницы.

<nav id="menu">
  <header>
    <h2>Menu</h2>
  </header>
</nav>

<main id="panel">
  <header>
    <h2>Panel</h2>
  </header>
</main>

CSS

Создадим файл index.css, в котором будут находится все необходимые стили для Slideout.js.

body {
  width: 100%;
  height: 100%;
}

.slideout-menu {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  width: 256px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: none;
}

.slideout-panel {
  position:relative;
  z-index: 1;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}

.slideout-open .slideout-menu {
  display: block;
}

JS

Добавьте библиотеку Slideout.js в блок head основной страницы, и создайте новый объект Slideout с дополнительными опциями:

<script src="/dist/slideout.min.js"></script>
<script>
  var slideout = new Slideout({
    'panel': document.getElementById('panel'),
    'menu': document.getElementById('menu'),
    'padding': 256,
    'tolerance': 70
  });
</script>

Поддержка браузерами

  • Chrome (IOS, Android, desktop)
  • Firefox (Android, desktop)
  • Safari (IOS, Android, desktop)
  • Opera (desktop)
  • IE 10+ (desktop)

Дополнительные опции

  • options (Объект) - Для настройки нового экземпляра Slideout
  • options.panel (HTML элемент) - Элемент DOM который содержит весь контент вашего приложения (.slideout-panel)
  • options.menu (HTML элемент) - Элемент DOM который содержит меню (.slideout-menu)
  • [options.duration] (Число) - Время (в миллисекундах) открытия/закрытия меню. По умолчанию: 300
  • [options.fx] (Строка) - CSS эффект используемый при анимации открытия или закрытия меню. По умолчанию: ease
  • [options.padding] (Число) - Отступ. По умолчанию: 256
  • [options.tolerance] (Число) - Отклонение. По умолчанию: 70
  • [options.touch] (Булевский тип) - Если стоит false, то отключается поддержка сенсорных экранов. По умолчанию: true
  • [options.side] (Строка) - С какой стороны будет открываться меню (слева или справа). По умолчанию: left
var slideout = new Slideout({
  'panel': document.getElementById('main'),
  'menu': document.getElementById('menu'),
  'padding': 256,
  'tolerance': 70
});

Дополнительные функции

  • slideout.open(); - Открытие меню.
  • slideout.close(); - Закрытие меню.
  • slideout.toggle(); - Переключатель открытие/закрытие.
  • slideout.isOpen() - Значение true - меню по умолчанию открыто, false- закрыто.
  • slideout.destroy(); - Удаляет экземпляр класса, на его месте может быть создан новый.
  • slideout.enableTouch(); - Позволяет открывать меню на сенсорных устройствах.
  • slideout.disableTouch(); - Отключает возможность открывать меню на сенсорных устройствах.
  • slideout.on('open', function() { ... });
  • slideout.once('open', function() { ... });
  • slideout.off('open', listener);
  • slideout.emit('open');

События

Объект slideout может использовать следующие события:

  • beforeclose
  • close
  • beforeopen
  • open
  • translate
slideout.on('translate', function(translated) {
  console.log(translated); // 120 in px
});

npm-scripts

$ npm run build

$ npm run dist

$ npm test

$ npm run hint

Дополнительно

Как добавить кнопку переключения меню.

// vanilla js
document.querySelector('.toggle-button').addEventListener('click', function() {
  slideout.toggle();
});

// jQuery
$('.toggle-button').on('click', function() {
    slideout.toggle();
});

Как открыть меню с правой стороны

Для этого необходимо добавить свойство left: auto в классе .slideout-menu:

.slideout-menu {
  left: auto;
}<

Затем смените направление открытия меню:

var slideout = new Slideout({
  'panel': document.getElementById('content'),
  'menu': document.getElementById('menu'),
  'side': 'right'
});

ДЕМО1 ДЕМО2 СКАЧАТЬ Перевод статьи Slideout.js

 

Тэги: menuresponsivepluginmobile

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.