Моя версия универсальной навигации для мобильных и обычных устройств
const menu = new mobileNav({ trigersList: '#triger1', mainNav: '.navigation', navPosition: 'left', disableAt: 800, }); menu.startFns();
Этот клас создаёт боковое меню исходя из заданных параметров.
Создадим навигацию
Name | Type | Description |
---|---|---|
args |
object | Начальный объект конфигурации. |
Source:
Добавляем нашу менюшку со всеми потрахами в ДОМ
Source:
Эта функция срабатывает по клику на ссылки. Если ссылка оказывается родительской, то соседнему элементу .nav__inner-list добавляется класс .open.
Name | Type | Description |
---|---|---|
e |
e | Событие клика |
Source:
Эта функция закрывает все внутренние списки
Source:
Эта функция создаёт внутренний список и возвращает его.
Name | Type | Description |
---|---|---|
listInnerAncors |
array | Массив из объектов для внутренних ссылок |
Source:
Возвращает готовый внутренний список
Type
object
Создание Кнопки закрытия для внутренней навигации
Source:
Type
object
Создаём Враппер для элементов меню.
Source:
Возвращает
с классом nav.
Type
object
Создание Кнопки закрытия для навигации
Source:
Type
object
Создание Футера для навигации
Source:
Type
object
Создание Хедера для навигации
Source:
Type
object
Создаём оболочку для ссылки.
Source:
Возвращает
с классом nav__item.
Type
object
Создаём оболочку для ссылки вместе с самой ссылкой
Name | Type | Description |
---|---|---|
linkArgs |
object | Объект конфигурации для ссылки |
Source:
HTML елемент
Type
object
Создаём ссылку. linkArgs.href - путь для ссылки. linkArgs.innerHTML - контент помещаемый в ссылку. linkArgs.classes - массив из дополнительных классов для ссылки.
Name | Type | Description |
---|---|---|
linkArgs |
object | Объект конфигурации для ссылки |
Source:
Возвращает с классом nav__link.
Type
object
Создаём Оболочку, в которой у нас будет вертеться наше меню.
Source:
Возвращает
с классом overlap.
Type
object
Создание оверлея
Source:
Возвращает
оверлея
Type
object
Этот метод создаёт кнопку тригер для появления меню
Source:
Type
object
Скрыть внутреннее меню
Name | Type | Description |
---|---|---|
e |
e | Событие тригер |
Source:
Скрыть меню
Name | Type | Description |
---|---|---|
e |
e | Событие тригер |
Source:
Скрыть меню с оверлеем
Name | Type | Description |
---|---|---|
e |
e |
Source:
Скрыть оверлей меню
Name | Type | Description |
---|---|---|
e |
e | Событие тригер |
Source:
Эту функция принимает список ссылок из внутренних ul элементов для того чтобы сделать на основе них внутренние списки в нашем меню.
Name | Type | Description |
---|---|---|
linksArray |
* | Массив объектов |
Source:
Возвращаем массив объектов для внутреннего списка
Type
object
Этот метод берёт данные для ссылок (this.linksArray) из меню this.mainNav из его первых дочерних ссылок.
Source:
Показать меню
Name | Type | Description |
---|---|---|
e |
e | Событие тригер |
Source:
Показать меню с оверлеем
Name | Type | Description |
---|---|---|
e |
e |
Source:
Показать оверлей меню
Name | Type | Description |
---|---|---|
e |
e | Событие тригер |
Source:
Сабрал разные функции необходимые для старта программы
Source:
Тоглим наше меню
Name | Type | Description |
---|---|---|
e |
e | Событие |
Source:
Показать меню с оверлеем
Name | Type | Description |
---|---|---|
e |
e |
Source:
Тоглим оверлей меню
Name | Type | Description |
---|---|---|
e |
e | Событие тригер |
Source:
Переключалка обычного меню в наше
Source:
Развешиваем слушателей на тригеры.
Source:
Эта функция добавляет к window слушателя toggleSelfTrigerBtn() на событие resize.
Source:
Documentation generated by JSDoc 3.6.6 on Mon Mar 29 2021 12:45:17 GMT+0300 (Москва, стандартное время)