uni-nav
Моя версия универсальной навигации для мобильных и обычных устройств
Для установки себе этого npm пакета, напишите:
npm i uni-nav
Пример использования
const menu = new mobileNav({ trigersList: '#triger1', mainNav: '.navigation', navPosition: 'left', disableAt: 800, }); menu.startFns();
Class: mobileNav
mobileNav(args)
Этот клас создаёт боковое меню исходя из заданных параметров.
Constructor
new mobileNav(args)
Создадим навигацию
Parameters:
| Name | Type | Description |
|---|---|---|
args |
object | Начальный объект конфигурации. |
Source:
Methods
appendMobNav()
Добавляем нашу менюшку со всеми потрахами в ДОМ
Source:
clickOnLinkHandler(e)
Эта функция срабатывает по клику на ссылки. Если ссылка оказывается родительской, то соседнему элементу .nav__inner-list добавляется класс .open.
Parameters:
| Name | Type | Description |
|---|---|---|
e |
e | Событие клика |
Source:
closeAllInnerLists()
Эта функция закрывает все внутренние списки
Source:
createInnerNav(listInnerAncors) → {object}
Эта функция создаёт внутренний список и возвращает его.
Parameters:
| Name | Type | Description |
|---|---|---|
listInnerAncors |
array | Массив из объектов для внутренних ссылок |
Source:
Returns:
Возвращает готовый внутренний список
Type
object
createInnerNavCloseButton() → {object}
Создание Кнопки закрытия для внутренней навигации
Source:
Returns:
Type
object
createNav() → {object}
Создаём Враппер для элементов меню.
Source:
Returns:
Возвращает
с классом nav.
Type
object
createNavCloseButton() → {object}
Создание Кнопки закрытия для навигации
Source:
Returns:
Type
object
createNavFooter() → {object}
Создание Футера для навигации
Source:
Returns:
Type
object
createNavHeader() → {object}
Создание Хедера для навигации
Source:
Returns:
Type
object
createNavItem() → {object}
Создаём оболочку для ссылки.
Source:
Returns:
Возвращает
с классом nav__item.
Type
object
createNavItemAndLink(linkArgs) → {object}
Создаём оболочку для ссылки вместе с самой ссылкой
Parameters:
| Name | Type | Description |
|---|---|---|
linkArgs |
object | Объект конфигурации для ссылки |
Source:
Returns:
HTML елемент
Type
object
createNavLink(linkArgs) → {object}
Создаём ссылку. linkArgs.href - путь для ссылки. linkArgs.innerHTML - контент помещаемый в ссылку. linkArgs.classes - массив из дополнительных классов для ссылки.
Parameters:
| Name | Type | Description |
|---|---|---|
linkArgs |
object | Объект конфигурации для ссылки |
Source:
Returns:
Возвращает с классом nav__link.
Type
object
createOverlap() → {object}
Создаём Оболочку, в которой у нас будет вертеться наше меню.
Source:
Returns:
Возвращает
с классом overlap.
Type
object
createOverlay() → {object}
Создание оверлея
Source:
Returns:
Возвращает
оверлея
Type
object
createSelfTrigerBtn() → {object}
Этот метод создаёт кнопку тригер для появления меню
Source:
Returns:
Type
object
hideInnerMenu(e)
Скрыть внутреннее меню
Parameters:
| Name | Type | Description |
|---|---|---|
e |
e | Событие тригер |
Source:
hideMenu(e)
Скрыть меню
Parameters:
| Name | Type | Description |
|---|---|---|
e |
e | Событие тригер |
Source:
hideMenuAndOverlay(e)
Скрыть меню с оверлеем
Parameters:
| Name | Type | Description |
|---|---|---|
e |
e |
Source:
hideOverlay(e)
Скрыть оверлей меню
Parameters:
| Name | Type | Description |
|---|---|---|
e |
e | Событие тригер |
Source:
makeInnerNavFromInnerUl(linksArray) → {object}
Эту функция принимает список ссылок из внутренних ul элементов для того чтобы сделать на основе них внутренние списки в нашем меню.
Parameters:
| Name | Type | Description |
|---|---|---|
linksArray |
* | Массив объектов |
Source:
Returns:
Возвращаем массив объектов для внутреннего списка
Type
object
makeNavFromThisMainNav()
Этот метод берёт данные для ссылок (this.linksArray) из меню this.mainNav из его первых дочерних ссылок.
Source:
showMenu(e)
Показать меню
Parameters:
| Name | Type | Description |
|---|---|---|
e |
e | Событие тригер |
Source:
showMenuAndOverlay(e)
Показать меню с оверлеем
Parameters:
| Name | Type | Description |
|---|---|---|
e |
e |
Source:
showOverlay(e)
Показать оверлей меню
Parameters:
| Name | Type | Description |
|---|---|---|
e |
e | Событие тригер |
Source:
startFns()
Сабрал разные функции необходимые для старта программы
Source:
toggleMenu(e)
Тоглим наше меню
Parameters:
| Name | Type | Description |
|---|---|---|
e |
e | Событие |
Source:
toggleMenuAndOverlay(e)
Показать меню с оверлеем
Parameters:
| Name | Type | Description |
|---|---|---|
e |
e |
Source:
toggleOverlay(e)
Тоглим оверлей меню
Parameters:
| Name | Type | Description |
|---|---|---|
e |
e | Событие тригер |
Source:
toggleSelfTrigerBtn()
Переключалка обычного меню в наше
Source:
trigersHandler()
Развешиваем слушателей на тригеры.
Source:
windowResizeHandler()
Эта функция добавляет к window слушателя toggleSelfTrigerBtn() на событие resize.
Source:
Home
Classes
Global
Documentation generated by JSDoc 3.6.6 on Mon Mar 29 2021 12:45:17 GMT+0300 (Москва, стандартное время)