Створення витягається бокового меню для веб-сайту

Зауважте: для цього уроку Вам потрібно бібліотека jQuery, так що переконаєтеся, що остання бібліотека jQuery підключена на Вашій сторінці.

1. Структура

Для початку ми створимо структуру для лівого бокового меню, яку ми в результаті сховаємо вліво. Ми додали кілька основних стилів в приклад, так що не соромтеся змінювати вигляд Вашого бокового меню. Ми також додали порожній блок під назвою main-content. Цей блок буде містити всі елементи, які Ви хочете показати на цій сторінці. Ми заповнимо його в наступному кроці.

2. Створення простого бічного меню

Тепер ми сховаємо бічне меню вліво за допомогою властивостей position: relative і left: -240px, це значення дорівнює ширині бічного меню. Ми додали кнопку і скрипт jQuery, що дозволить нам викликати бічне меню після натискання, перемикаючи клас open-sidebar для контейнера, в якому знаходяться бічне меню і блок main-content.

Тепер у нас є просте бічне меню, яке викликається натисканням кнопки миші.

3. Робимо меню витягати

Так як це неприйнятно, ми додали порожній блок класу swipe-area, щоб визначити область виявлення жесту витягування. Область визначення витягування розташована біля лівого краю сторінки, так що користувач зможе викликати бічне меню витягуванням направо біля лівого краю екрана. Це вирішує проблему випадкового відкриття меню при прокручуванні сторінки.

У нашому скрипті JS ми визначаємо дію витягування, використовую функцію swipe (), виконувану плагіном TouchSwipe. Ми виявляємо дві частини дії витягування: рух і напрямок. Ми просто додаємо клас open-sidebar, щоб викликати меню, коли курсор миші або палець користувача рухається вправо. Ми видаляємо цей клас, якщо курсор миші або палець користувача рухається в протилежному напрямку.

висновок

Переклад - Вартівня