menuautofocus

Simple JS Library for menuautofocus


Keywords
menuautofocus
License
MIT
Install
npm install menuautofocus@1.0.0

Documentation

menuautofocus


auto focus plugin

ОписаниС плагина:

Π”Π°Π½Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ позволяСт ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ ΠΏΠΎ ΠΎΡ‚Ρ€Ρ‹Ρ‚ΠΎΠΌΡƒ мСню сайта ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ ΠΈ Π½Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Π½Π΅ΠΌΡƒ, ΠΊΠΎΠ³Π΄Π° это Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠΎΠ³Π΄Π° мСню срыто ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ). Π’Π°ΠΊΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ сразу ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ ΠΏΠΎ мСню ΠΏΡ€ΠΈ Π΅Π³ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ Π±Π΅Π· Π»ΠΈΡˆΠ½ΠΈΡ… Π½Π°ΠΆΠ°Ρ‚ΠΈΠΉ Π½Π° ΠΊΠ»Π°Π²ΠΈΡˆΡƒ tab.

Установка ΠΈ инициализация

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΌΠΎΠΆΠ½ΠΎ с npm: npm i menuautofocus

Бсылка Π½Π° ΠΏΠ»Π°Π³ΠΈΠ½ Π² npm: https://www.npmjs.com/package/menuautofocus?activeTab=readme

ΠŸΠ΅Ρ€Π΅Π΄ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ:

Для ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΠ»Π°Π³ΠΈΠ½Π° установитС сСлСкторы ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ написаны Π² Π΄Π°Π½Π½ΠΎΠΉ инструкции, Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡˆΠΈΡ‚Π΅ свои сСлСкторы ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹.

Для мСню ΠΏΡ€ΠΎΠΏΠΈΡˆΠΈΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚: data-menu

Для ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²Ρ‹Π·ΠΎΠ²Π° мСню ΠΏΡ€ΠΎΠΏΠΈΡˆΠΈΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚: data-buger

Если Π½Π° вашСм сайтС прСдусмотрСна внСшняя ΠΎΠ±Ρ‘Ρ€Ρ‚ΠΊΠ° для закрытия мСню ΠΏΡ€ΠΎΠΏΠΈΡˆΠΈΡ‚Π΅ Π΅ΠΉ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚: data-menu-overlay

ПослС установки для ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠΏΠΈΡˆΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

const menuAutofocus = new MenuAutofocus('[data-burger]');

Если Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ свои сСлСкторы ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ - Π΄Π΅Π»Π°ΠΉΡ‚Π΅ это ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

const menuAutofocus = new MenuAutofocus('[data-burger]', {
  menuName: '[data-menu]', // ΠΏΡ€ΠΎΠΏΠΈΡˆΠΈΡ‚Π΅ свой сСлСктор...
  closeBtnName: '[data-close]', // ΠΏΡ€ΠΎΠΏΠΈΡˆΠΈΡ‚Π΅ свой сСлСктор...
  overlayName: '[data-menu-overlay]', // ΠΏΡ€ΠΎΠΏΠΈΡˆΠΈΡ‚Π΅ свой сСлСктор...
  menuItemName: '[data-menu-item]', // ΠΏΡ€ΠΎΠΏΠΈΡˆΠΈΡ‚Π΅ свой сСлСктор...
  menuActiveClass: 'nav--active', // ΠΏΡ€ΠΎΠΏΠΈΡˆΠΈΡ‚Π΅ свой сСлСктор...
});

Настройки

Π—Π°Π΄Π΅Ρ€ΠΆΠΊΠ° фокуса duration (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 0):

const menuAutofocus = new MenuAutofocus('[data-burger]', {
  duration: 0,
});

ΠΠ²Ρ‚ΠΎΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ фокуса ΠΊ мСню. По ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΡŽ мСню фокус автоматичСски ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡΡ Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ фокусируСмый элСмСнт мСню (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ):

const menuAutofocus = new MenuAutofocus('[data-burger]', {
  autoFocusToMenu: false,
});

ΠΠ²Ρ‚ΠΎΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ фокуса ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ "Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ мСню". Если Π² мСню присутствуСт ΠΊΠ½ΠΎΠΏΠΊΠ° "Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ мСню", Ρ‚ΠΎ ΠΏΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΡŽ мСню фокус пСрСмСщаСтся ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ "Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ мСню" (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ):

const menuAutofocus = new MenuAutofocus('[data-burger]', {
  autoFocusToCloseBtn: false,
});