HTMLTutorialsNavigationDropping Menu - SELFHTML Wiki
Інформація про цей текст
У цьому розділі ви дізнаєтесь функціональність випадаючу навігацію, яку можна відкривати та закривати за допомогою миші та клавіатури. Він адаптивно адаптується до всіх областей перегляду.
Зміст
Меню з декількома (вкладеними) рівнями [Редагувати]
У багатьох випадках навігація у великих веб-проектах не містить послідовного списку посилань, але розподіляє їх на різні рівні навігації.
вкладені списки [редагувати]
Вкладені списки підходять для логічного відображення цієї структури.
Навіть без CSS структура вкладених списків дуже чітка через налаштування браузера.
Усі посилання можна вибрати за допомогою клавіатури.
Flyout або Dropdown? [Редагувати]
На момент ідеального розміщення пікселів було два варіанти:
- За допомогою меню вильоту, підменю "вилітають" горизонтально з вертикальної структури вправо
- З випадаючого меню підменю «падають» вертикально від горизонтального рядка
Приховати підменю [редагувати]
Характеристика випадаючого меню полягає в тому, що підменю приховано у своєму початковому стані і лише виділяється та робиться видимим при виборі за допомогою миші за допомогою псевдокласу: наведення або клавіатури через: focus.
Елементи списку, які містять підменю як дочірній елемент, отримують tabindex = "0", щоб їх можна було перекласти.
При виборі за допомогою миші або клавіатури відображається підменю; наступні елементи списку ковзають вниз.
.вибрано підменю, підменю відображається, як тільки вибрано перший елемент у списку, але знову приховано.
Варіант сенсорного керування та клавіатури можна досягти лише за допомогою JavaScript:
меню вертикального вильоту [Редагувати]
Це меню можна перетворити у вертикальне меню вильоту за кілька простих кроків:
Якщо не використовувати nav li, пункти меню розташовані один під одним. Абсолютна позиція навігатора така ж, як і вгорі: -0,4em; відступ батьківського елемента і залишається: 8em; розташована праворуч від батьківського елемента.
Сьогодні цей тип навігації дещо згорджений, оскільки області вмісту слід надати повну ширину. Дослідження читання показали, що користувачі інтуїтивно починають шукати нову та важливу інформацію ліворуч, і, отже, більше шансів утриматися від навігації.
Перевага цього типу навігації полягає в тому, що довгі посилання можуть бути легко інтегровані, і вони не можуть бути розміщені в горизонтальній навігації. Ще одним плюсом є те, що його можна легко розширити вниз, але після кількох змін він може швидко стати занадто довгим і заплутаним. Тому обидві переваги криють небезпеку ускладнення навігації та ускладнення її використання.
Екскурс: приховати елементи (альтернативи для відображення: немає) [редагувати]
Приховування підменю з дисплеєм: немає; (і затухання з display: block;) слід уникати, оскільки це приховує вміст для користувачів програми читання з екрана.
Альтернативою є відкриття підменю з полем ліворуч: -9999px; рухатися за межі видимої області і знову влітати звідти. Однак браузер тоді створює невидимий, але величезний елемент, який негативно впливає на продуктивність сторінки.
Іншим способом може бути зробити підменю невидимим за допомогою відступу тексту:
Перевага полягає в тому, що текст завжди витікає з елемента і тому ніколи не може виступати навіть при довгих текстах, і що контейнер розміром 9999 пікселів не потрібно малювати. Продуктивність значно краща, особливо на мобільних пристроях.
Третя можливість переміщує пункт меню з від’ємним z-індексом за сторінку. Щоб він фактично зник, йому надається нульовий розмір шрифту.
Висновок [редагувати]
Ви можете керувати і керувати навігацією, представленою тут, за допомогою миші. За допомогою клавіатури ви можете контролювати лише відображувані посилання, але не приховані посилання.
Ви можете досягти дійсно доступного варіанту лише за допомогою JavaScript: