HTMLTutorialsNavigationDropdown Menu - SELFHTML Вики
Информации за овој текст
Во ова поглавје ќе научите функционалност паѓачка навигација што може да се отвори и затвори со глувчето и тастатурата. Тоа се прилагодува одговорено на сите прегледи.
Содржина
Менија со неколку (вгнездени) нивоа [Уреди]
Во многу случаи, навигациите во поголемите веб-проекти не содржат последователен список на врски, но ги дистрибуираат на различни нивоа на навигација.
вгнездени списоци [уреди]
Вгнездени листи се погодни за логично пресликување на оваа структура.
Дури и без CSS, структурата на вметнатите списоци е многу јасна преку преференциите на прелистувачот.
Сите врски можат да бидат избрани со тастатурата.
Прелет или паѓање? [За уредување]
Во времето на совршен изглед на пиксели, сега имаше две варијанти:
- Со мени за испорака, подменијата „летаат“ хоризонтално од вертикалната структура надесно
- Со паѓачко мени, подменијата „паѓаат“ вертикално од хоризонталниот ред
Сокриј го подменито [уредување]
Карактеристика на паѓачкото мени е тоа што подменито е скриено во првобитната состојба и е избрано и видливо само при избор со глувчето преку псевдо класа: лебди или со тастатура преку: фокус.
Наведете ги елементите што содржат подмени како детски елемент даден е табендекс = "0" за да можат да бидат ставени во табулаторот.
Кога е избрано со глувчето или тастатурата, се прикажува подменито; следниве ставки од списокот се лизгаат надолу.
.е избрано подменито, подменито се прикажува веднаш штом е избрана првата ставка од списокот, но повторно е скриено.
Варијанта управувана со допир и тастатура може да се постигне само со JavaScript:
вертикално мени за летање [Уреди]
Ова мени може да се претвори во вертикално мени за летање во неколку едноставни чекори:
Не користејќи nav li, елементите од менито се распоредени една под друга. Апсолутната позиција на nav ul ul е иста како и горната: -0,4em; полнењето на матичниот елемент и се остава: 8em; позициониран десно од матичниот елемент.
Овој вид навигација денес е малку намуртен, бидејќи на содржината треба да му се даде целосна ширина. Студиите за читање покажаа дека корисниците интуитивно започнуваат да бараат нови и важни информации од левата страна и затоа се со поголема веројатност да бидат спречени од навигацијата.
Предноста на овој вид навигација е тоа што долгите врски можат лесно да се интегрираат што не може да се сместат во хоризонтална навигација. Друг плус е што лесно може да се прошири надолу, но по неколку промени брзо може да стане предолг и збунувачки. И двете предности имаат опасности од правењето навигација збунувачка и тешка за употреба.
Excursus: Сокриј елементи (алтернативи за прикажување: нема) [уреди]
Сокривање на подменијата со приказ: нема; (и бледнее со приказ: блок;) треба да се избегнува затоа што ова ја крие содржината за корисниците на читачи на екран.
Алтернатива е да се отворат подменијата со маргина лево: -9999px; да се движат надвор од видливата област и повторно да летаат од таму. Сепак, прелистувачот потоа создава невидлив, но огромен елемент, што има негативно влијание врз перформансите на страницата.
Друг начин може да биде под-менито да стане невидливо со текст-вовлекување:
Предноста е во тоа што текстот секогаш се оддалечува од елементот и затоа никогаш не може да излегува дури и со долги текстови и дека не треба да се извлече контејнер од 9999px. Перформансите се значително подобри, особено на мобилните уреди.
Трета опција ја поместува изборната ставка зад страницата со негативен z-индекс. За да исчезне, дадена е нултата големина на фонт.
Заклучок [уреди]
Можете да ги контролирате и ракувате со навигациите презентирани овде со глувчето. Со тастатурата можете да ги контролирате само прикажаните врски, но не и скриените врски.
Можете да постигнете навистина достапна варијанта само со JavaScript: