Vytváříme menu webu

Pavel Salvet  /  15. 10. 2008, 09:47

Toto téma je určeno těm, kteří se snaží optimalizovat svůj web v první řadě pro lidi a kteří pokládají přehlednou a přístupnou navigaci za jednu ze základních priorit dobrého webu. Právě jim by se možná mohlo pár primitivních tipů a triků na praktické menu hodit.

Handicapovaní uživatelé

Menu na webové stránce je spolehlivým zdrojem nenávisti uživatelů, kteří jsou odkázáni na hlasové čtečky – tedy nevidomých a slabozrakých. Menu je totiž často v kódu umístěno na začátku, což znamená, že se čte nejdřív. Podobným způsobem může menu zkomplikovat přístup k obsahu i nehandicapovaným uživatelům, když si webové stránky prohlížejí svým mobilním telefonem a musejí se ze začátku „prokousávat“ blokem odkazů. Proto by bylo vhodnější přemístit jej až za obsah. Tím se sice usnadní, zvláště v případě rozsáhlého menu, cesta k vlastnímu obsahu stránky, ovšem co když uživatele obsah dané stránky nezaujme. Jak se potom dostane k menu, umístěnému až někde na konci? Překvapivě snadno – použitím tabulátoru, který ho přenese na první odkaz. Jenže co když i text překypuje odkazy nebo formulářovými prvky. S tím tabulátorem to asi nebude vždy tak jednoduché. Nejjistější bude, když se někam na začátek vloží vnitřní odkaz „Přejít na menu“. Když jej uživatel využije, dostane se přímo na menu. Jenže většina uživatelů takový odkaz nepotřebuje, takže jim jen překáží. Dal by se před nimi skrýt? No ovšem, zde je kód:

@media screen,projection {
#bf a {position: relative; top: -99em}
#bf a:focus,#bf a:active {top:0} /* tabulátor vrátí odkaz na viditelné místo */
}
...
<div id="bf"><a href="#menu">Přejít na menu</a></div>

V principu jde o to, odsunout odkaz někam pryč mimo obrazovku nebo ho něčím zakrýt, aby nebyl vidět (display: none ani visibility: hidden nelze použít, protože by odkaz zůstal ukryt i před čtečkou). Existuje i alternativní řešení, které ovšem není tak ideální. Menu se v kódu umístí klasicky před obsah, přičemž první položka menu bude mít název „Skočit na obsah“, nebo „Přeskočit menu“ a bude obsahovat vnitřní odkaz na začátek vlastního obsahu stránky. Tuto položku bude vhodné opět před většinou uživatelů skrýt, protože jim k ničemu není.

Zdroj: Přístupnost (blog Davida Špinara)

Popisky odkazů

Někdy je opravdu obtížné najít pro menu stručné a výstižné názvy odkazů. Stručné musí být každopádně. Bude-li některé menu obsahovat např. odkaz na přednášku o transformaci československé ekonomiky, správný přístup bude asi takový, že se pro daný odkaz použije označení „Přednáška“, nebo „Transformace“ a k odkazu se přiřadí atribut title opatřený konkrétnějším popiskem, z něhož bude dostatečně zřejmé, nač se odkazuje. Tento správný přístup má však minimálně jednu slabinu. Popisek se zobrazí teprve s určitým časovým odstupem. Jenže uživatel málokdy čeká, až a zda vůbec se mu nějaký popisek objeví. Je tedy potřeba přijít s vlastním řešením, pomocí něhož by se popisek ukázal ihned poté, co by uživatel projevil o odkaz zájem. Možná by to šlo udělat nějak takto:

menu span {
display: none
}

menu a:hover+span {
width: 15em;
position: absolute;
left: 35%;
border: 1px solid gray;
background-color: silver;
display: block
}

<menu>
<li><a href="#">Přednáška 2</a><span>popisek</span></li>
<li><a href="#">Přednáška 3</a><span>popisek</span></li>
</menu>

Rozbor HTML kódu

Každá položka menu obsahuje odkaz a popisek odkazu. Odkaz je reprezentován elementem a, popisek elementem span.

Rozbor CSS kódu

Každý element span, který je uvnitř menu, je vyjmut z toku dokumentu. Není tudíž ani zobrazen. Avšak po najetí kurzorem nad příslušný element a, je zformován do podoby absolutně pozicovaného šedého bloku o šířce 15 em a zobrazen.

IE 6 a menší

Staré verze IE nepodporují selektor následníka, což bohužel znamená, že popisek nezobrazí ani po najetí kurzorem myši nad příslušný odkaz. Existují v podstatě dvě možnosti, jak se s tím vypořádat:

  1. Ignorovat to. Podíl těchto verzí brzy přestane být významný. Navíc popisek u odkazu není určitě nic nezbytného.
  2. Pomoci si JavaScriptem. Zásluhou tzv. podmíněných komentářů se může upotřebit právě jen pro staré verze IE.
    <!--[if lt IE 7]><script type="text/javascript" src="popisky.js"></script><![endif]-->

Fixní pozice menu

U každé jen trochu delší stránky se stane, že poté, co se uživatel posune kousek dolů, dostane se menu z viditelné oblasti (takzvaného viewportu) a uživatel, aby ho mohl použít, musí se poslušně vrátit zase nahoru. Dá se tomu zabránit tak, že se pro menu stanoví fixní pozice (position: fixed). Díky tomu se bude menu na stránce posouvat, a i když bude uživatel scrollovat jako ďas, bude mít menu „přibité“ pořád na jednom místě. Bohužel ve většině případů takovéto řešení nelze uplatnit, jelikož fixně pozicovaný prvek je vyjmut z toku dokumentu a zobrazen zcela autonomně, což znamená, že jeho umístění není ovlivněno žádným z nadřazených prvků. Naopak menu je obvykle koncipováno jako součást layoutu, v němž má vyhrazen určitý prostor, a kvůli zmíněnému nesouladu není ve většině případů možné zajistit za všech okolností napozicování menu do onoho prostoru.

Překážky aneb proč fixně pozicované menu raději ne.

  • Vzhledem k výše uvedenému se může přihodit, že menu bude posunuto ze svého prostoru a bude zakrývat třeba nějaký text.
  • Může se stát, že se menu nevejde do viewportu úplně celé a některé položky nebudou kvůli tomu vidět.
  • IE 6 neumí fixní pozicování, použila by se statická pozice, nebylo-li by předdeklarováno jinak.

Zabezpečit se proti popsaným komplikacím není jednoduché, nicméně s přispěním javascriptu by se to mohlo podařit. Fixní pozicování by však určitě nemělo být výchozím řešením, už kvůli IE 6. Teprve poté, co by se spočítalo, že se menu opravdu vejde do viewportu, nastavila by se mu fixní pozice. Ilustruje to následující kód.

function setPos()
{
var dostupna_sirka=(window.innerWidth)? window.innerWidth : document.body.clientWidth;
var dostupna_vyska=(window.innerHeight)? window.innerHeight : document.body.clientHeight;
var coords=findPos(nav);
if (dostupna_sirka>nav.offsetWidth+coords[0] && dostupna_vyska>nav.offsetHeight+coords[1])
{
nav.style.left=coords[0]+"px";
nav.style.top=coords[1]+"px";
nav.style.position="fixed"
}
else
{
nav.style.position="static"
}
}

window.onload=function() {
nav=document.getElementsByTagName("menu").item(0);
setPos()
}
window.onresize=setPos;

Předložený kód slouží jen pro názornost a inspiraci, je zhola zbytečné jej kopírovat, protože jej nebude možné bez patřičné úpravy a doplnění použít.

Zbývá dodat

Všechny popsané triky jsou předvedené na ukázkové stránce. Další stručné návody, jak si uzpůsobit menu jsou k nalezení v Knihovně CSS.

Menu webu se vyplatí věnovat náležitou péči nikoliv jen z hlediska technického, ale především z hlediska samotné koncepce. Menu slouží k tomu, aby se návštěvníci na daném webu, co nejlépe zorientovali a rychle našli to, kvůli čemu přišli. Uživatelé totiž neradi přemýšlejí. Rozsáhlé nestrukturované menu nebo nepříliš výstižné názvy odkazů je spolehlivě odradí. Také jsou velmi netrpěliví. Ze studií vyplývá, že pokud se po několika kliknutích uživatel nedostane k tomu, co hledá, odchází jinam.

Když už je řeč o studiích - zajímavým způsobem, jak sledovat chování uživatelů, je eye-tracking. (Kdo netuší, co tento pojem znamená, nechť si „vygooglí“ nějaké obrázky pro jasnější představu.) A z něj vyplývá, že v mnoha případech je menu jednou z nejpozorovanějších částí stránky!

Neprehliadnite: