HTMLTutorialsNavigationDropdown Menu - SELFHTML Wiki
Информация за този текст
В тази глава ще научите функционалност падаща навигация, която може да се отваря и затваря с мишката и клавиатурата. Адаптивно се адаптира към всички изгледи.
Съдържание
Менюта с няколко (вложени) нива [Редактиране]
В много случаи навигациите в по-големи уеб проекти не съдържат последователен списък с връзки, но ги разпределят на различни нива на навигация.
вложени списъци [редактиране]
Вложените списъци са подходящи за логическото картографиране на тази структура.
Дори и без CSS, структурата на вложени списъци е много ясна чрез предпочитанията на браузъра.
Всички връзки могат да бъдат избрани с клавиатурата.
Flyout или падащо меню? [ Редактирам ]
По времето на перфектното оформление на пикселите вече имаше два варианта:
- С менюто за излитане подменютата „летят“ хоризонтално от вертикалната структура вдясно
- При падащо меню подменютата „падат“ вертикално от хоризонталния ред
Скриване на подменюто [редактиране]
Характеристика на падащото меню е, че подменюто е скрито в първоначалното си състояние и се избира и прави видимо само при избиране с мишката чрез псевдо класа: hover или с клавиатурата чрез: focus.
Елементите на списъка, които съдържат подменю като дъщерен елемент, получават tabindex = "0", за да могат да бъдат табулирани.
Когато се избере с мишката или клавиатурата, се показва подменюто; следните елементи от списъка се плъзгат надолу.
.подменюто е избрано, подменюто се показва веднага след като е избран първият елемент от списъка, но отново е скрито.
Вариант с докосване и клавиатура може да бъде постигнат само с JavaScript:
вертикално меню за излитане [Редактиране]
Това меню може да бъде превърнато във вертикално меню с няколко прости стъпки:
Като не използвате nav li, елементите от менюто са подредени един под друг. Абсолютната позиция на nav ul ul е същата като горната: -0.4em; подплънката на родителския елемент и се оставя: 8em; позициониран вдясно от родителския елемент.
Днес този тип навигация е донякъде намръщен, тъй като зоната на съдържанието трябва да получи цялата ширина. Проучванията на четенето показват, че потребителите интуитивно започват да търсят нова и важна информация отляво и по този начин е по-вероятно да бъдат възпрепятствани от навигация.
Предимството на този тип навигация е, че дългите връзки могат лесно да се интегрират, които не могат да бъдат настанени в хоризонтална навигация. Друг плюс е, че той може лесно да бъде разширен надолу, но след няколко промени бързо може да стане твърде дълъг и объркващ. Поради това и двете предимства крият в себе си опасностите, които правят навигацията сложна и трудна за използване.
Excursus: Скриване на елементи (алтернативи за показване: няма) [редактиране]
Скриване на подменютата с дисплей: няма; (и избледняване с display: block;) трябва да се избягва, защото скрива съдържанието за потребителите на екранен четец.
Алтернатива е отварянето на подменютата с поле вляво: -9999px; да се придвижва извън видимата зона и да лети отново от там. След това браузърът създава невидим, но огромен елемент, който има отрицателно въздействие върху работата на страницата.
Друг начин може да бъде да направите подменюто невидимо с отстъп на текст:
Предимството е, че текстът винаги изтича от елемента и следователно никога не може да изпъква дори при дълги текстове и че не трябва да се изчертава контейнер с размер 9999px. Ефективността е значително по-добра, особено на мобилни устройства.
Трета опция премества елемента от менюто зад страницата с отрицателен z-индекс. Така че всъщност да изчезне, му се дава размер на шрифта нула.
Заключение [редактиране]
Можете да контролирате и управлявате представените тук навигации с мишката. С клавиатурата можете да контролирате само показваните връзки, но не и скритите връзки.
Наистина достъпен вариант може да се постигне само с JavaScript: