Navigation Unterstrich spinnt

[nordi]

Hallo, ich habe auf CSS-Tricks folgende Navigation (http://css-tricks.com/examples/MagicLine/) gefunden und fand diese sehr hübsch und würde diese gerne auf meine Seite Portieren.

Ich habe den Code soweit angepasst, der Unterstrich, welcher sich unter den Menüpunkten bewegt wird auch angezeigt, jedoch fährt dieser rum wie er will und bleibt nicht unter den Menüpunkten stehen. Ich denke es hat damit zu tun, dass das Menü mehrere <ul></ul> Subpunkte hat und dass das Skript damit nicht klarkommt. Ich bin mir jedoch unsicher, wie ich das JS anpassen muss, damit der Unterstrich wie im Beispiel unter den jeweiligen Punkt fährt. Evtl. hat jemand eine Idee?

Hier die Beispielseite:
http://www.stokedesign.de/kunden/movingdrinks/

 

[rd4eva]

Ich denke es hat damit zu tun, dass das Menü mehrere <ul></ul> Subpunkte hat und dass das Skript damit nicht klarkommt

Eher nicht.
Es liegt wohl eher am

#menu > li {
    position: relative;
}

Wenn du das raus nimmst sollte es gehen.
Das wird dir zwar vermutlich die Anzeige der Untermenüs zerschiessen aber das sollte nicht schwer zu lösen sein.

 

[SpiceLab]

Das wird dir zwar vermutlich die Anzeige der Untermenüs zerschiessen aber das sollte nicht schwer zu lösen sein.

Dein Wort in Gottes Ohr

 

[rd4eva]

Dein Wort in Gottes Ohr

Gut... War vielleicht etwas optimistisch. Mit JavaScript hilfe dürfte es tatsächlich nicht schwer sein, ansonsten bist du ja dann im css board zu finden

 

[SpiceLab]

Gut... War vielleicht etwas optimistisch. [...] ansonsten bist du ja dann im css board zu finden

Schon wieder etwas optimistisch :suspekt:

 

[nordi]

Hi, danke für den Hinweis! Habe position:relative rausgenommen und das Unterbalken funktioniert jetzt so wie er es soll.. Aber wie ihr schon gesagt habt, ist die Subnavigation nicht mehr unter dem gehoverten Hauptnavipunkt. Wie würdet ihr die Positionierung angehen? Mit position:absolute?

Frage zu dem Javascript:

$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item a").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());

Hier wird ja die Breite (width) berechnet. Ich würde jedoch gerne rechts von der MagicLine 10px abziehen. Wie mache ich das?

Vielen Dank für die hilfreichen Tipps!

 

[rd4eva]

Hier wird ja die Breite (width) berechnet. Ich würde jedoch gerne rechts von der MagicLine 10px abziehen. Wie mache ich das?

Indem du einfach 10 abziehst

.width($(".current_page_item").width() - 10)
...

Das verändert allerdings nur die Anfangsbreite. Wenn du das beibehalten willst musst du folgendes ebenfalls ändern:

newWidth = $el.parent().width() - 10;

Wie würdet ihr die Positionierung angehen? Mit position:absolute?

Versuchs mal so:

#menu li ul {    
    left: auto;
}

Also nur "left" ändern, den Rest so lassen wie es ist.

 

[nordi]

Hi, funktioniert super! Ist vielleicht ne Kleinigkeit, aber wenn ich in das Submenü gehe springt der Unterstrich, welcher sich unter dem Menü bewegt in die Ausgangsposition zurück? Wie kann man den fixieren, sodass er unter dem jeweiligen Hauptnavigationspunkt stehen bleibt, wenn man die Subnavigation durchgeht?