Autor Zpráva
liborse
Profil
Dobrý den, (pokud je tu podobný odkaz, moc se omlouvám, ale hledal jsem i zde...)

na jednom poměrně rozsáhlém projektu nyní pracuji na responzivní verzi. Omlouvám se za absenci odkazu. Menu je řešeno poměrně standardně (hover po najetí, odrážková struktura). Menu je řešeno horizontálně s tím, že každá položka obsahuje podpoložky (další úroveň není). Pokud člověk najede nad některou z hlavních položek (ty, co jsou vidět), rozbalí se mu roletka a může si vybrat. Nicméně *zároveň* má možnost kliknout i na tu "hlavní" nadřazenou položku, která zobrazí články ze všech podpoložek. Problém nastává v případě dotykových obrazovek a na mobilech. Hledal jsem různě na internetu, pátral ve svých znalostech, ale řešení se nějak nechce ukázat. Weby dělám dlouho, ale responzivitu a dotyk řeším až v poslední době a na svých projektech mám menu řešeno jinak (hlavní položka je jen rozcestník). Zde ale nemohu dělat zásadnější změny, které zasáhnou do obsahu apod. Prostě nyní když klinu na hlavní položku, jsem hned přesměrován do ní, nezobrazí se mi roletka, jedině že na hlavní položce podržím prst a pak přejedu do roletky. To nikoho nenapadne. ;) Přemýšlel jsem nad něčím jako ontouchstart="return false", ale pak by odkaz nešel rozkliknout, zato roletka by se rozbalila. Pak mě napadlo, že kdyby člověk ještě jednou kliknul, na odkaz by se dostal (měnil bych stavy pomocí proměnných). To ale moc standardně nevypadá. Další možností by bylo pro menší obrazovky zrušit styly a bylo by to řešeno přes ono známé tlačítko "menu", pak by se zobrazilo vše strukturovaně a uživatel by si vybral. Jenže to není řešení pro 24palcovou obrazovku.

Jistě to má lehké řešení, jen já jsem natvrdlý asi. Díky za každý tip.


No, tak možná ten můj nápad se stavy není úplně mimo, viz. osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
Keeehi
Profil
liborse:
Další možností by bylo pro menší obrazovky zrušit styly a bylo by to řešeno přes ono známé tlačítko "menu", pak by se zobrazilo vše strukturovaně a uživatel by si vybral. Jenže to není řešení pro 24palcovou obrazovku.
A je snad problém to mít na jedné velikosti tak a na jiné jinak?
liborse
Profil
Keeehi:
Zde jsem narážel na to, že řešení menu přes tlačítko by bylo řešení pro dotykové displeje, ale ne pro dotykové displeje na 24 palcích, tam by to bylo vysoce nevhodné. ;) Je na tom něco nesrozumitelného? Na problém ukazuje krásně odkaz, co jsem přiložil. To řešení je podle mě elegantní. Odkaz tu nechám, aby podobní hledači jako já rychle našli. Já tedy nepoužiji jquery, ale prostý js, hrozily by tam nějaké konflikty a na stránce nechci mít milion js skriptů, ač jquery jinde používám.

Snad už mi rozumíte?
Chamurappi
Profil
Reaguji na liborse:
Velmi podobný problém tu už proběhl před týdnem.

Postupoval bych tak, že bych z položky <li> v hlavním menu, která má podmenu, vyvedl absolutně pozicovaný pseudoelement :after tak, aby překryl odkaz. Tím pádem by ťuknutí na místo hlavního odkaz mělo vyvolat :hover (nebo :focus nebo něco takového) a rozbalit podmenu bez toho, aby se hlavní odkaz proklikl. Hlavní odkaz by v takovémto stavu nešel prokliknout nikdy.

Při rozbalení podmenu bych z toho hlavního odkazu přes :after vyvedl náhradní prokliknutelný blok, který by měl svůj text (v contentu) a vizuálně by připomínal položku v podmenu.
liborse
Profil
Chamurappi:
No, tak to je má ostuda, že jsem to přehlédl. Sice jsem hledal, ale asi ne moc dobře. Zajímavé je, že tam odkazují na osvaldas jako já zde. Každopádně díky za moc zajímavě znějící řešení. Čím méně JS, tím budu raději. Téma si pročtu a už to tu nebudu zahlcovat. Díky moc.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: