[CSS] Suckerfish menu met meerdere lagen

[Nixsos]

Ik probeer een suckerfish menu met meerdere sub items te maken, zoals in deze tutorial: http://www.htmldog.com/articles/suckerfish/dropdowns/

Dit is het resultaat tot nu toe:
http://jcai.nl/suckerfish/

Echter wil ik een paar extra functies hebben. Zo wil ik bijvoorbeeld dat de eerste laag (de horizontale balk) zich aanpast aan de breedte van de menu items. Ook wil ik graag dat de huidig geselecteerde item een kleurtje heeft (en alle items die daaronder zitten ook gekleurd zijn).


Tot nu toe heb ik dit voor elkaar gekregen, maar het lukt me maar niet om de bla items naast de sub items te krijgen, die zouden namelijk daarnaast moeten uitklappen en niet er onder.

Source code van wat ik tot nu toe heb kan je hier downloaden:
http://jcai.nl/suckerfish/suckerfish.zip

Kan iemand mij helpen?

[Blaise]

Zo wil ik bijvoorbeeld dat de eerste laag (de horizontale balk) zich aanpast aan de breedte van de menu items.

Ik geloof niet dat er een trucje is voor het erven van de breedte. Je zou het handmatig kunnen doen door classes aan de parent <li>'s te hangen, en de breedte aan te geven per class.

Ook wil ik graag dat de huidig geselecteerde item een kleurtje heeft (en alle items die daaronder zitten ook gekleurd zijn).

Pas bij de juiste :hovers en .suckerfish'es de color en/of background-color aan.

maar het lukt me maar niet om de bla items naast de sub items te krijgen

Voeg dit onderaan je CSS toe.

Cascading Stylesheet:

#mainnav li li:hover ul,
#mainnav li li.suckerfish ul{
    left: 100px;
    top: -1px;
}

[job]

Kijk eens naar "son of suckerfish" die kan de bla items naast de sub items zetten.


edit: Aah verrek, die gebruik je al (aan de link in je startpost te zien).
Dan moet het een eitje zijn om aan de praat te krijgen... onderaan staan een paar examples.
two level example zou je dan naar kunnen kijken.

[ Voor 67% gewijzigd door job op 21-10-2007 13:13 ]

[Nixsos]

Geweldig, de code van Blaise werkt perfect!
Erg voor de hand liggend eigenlijk, maar enorm bedankt!

[dik_voormekaar]

job schreef op zondag 21 oktober 2007 @ 13:08:
Kijk eens naar "son of suckerfish" die kan de bla items naast de sub items zetten.


edit: Aah verrek, die gebruik je al (aan de link in je startpost te zien).
Dan moet het een eitje zijn om aan de praat te krijgen... onderaan staan een paar examples.
two level example zou je dan naar kunnen kijken.

Ja, is allemaal erg browser afhankelijk.
Bij mij op de ene staan de bla items wel naast de sub, op de andere niet.
Beide comps hebben IE6, alleen is een ervan nooit geupdated.

[bartgabriels]

niet geheel on topic, mar hoe kan je in hemelsnaam bij bijvoorbeeld Menu 3, Sub Menu 3 selecteren ??

Als ik over de navigatie ga, krijg ik automatisch de onderverdeling bij Sub Menu 1 ...

[BCC]

bartgabriels schreef op dinsdag 23 oktober 2007 @ 09:01:
niet geheel on topic, mar hoe kan je in hemelsnaam bij bijvoorbeeld Menu 3, Sub Menu 3 selecteren ??

Als ik over de navigatie ga, krijg ik automatisch de onderverdeling bij Sub Menu 1 ...

Ik vermoed dat IE6 ze er rechts naast zet. In Firefox is dit menu onbruikbaar. Misschien iets dat je wil meenemen bij het maken van je site

[Petuhr]

bartgabriels schreef op dinsdag 23 oktober 2007 @ 09:01:
niet geheel on topic, mar hoe kan je in hemelsnaam bij bijvoorbeeld Menu 3, Sub Menu 3 selecteren ??

Als ik over de navigatie ga, krijg ik automatisch de onderverdeling bij Sub Menu 1 ...

Zelfde probleem hier ja ( opera 9.20 )

[bartgabriels]

BCC schreef op dinsdag 23 oktober 2007 @ 09:10:
[...]

Ik vermoed dat IE6 ze er rechts naast zet. In Firefox is dit menu onbruikbaar. Misschien iets dat je wil meenemen bij het maken van je site

In IE7 werkt het alvast ook niet.

[Nixsos]

Er bleek inderdaad nog een fout in de fix te zitten.

In plaats van een top, heb ik nu een margin-top gebruikt en nu klapt het menu wel op de goede plek uit.
Het is inderdaad de bedoeling om een menu te maken die in zoveel mogelijk browsers werkt. (Ik ontwikkel standaard in Firefox). Hopelijk kan deze post andere mensen helpen bij het maken van een mooi suckerfish menu.

Ik heb de fix online gezet en getest op een paar browsers. (zie: http://jcai.nl/suckerfish/)

De code is ook weer te downloaden op http://jcai.nl/suckerfish/suckerfish.zip.

Het is misschien leuk als er ook nog op een Mac met Safari getest kan worden.
Safari onder windows gaf nog problemen. Ook Internet Explorer 5.5 heeft nog een klein display foutje.

Andere suggesties zijn natuurlijk ook welkom!

[dik_voormekaar]

Bij mij werkt ie nu met beide IE6'en en ook m'n desktop met IE7
Eerst klapte het 2e submenu niet lager uit, nu wel, en ook dus er naast.