nicht angemeldet
dynamisches Menü
0 0 
Gunnar Bittersmann
0 
JürgenB
dynamisches Menü
Hallo,
ich bin noch nicht sehr fit in jQuery und möchte ein dynamisches menü mit unterpunkten erstellen, das einfach erscheint, wenn ich mit der maus über den oberpunk fahre.
das heißt, ich habe 2 navigationslevel. wenn ich mit der maus über das erste navigationslevel fahre, erscheint das 2.navigationslevel. das 2.navigationslevel muss solange aufgeklappt bleiben, bis ich mit der maus nicht mehr über dem 1. oder 2. navigationslevel bin, mich also außerhalb des bereichs befinde.
aber ich bekomme es leider nicht hin, dass das richtige navigationslevel2 passend zum oberpunkt angezeigt wird. wenn dann werden alle navigationslevel2 angezeigt.
und das schließen des navigationslevel2 wenn ich mich mit der maus nicht mehr im passenden navigationslevel1 und navigationslevel2 befinde, bekomme ich auch nicht hin.
das css ist schon fertig. mit jQuery muss nur das ein- (visibility: visible;) und ausblenden (visibility: hidden;) von navigationlevel2 geregelt werden.
das einblenden bekomme ich hin:
$('#navigation > li > div.navigationlevel1 > a').bind('mouseover', mouseOver_Level1);
function mouseOver_Level1() {
var parent = $(this).parent().parent();
menueeintrag = parent.find('div.navigationlevel2').eq(0).css('visibility', 'visible');
}
aber das mit dem ausblenden funktioniert irgendwie nicht.
kann mir jemand weiterhelfen?
von der struktur muss alles so bleiben. und das navigationlevel2 hat die default-eigenschaft:
.navigationlevel2 {
visibility: hidden;
}
meine html-struktur:
<ul id="navigation">
<li>
<div class="navigationlevel1">
<span class="header_left"> </span>
<span class="header_middle">
<a href="#">Test 2</a>
</span>
<span class="header_right"> </span>
</div>
<div class="navigationlevel2">
<div class="submenue_top"> </div>
<div class="submenue">
<ul>
<li><a href="#">Test 2.1</a></li>
<li><a href="#">Test 2.2</a></li>
<li><a href="#">Test 2.3</a></li>
<li><a href="#">Test 2.4</a></li>
<li><a href="#">Test 2.5</a></li>
<li><a href="#">Test 2.6</a></li>
<li class="noLine"><a href="#">Test 2.7</a></li>
</ul>
</div>
<div class="submenue_bottom"> </div>
</div>
</li>
<li>
<div class="navigationlevel1">
<span class="header_left"> </span>
<span class="header_middle">
<a href="#">Test 3</a>
</span>
<span class="header_right"> </span>
</div>
<div class="navigationlevel2">
<div class="submenue_top"> </div>
<div class="submenue">
<ul>
<li><a href="#">Test 3.1</a></li>
<li><a href="#">Test 3.2</a></li>
<li><a href="#">Test 3.3</a></li>
<li><a href="#">Test 3.4</a></li>
<li><a href="#">Test 3.5</a></li>
<li><a href="#">Test 3.6</a></li>
<li class="noLine"><a href="#">Test 3.7</a></li>
</ul>
</div>
<div class="submenue_bottom"> </div>
</div>
</li>
</ul>
-
Ich empfehle Dir 2 Sachen: erstens die normalisierten Events mouseenter und mouseleave und zweitens die .closest-Methode von jQuery.
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.-
hallo,
ich bin noch nicht so fit in jQuery. aber könntest du mir ein beispiel schicken oder code, was du genau meinst?gruß,
kris-
Schau mal auf api.jquery.com nach - dort findest Du auch Beispiele.
Im Wesentlichen musst Du nur mouseover durch mouseenter und mouseout durch mouseleave ersetzen und statt des parent().parent().find(...) ein .closest(...) nehmen.
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen. -
Hi,
ich bin noch nicht so fit in jQuery.
Daran arbeite daran, anstatt diese Aussage wie einen Schutzschild zur Vermeidung eigener Anstrenungen vor dir her zu tragen.
MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
-
-
Ich empfehle Dir 2 Sachen: erstens die normalisierten Events mouseenter und mouseleave
Warum nicht gleich hover() - und komm mir jetzt nicht mit Performancegründen und der anzahl der Funktionsaufrufe :)
und zweitens die .closest-Methode von jQuery.
Wozu? Ich versteh' ohenhin nicht, warum das Menü auf den mouseover des a-Elements reagieren soll und nicht auf jenen auf das übergeordente div-Element eines Menüasts.
Und wo wir grade dabei sind: ich verstehe diese massive Codesuppe ohnehin nicht: <div class="submenue_bottom"> </div> und <div class="submenue_top"> </div> scheinen mir reichlich unsinnig zu sein.
-
Ich empfehle Dir 2 Sachen: erstens die normalisierten Events mouseenter und mouseleave
Warum nicht gleich hover() - und komm mir jetzt nicht mit Performancegründen und der anzahl der Funktionsaufrufe :)
und zweitens die .closest-Methode von jQuery.
Wozu? Ich versteh' ohenhin nicht, warum das Menü auf den mouseover des a-Elements reagieren soll und nicht auf jenen auf das übergeordente div-Element eines Menüasts.
Und wo wir grade dabei sind: ich verstehe diese massive Codesuppe ohnehin nicht: <div class="submenue_bottom"> </div> und <div class="submenue_top"> </div> scheinen mir reichlich unsinnig zu sein.
nun funktioniert es. ich bin nicht darauf gekommen, mit dem li zu arbeiten. und habe immer nur einen hover bei div.navigationslevel1 gemacht, aber sobald ich das verlassen habe, war das menü wieder verschwunden, es sollte aber noch auf sein, wenn ich mit der maus in dem navigationslevel2 bin.
danke
-
-
-
@@kris:
nuqneH
möchte ein dynamisches menü mit unterpunkten erstellen, das einfach erscheint, wenn ich mit der maus über den oberpunk fahre.
Und warum willst du Nutzer ohne JavaScript von der Bedienung deiner Seite ausschließen anstatt eine http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=CSS-Navigation zu verwenden?
<div class="navigationlevel2">
<div class="submenue_top"> </div>
<div class="submenue">Wozu diese div-Suppe?
Und ein alleinsehendes NBSP ist ein sicheres Indiz für seine Überflüssigkeit und die Anwendung von CSS.
<ul>
<li><a href="#">Test 2.1</a></li>
<li><a href="#">Test 2.2</a></li>
<li><a href="#">Test 2.3</a></li>
<li><a href="#">Test 2.4</a></li>
<li><a href="#">Test 2.5</a></li>
<li><a href="#">Test 2.6</a></li>
<li class="noLine"><a href="#">Test 2.7</a></li>Wozu die Klasse "noLine"? Es gibt die Pseudoklasse
:last-child. [CSS3-SELECTORS §6.6.5.7]IE ist diese noch unbekannt, aber Linien zwischen den Menüpunkten lassen sich ja auch über 'border-top' statt 'border-bottom' realisieren, dann halt nicht für den ersten Menüpunkt.
:first-child[CSS3-SELECTORS §6.6.5.6] kennt IE auch, die Pseudoklasse gibt es schon in CSS 2. [CSS2 §5.11.1, CSS21 §5.11.1]Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Und warum willst du Nutzer ohne JavaScript von der Bedienung deiner Seite ausschließen anstatt eine http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=CSS-Navigation zu verwenden?
Vielleicht weil mit JavaScript viel mehr möglich ist? Animation, Timer, ...
Gerade in der Bedienung find ich CSS Menus immer etwas ruckartig. Da gibt es ja quasi nur 2 Zustände, visible und hidden, die direkt beim hover zB gesetzt werden.
Von Windows Menus kennt man z.B. das Verhalten, wenn man ein Untermenu aufklappt, dann nach rechts unten navigiert um einen Menupunkt des Untermenus zu erreichen und dabei aber aus Versehen noch einen Punkt des öffnenden Menus überfährt, dass dann _trotzdem_ das ursprünglich geöffnete Untermenu offen bleibt, und sich nicht das andere öffnet. Dank Timern.
Das ist in CSS m.W. nicht möglich.Außerdem: geschissen auf die 2% nicht-JavaScript User. CSS kann man doch auch ausstellen. Selbst schuld wer sowas macht.
Und wenn man seine Seite für mobile Geräte designt (wo vermutlich auch keine JS läuft), dann müsste man wohl ohnehin einiges anpassen.Gruß!
-
@@Christian S.:
nuqneH
Gerade in der Bedienung find ich CSS Menus immer etwas ruckartig. Da gibt es ja quasi nur 2 Zustände, visible und hidden, die direkt beim hover zB gesetzt werden.
In der Vergangenheit. In der Zukunft nicht. [CSS3-TRANSITIONS]
Außerdem: geschissen auf die 2% nicht-JavaScript User.
Nein.
Und wenn man seine Seite für mobile Geräte designt (wo vermutlich auch keine JS läuft), dann müsste man wohl ohnehin einiges anpassen.
Nein. “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice _responsive web design_.” [Marcotte]
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
Hallo Christian,
Außerdem: geschissen auf die 2% nicht-JavaScript User.
das sind die Bots der Suchmaschinen. Ohne diese werden die Seiten nicht gefunden und damit bleiben auch die Besucher mit Javascript aus.
Gruß, Jürgen
-
@@JürgenB:
nuqneH
Außerdem: geschissen auf die 2% nicht-JavaScript User.
das sind die Bots der Suchmaschinen. Ohne diese werden die Seiten nicht gefunden und damit bleiben auch die Besucher mit Javascript aus.Die Links sind doch im Markup vorhanden. Ein Bot muss ein Menü nicht aufklappen oder ignoriert ein Bot Links, die 'visibility: hidden' oder 'display: none' gesetzt sind?
Es ist sicher eine gute Idee, dies nur bei aktivem JavaScript zu setzen: 'html' oder 'body' mit JavaScript eine Klasse "js" verpassen und im Stylesheet:
.js .navigationlevel2 { visibility: hidden }[PERFORMANCE-BP2]Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
[latex]Mae govannen![/latex]
Außerdem: geschissen auf die 2% nicht-JavaScript User. CSS kann man doch auch ausstellen. Selbst schuld wer sowas macht.
Es sind mit sehr großer Wahrscheinlichkeit weit(!) mehr als 2%.
Ansonsten würde ich zu einer Lösung raten, die Gunnar ansatzweise bereits angedeutet hat:
Mach eine CSS-Lösung, die bei vorhandenem JS über eine zusätzliche Klasse "unwirksam" wird, weil die CSS-Selektoren nicht mehr greifen und implementiere dann die JS-Lösung, die du ohnehin vorhattest. So können alle was damit anfangen.
Cü,
Kai
--
Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken in Richtung "Mess up the Web". (suit)
Foren-Stylesheet Site Selfzeug JS-Lookup
SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
-
-
-
Hallo kris,
... wenn ich mit der maus über den oberpunk fahre.
jetzt mal davon abgesehen, dass man Punks nicht überfährt, auch nicht deren Führer, hast du schon mal daran gedacht, dass es Surfer ohne Javascript gibt, und dass es Surfer ohne Maus gibt? Gerade letztere sind schwer im Kommen.
Gruß, Jürgen