Felzárkóztató: a "hover", magyarra fordítva "lebegés". A web dizájnban arra a jelenségre utal, amikor az egér mutató valamilyen elem felett áll. Ilyen módon funkciókat rendelhetünk hozzá. Például: ha az egér mutató a sárga gomb felett hoverezik, akkor a gomb színe váltson pirosra.
Itt egy egyszerű példa: Codepen
Az érintőképernyők berobbanásával észben kell tartani, hogy hiába vonzó és kézenfekvő a hover, sajnos már csak úgy szabad rá gondolni, mint egy "nice to have". Legalábbis, ha olyan funkciót rendelünk hozzá, ami kulcsfontosságú az oldal kezeléséhez. Jó példa erre a legördülő menü, aminek megjelenítése rengeteg oldalon hoverhez kötött. Meghagyhatjuk a hovert a hagyományos eszközöket használóknak, de mindenképpen kell egy érintésbarát megoldás is.
Szerencsére a klikkelés és az érintés nem számít külön akciónak, habár a HTML5-ben van lehetőség összetettebb touch event-ek beállítására. Például csúsztatás, elhúzás (swipe), vagy akár több ujjas mozdulatok.
A hover kiválására elegendő lehet egy sima klikken alapuló beállítás. A legördülő menü esetében viszonylag egyszerű dolgunk van, hiszen a JQuery támogatja a klikkeléshez rendelt funkciókat. Ebben az esetben a .toggleClass tűnik a legkézenfekvőbb megoldásnak. Ez képes váltogatni az adott elemhez rendelt class-okat, ilyen módon egy display:none beállítású class tudja előhívni, majd újabb klikkre elrejteni az adott legördülő menüt. Persze lehet rajta szépíteni és variálni innen, de a lényeg, hogy elértük, hogy a lehető legszélesebb közönségnek tegyük elérhetővé a navigációt.
Hozzá kell tennem, háromszor is gondold át, hogy tényleg szükség van e arra a legördülőre. Conversion rate szempontjából nem biztos, hogy az a hatásos, ha sok lehetőséget zúdítunk a felhasználóra, illetve nem biztos, hogy mindennek egy menüben kell lennie.
