[javascript] suckerfish-like menu

[kaesve]

lieve tweakers,

Ik moet voor een klein projectje een design realiseren, maar loop daarbij tegen een probleem aan bij het menu. het design-team wilt ergens een multilevel-suckerfish-achtig menuutje hebben, maar in plaats van uitklappen on mouseover (of liever :hover) willen ze percee het uitvouwen pas triggeren bij een onclick.

hoewel ik niet zo goed overweg kan met javascript dacht ik dit probleem op te kunnen lossen door een nested ul structuur te maken en daarna met javascript elk li element een onclick functie te geven.
dit werkt in principe. echter. als ik nu op een li-element klik, triggerd hij niet alleen de onclick van zichzelf, maar ook van alle parent-elementen, wat resulteert in het openvouwen van het element dat je aanklikte en het dichtvouwen van zijn parent elementen..

ik heb even een test-case gemaakt die hier te bezichtigen is.

[Noork]

Waarom gebruik je niet iets bestaands? Jquery Suckerfish bv? Jouw script werkt sowieso niet in Opera.

[ Voor 21% gewijzigd door Noork op 19-06-2009 16:08 ]

[kaesve]

omdat alle bestaande versies die ik vinden kan alleen werken met een mouseover ipv mouseclick.. zodra ik ze probeer aan te passen naar een onclick werken ze allemaal niet meer..
daarbij heb ik nog maar weinig ervaring met zulke libraries en op het moment niet de tijd om me erin te verdiepen.

wat werkt er niet aan in opera?
edit// net opera maar even geinstalleerd ;0
hij blijkt niks te kunnen met items.length.. dan maar zonder
edit2// hij doet het nog niet D:

[ Voor 16% gewijzigd door kaesve op 19-06-2009 16:27 ]

[tonyisgaaf]

Zoek eens op "preventDefault" en "stopPropagation". Dat zal je helpen bij het child/parent event doorgeef verhaal.
Daarnaast zijn er voor verschillende browsers verschillende manieren om te checken op welk element daadwerkelijk werd geklikt en aan welk element het event daadwerkelijk hangt, dus daar wil je wellicht een library voor gebruiken.

[Gersomvg]

kaesve schreef op vrijdag 19 juni 2009 @ 16:14:
omdat alle bestaande versies die ik vinden kan alleen werken met een mouseover ipv mouseclick.. zodra ik ze probeer aan te passen naar een onclick werken ze allemaal niet meer..
daarbij heb ik nog maar weinig ervaring met zulke libraries en op het moment niet de tijd om me erin te verdiepen.

wat werkt er niet aan in opera?
edit// net opera maar even geinstalleerd ;0
hij blijkt niks te kunnen met items.length.. dan maar zonder
edit2// hij doet het nog niet D:

Dat is toch puur een kwestie van $('element').mouseover() veranderen in $('element').click() ?
Dan ben je het misschien gewoon nog op een paar plaatsen vergeten..

[ Voor 4% gewijzigd door Gersomvg op 19-06-2009 16:45 ]

[kaesve]

nu heb ik dat laatste voorbeeld niet geprobeert, maar het probeem was dus dat op het moment dat ik er een onclick van maakte bij andere suckerfish-scripts, hij de onclick-event van zijn parents ook triggerde.. ik had nergens het idee gekregen dat dat met jquery anders zou zijn.

@tonyisgaaf: bedankt man! daar heb ik wat aan :] ik ga me even inlezen.. en voor een volgende keer zal ik ook wel gaan kijken naar libraries, maar daar is nu geen tijd voor. bovendien heeft 'werken in elke browser' niet eens zo'n heel hoge prioriteit nu.

[Noork]

Overigens kan een parent wel een link zijn wanneer je een onclick gebruikt?

Persoonlijk zou ik gewoon even kijken naar jquery (toggle / slidedown o.i.d.)

[Borizz]

tonyisgaaf schreef op vrijdag 19 juni 2009 @ 16:28:
Zoek eens op "preventDefault" en "stopPropagation". Dat zal je helpen bij het child/parent event doorgeef verhaal.
Daarnaast zijn er voor verschillende browsers verschillende manieren om te checken op welk element daadwerkelijk werd geklikt en aan welk element het event daadwerkelijk hangt, dus daar wil je wellicht een library voor gebruiken.

Voor IE zou ik ook naar cancelBubble kijken .

Maar je kan ook juist gebruik maken van de event bubbling door het (click) event alleen op het parent element voor het menu te registeren en in de event handler uit te zoeken op welk element geklikt is.

[Verwijderd]

Persoonlijk vind ik dat de onderstaande tutorial het op een hele mooie manier oplost:

http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html

Succes!

[kaesve]

wat mooi zeg :0


alleen heb ik er nu echt echt geen tijd voor D:
ik heb het voor firefox en IE werkend gekregen, dus dat is voorlopig genoeg.. het is toch een vrijwilligersklus, dus als ze beter willen zullen ze maar moeten wachten

(hierbij is 'ze' school en de vrijwilligersklus een mislukt project waar ik te veel verantwoordelijkheid over heb gekregen D: )

maar goed. het is dus opgelost -en- ik ben overgehaald me toch maar eens te verdiepen in verschillende libraries.