|
|||
Matrix-Navigation mit DropDown - "Vererbung verhindern"?
Hallo zusammen,
ich sitze jetzt seit über zwei Tagen an einem Problem das mich verzweifeln lässt - aber mal von vorne: Ich nutze die hier beschriebene Technik der "Matrix-Navigation" (einer großen Datei mit allen Zustandsgrafiken der Navigation) um ein rein mit CSS formatiertes Menü zu erstellen: Navigation MatrixReloaded @ Dan Rubin’s SuperfluousBanter Die Technik ist relativ leicht, je nach body-ID und hover-ID wird der Hintergrund verschoben um einen Hover-Effekt zu erzielen und um eine alternative Grafik für den gerade ausgewählten Bereich (also z.B. "Startseite", "Galerie", etc.) anzuzeigen damit dieser als ausgewählt angezeigt wird. Soweit funktioniert das gut - HIER MEINE BISHERIGE NAVIGATION IN AKTION: CAPTION_LINE Nun zu meinem Problem: Ich möchte dieser Navigation eine Dropdown-Funktionalität hinzufügen um weitere Unterpunkte zur Auswahl anzubieten. Da die Navigation über eine ungeordnete Liste formatiert wird, wollte ich dem Ganzen eine weitere ungeordnete Liste hinzufügen (in der Form ul#nav li ul {weitere Anweisungen}). Leider werden alle Informationen des "Mutter-UL/LI-Tags" auch an die weiteren Unterpunkte vererbt - so findet sich hier vor allem ein "overflow:hidden", welches verhindert das die gewünschte Dropdown-Liste über die Größe der Navigation heraus sichtbar ist und weitere Anweisungen in der LI-Formatierung die mir Kopfzerbrechen bereiten (und die Dropdown-Liste nicht erscheinen lassen). Die relevanten CSS-Styles im Einsatz sind hier sichtbar: http://www.madpotato.de/test/_lang/de/style.css Der HTML-Code (wie er mir vorschwebt) ist dieser: Code:
<ul id="nav"> <li id="sta"><a href="'.$myDomain.LINK_1.'">'.LINK_1.'</a></li> <li id="gal"> <a href="'.$myDomain.LINK_11.'"></a> <ul> <li><a href="c">Test-Dropdown</a> <!-- MUSS SICHER ANDERS GEMACHT WERDEN --> <ul> <li><a href="d">Punkt 1</a></li> <li><a href="e">Punkt 2</a></li> <li><a href="f">Punkt 3</a></li> <li><a href="g">Punkt 4</a></li> </ul> </li> </ul> </li> ... etc. etc... Vielen Dank im Vorraus, jede Form von Input kann mir den Tag etwas leichter machen ! |
Sponsored Links |
|
||||
Du kannst jegliche CSS-Eigenschaften für das Submenü zurücksetzen.
Und Deine Grafik hat 191 (!) kb, da unglaublich viel Redundanz. Für eine Lösung, die auch bei deakt. Grafiken funktioniert, siehe http://xhtmlforum.de/40267-faq-h-ufi...tml#post296439 |
Sponsored Links |
|
|||
Danke für die schnelle Antwort !
Wie kann ich die Eigenschaft denn zurücksetzen? Es gibt ja keine globale "Reset-Anweisung" die z.B. die overflow-Einstellung überschreibt. Und vor allem diese Einstellungen lassen sich für die Unterpunkte (UL/LI) irgendwie nicht überschreiben. Jede Hilfe wäre super ! Code:
ul#nav li a { position: absolute; top: 0; width: 124px; text-indent: -9000px; text-decoration: none; padding: 124px 0 0 0; overflow: hidden; height: 0px !important; height /**/:118px; /* IE5/Win */ background: transparent url(img/header_nav.png) no-repeat; } |
|
||||
Zitat:
Siehe: overflow: Übergroßer Inhalt: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
|||
Nun, natürlich hab' ich overflow:visible schon mal probiert aber so wie ich es sehe hat ja der "Container" des übergeordneten UL-Tags die Anweisung, nichts aus seinem vordefinierten height-Bereichs herauszulassen.
Nochmal konkret: Die "Hauptnavigation" hat folgende Formatierung "nav#ul" für Liste und "nav#ul li" für die horizontalen Unterpunkte. Die Dropdown-Liste soll als untergeordnete Liste dieser Tags (also "nav#ul li ul" und "nav#ul li ul li") eingebaut werden. Alle Änderungen die ich dann für diese beiden Formatierungen eingebe werden aber leider NICHT übernommen (wenn ich die Anweisungen von nav#ul und nav#ul li temporär entferne funktioniert das Dropdown-Menü). Vielleicht habe ich auch nur einen Denkfehler und es gibt eine einfache Lösung?! (das wär' was Danke schon mal für Deine Mühe, vielleicht hast Du ja noch eine Idee ! |
|
|||
Heiko, vielen Dank für Deine Mühe - ich weiß es sehr zu schätzen ! Wenn wir das irgendwie hinkriegen würd' ich Dir gerne ein Bier ausgeben
- Hier ist die Variante mit eingebauten DropDown-Menü die nicht funktioniert: CAPTION_LINE - Und hier noch eine Variante mit deaktivierten Einstellungen des nav#ul li a-Tags: CAPTION_LINE (wie man sehen kann funktioniert das DropDown-Menü - leider ist es durch den overflow:hidden nur innerhalb der Navigation sichtbar - und natürlich funktioniert das eigentliche Menü nicht mehr) Die jeweils relevanten Style-Informationen sind hier - Fall 1: http://www.madpotato.de/test/1/_lang/de/style.css - Fall 2: http://www.madpotato.de/test/2/_lang/de/style.css Nochmals vielen Dank für Deine Mühe ! |
|
||||
Was genau soll den mit dem Submenü passieren? Momentan wirkt auf seine Links u.a. noch height: 0; und neg. text-indent.
Und zu Deiner Menü-Grafik: Grundsätzlich würden 2 Reihen reichen, einmal die helle und einmal die dunkle. Dazu käme dann noch eine winzige dritte Reihe, ebenfalls mit voller Breite, aber nur ca. 5px hoch, die ausschließlich den unteren Bereich mit den weißen Dreiecken liefert. Das alles in einer Grafik würde denselben Zweck wie jetzt erfüllen, nur ohne Redundanz und daher mit ca. 75% geringerer Dateigröße (da 6 der momentan noch 8 kompletten Reihen wegfallen würden). |
Sponsored Links |
|
|||
Der Tip mit der Optimierung ist gut - werde ich bei Gelegenheit umsetzen - da die Webseite unerwartet früher fertig werden soll, stehe ich ziemlich unter Druck und werde Optimierungen dieser Art in einem späteren Update einpflegen.
Hier ist ein Screenshot wie ich mir die Navigation vorstelle: http://www.madpotato.de/test/dropdown.jpg (der untere Bereich ist natürlich das Dropdown-Menü... - ist schnell zusammen kopiert, der Inhalt macht natürlich keinen Sinn...) Ich habe natürlich versucht andere height- und text-indent-Einstellungen für die Unter-Listen einzustellen, gebracht haben diverse Ideen nichts. Ich habe auch schon versucht dem Untermenü eine ander ID/Klasse zuzuweisen, das ändert aber irgendwie alles nichts an dem Teufelskreis das die EInstellungen der Haupt-Liste vererbt werden. Geändert von madpotato (17.08.2008 um 23:18 Uhr) |
Sponsored Links |
Stichwörter |
css, dropdown, hover, matrix navigation, vererbung |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 17:20 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |
Dropdown Hover 3.Ebene klappt nicht auf | Maztah | CSS | 0 | 22.03.2008 23:35 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 19:18 |