3 levels horizontaal menu

[VincentG]

Ben aan het zoeken geweest, maar niet tot een geschikte oplossing gekomen. Ik zoek namelijk een CSS menu met drie rijen/levels, horizontaal dus. Vele menu's gaan maar tot twee rijen of heb een verticaal dropdown menu.
Voorbeeldje is die van Tweakers.

Op Dhtmlgoodies staat een mooi menu, zie voorbeeld (code).

Een ander menu bevat dropdowns, voorbeeld. Nou is het volgens mij wel mogelijk om de CSS aan te passen en er 3 horizontale rijen van te maken. In beide gevallen moet de style toch flink aangepast worden, omdat op de uiteindelijke pagina tekstuele links te zien zijn zonder 'tab'-style eromheen.
Probleem van dit menu is dat die enkel uitklapt bij hover actie. Als je op een subpagina komt, zie je enkel top bar en niet meer de een of twee rijen eronder.
Hier valt enigzins mee te leven, door kruimelpadnavigatie te behouden, maar eerste voorbeeld in 3 lagen is toch beter qua usability.

Er zitten behoorlijk wat links op de pagina, waardoor het wel nodig is om die in meerdere lagen te delen. Niet elke laag heeft overigens een sublaag (net als bij Tweakers bijv).

Heb het script van eerste voorbeeld als basis genomen en geprobeerd aan te passen, maar dit wil nog niet erg lukken (ben niet zo gedreven in JS).
Zoals te zien op deze testpagina, gaat het nog niet goed met de 3de rij en heeft nu ook de 2de rij kuren.

Iemand een goed alternatief, of weet wat er nog meer in het script aangepast (of verbeterd) moet worden? Kan iig zijn dat CSS nog niet helemaal klopt, maar denk dat JS code een groter probleem is.

[DiSiLLUSiON]

Hohoho, even een paar stappen terug!

Even een paar kleine feiten:
1: De gemiddelde mens heeft een onderscheidend vermogen van 7 onderdelen. Meer onderdelen dan dat en het overzicht gaat verloren.
2: Hoe minder klikken, hoe beter.
3: Horizontaal onder elkaar geplaatste onderdelen zijn duidelijker dan verticaal naast elkaar geplaatste onderdelen.
4: Een mouseover menu van meerdere rijen maakt het pad dat de cursor moet volgen onnodig ingewikkeld en erg lastig voor mensen met motoriekproblemen.

Ik zou allereerst eens gaan kijken naar wáárom je denkt 3 levels nodig te hebben. Dat duidt namelijk op een te ingewikkelde boomstructuur; 3 is simpelweg te veel. Bekijk deze eerst eens opnieuw; werk een aantal navigatiemogelijkheden uit en kijk welke het overzichtelijkst is.

Je zou de sub-items onder 'Product 1' bijvoorbeeld onder kunnen brengen in een ándere navigatie, terwijl de hoofdnavigatie op 'Product 1' blijft staan.

[Verwijderd]

Hier een horizontal fly-out die 3 niveau's aankan. Bovendien de moeite waard om deze site 3x te bookmarken

http://www.cssplay.co.uk/menus/flyoutt.html

Kijk ook eens naar: http://www.cssplay.co.uk/menus/pro_dropline.html (wel horizontaal, maar erg nice)

edit: bovendien zijn al zn menu's CSS only! Dus ook toegankelijk voor mensen zonder JS (of met JS uit)

[ Voor 16% gewijzigd door Verwijderd op 23-10-2008 21:49 ]

[VincentG]

DiSiLLUSiON schreef op donderdag 23 oktober 2008 @ 20:29:
Hohoho, even een paar stappen terug!

Even een paar kleine feiten:
1: De gemiddelde mens heeft een onderscheidend vermogen van 7 onderdelen. Meer onderdelen dan dat en het overzicht gaat verloren.
2: Hoe minder klikken, hoe beter.
3: Horizontaal onder elkaar geplaatste onderdelen zijn duidelijker dan verticaal naast elkaar geplaatste onderdelen.
4: Een mouseover menu van meerdere rijen maakt het pad dat de cursor moet volgen onnodig ingewikkeld en erg lastig voor mensen met motoriekproblemen.

Ik zou allereerst eens gaan kijken naar wáárom je denkt 3 levels nodig te hebben. Dat duidt namelijk op een te ingewikkelde boomstructuur; 3 is simpelweg te veel. Bekijk deze eerst eens opnieuw; werk een aantal navigatiemogelijkheden uit en kijk welke het overzichtelijkst is.

Je zou de sub-items onder 'Product 1' bijvoorbeeld onder kunnen brengen in een ándere navigatie, terwijl de hoofdnavigatie op 'Product 1' blijft staan.

1. Klopt, vandaar dat we met submenu's werken. Hoofdmenu bevat 8 items, submenu wat minder en subsubmenu nog wat minder. De menu's zijn zo logisch mogelijk ingedeeld. Tevens gaat het om een CMS, waar we een waslijst aan opties hebben, en er steeds meer opties bijkomen. Op den duur lukt dat niet meer met 2 levels. We hebben nu een verticaal menu met 2 levels, waarbij het overzicht al snel verloren gaat en dan komen er nog opties bij of moet je in een sublevel verder klikken. Bijkomend voordeel is wel dat de mensen die dagelijks met het CMS werken het menu en de mogelijkheden wel kennen. Is wat anders dan een publiekelijke site met vele (oude en nieuwe) bezoekers.

2. Klopt ook. Vandaar hover / mouse-over functie. Dan hoef je enkel op de uiteindelijke link echt te klikken. Nu gaan we nog tot 2 levels en moet je daar verder klikken. Qua kliks blijft het dus gelijk of gaan we er op vooruit (losstaand van de hover acties voor de klik).

3. Horizontaal vind ik ook wat geschikter, vandaar dat we nu op horizontaal over stappen (huidig menu is verticaal). Komt voor ons ook wat beter uit met het content vlak, waar we nu wat meer ruimte en speling / mogelijkheden mee hebben.

4. Bij mouse-over acties zit je inderdaad met een mogelijke afname van de usability. Op sommige sites is het menu erdoor (in sommige browsers) bijna onbruikbaar geworden. Voordeel is, is dat het menu voor een beperkte groep mensen is (CMS, dus enkel voor een select groepje crewleden) en dat deze hier wel mee op kunnen gaan. Een menu met JS is wat dat betreft prettiger om te navigeren, omdat je menu niet gelijk verdwijnt als je er even naast zit, wat je wel hebt met enkel CSS. Daarbij zit er genoeg marge tussen de links om zonder problemen op het juiste pad te moeten kunnen blijven.

---

@ Bo-oz:
De fly-out menu heb ik in mijn startpost als voorbeeld gegeven, maar dan met bovenste level horizontaal.
Die ander is ook mooi, met die horizontale menu's en dat je blijft zien waar je op zit, maar mist de 3de rij. Ik ga er iig naar kijken, of ik die uit kan breiden.

Edit:
Een zelf geschreven eenvoudig stukje javascript lijkt al aardig te werken. Menu van Boaz, zonder JS, lijkt ook goed te werken en uit te breiden naar 3 levels.

Edit2:
Met wat hulp heb ik het werkend gekregen. Misschien niet de mooiste oplossing, maar hij werkt en is relatief beperkt qua code.
Ander menu geprobeerd, maar bleek toch niet helemaal goed te werken en resulteerde in een grote lap code.
Moet hem nu nog wat aanpassen, zodat de actieve link een eigen style heeft.

[ Voor 6% gewijzigd door VincentG op 24-10-2008 15:19 ]