PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : HTML/CSS Horizontales Listenmenü: Submenü korrekt ein- und ausblenden


tomtom
2012-09-20, 16:27:51
Hey Leute,

Ich steh mal wieder ein wenig an - meine Auffrischung in Sachen HTML/CSS trägt mittlerweile zwar schon wieder Früchte, momentan ärgere ich mich aber an einem Problem, wo glaub ich mein Denkansatz schon der falsche ist.

Worum es geht: Ich habe eine horizontale ausgelegte Listennavigation, die folgende aufgebaut ist: Das Ganze ist eine unsortierte Liste, deren Listenitems die Hauptmenüpunkte meiner Navigation sind. Diese Hauptmenüpunkte verfügen jeweils über eine eigene, untergeordnete, unsortierte Liste, welche die Submenüpunkte für den jeweiligen Hauptmenüpunkt darstellen. Diese Submenüpunkte sind via display:hidden standardmäßig ausgeblendet und werden nur eingeblendet, wenn über den jeweiligen Hauptmenüpunkt gehovered wird. Das funktioniert auch wunderbar. Allerdings soll es so sein, dass wenn kein Hauptmenüpunkt angewählt wird, ein Standard-Submenü eingeblendet wird. Auch das funktioniert einwandfrei.

Jetzt kommt aber das Problem dabei: dieses Standard-Submenü "flackert" beim Hovern über die Links (zumindest in IE und FF). Dies erscheint mir einerseits sogar logisch, weil der Aus- und Einblendeffekt über das Hover-Attribut der Hauptmenü-Liste läuft und das Standard-Submenü ebenfalls dieser Liste untergeordnet ist - und genau da vermute ich meinen Denkfehler.

Ich suche daher nach einer Lösung, wie ich das richtig machen kann. Schön wäre, wenn ich das rein mit CSS lösen könnte, JS würde ich für die Navigation gern weitgehendst vermeiden.

Den Code habe ich (damit er etwas übersichtlicher ist), erstmal ohne viel optischem Schnickschnack vorbereitet:

<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="header_navigation">
<ul class="main_nav">
<li class="main_nav"><a class="main_nav" href="#">Main Menu 1</a>
<ul class="sub_nav">
<li class="sub_nav"><a class="sub_nav" href="#">Main1Sub1</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Main1Sub2</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Main1Sub3</a></li>
</ul>
</li>
<li class="main_nav"><a class="main_nav" href="#">Main Menu 2</a>
<ul class="sub_nav">
<li class="sub_nav"><a class="sub_nav" href="#">Main2Sub1</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Main2Sub2</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Main2Sub3</a></li>
</ul>
</li>
<li class="main_nav"><a class="main_nav" href="#">Main Menu 3</a>
<ul class="sub_nav">
<li class="sub_nav"><a class="sub_nav" href="#">Main3Sub1</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Main3Sub2</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Main3Sub3</a></li>
</ul>
</li>
<!-- Standard Submenu (will only be displayed, when no main menu item is selected) -->
<li class="std_nav">
<ul class="std_nav">
<li class="sub_nav"><a class="sub_nav" href="#">Standard-Sub1</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Standard-Sub2</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Standard-Sub3</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Standard-Sub4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

und hier noch das CSS-File:
div#header_navigation {
font-size: 13pt;
text-align: center;
color: #6e6e6e;
}

div#header_navigation ul.main_nav {
list-style-type:none;
padding: 0;
margin: 0;
}

div#header_navigation li.main_nav {
display: inline;
padding: 0;
margin: 0;
}

div#header_navigation ul.main_nav li.main_nav ul.sub_nav {
position: absolute;
top: 75px;
left: 0px;
height: 35px;
width: 100%;
font-size: 11pt;
color: #6e6e6e;
display: none;
}

div#header_navigation ul.main_nav li.main_nav:hover ul.sub_nav {
display: inline-block;
padding: 0;
}

div#header_navigation li.sub_nav, li.std_nav {
display: inline-block;
padding: 0;
}

/* Standard Sub Navigation: will only be displayed, when no main menu item is selected */
div#header_navigation ul.main_nav:hover li.std_nav {
display: none;
}

div#header_navigation ul.std_nav {
position: absolute;
top: 75px;
left: 0px;
height: 35px;
width: 100%;
font-size: 11pt;
color: #6e6e6e;
padding: 0;
margin: 0;
}

/* Link styles of the main menu items */
a.main_nav:link, a.main_nav:visited {
color: #6e6e6e;
display: inline-block;
width: 250px;
height: 75px;
line-height: 50px;
text-decoration: none;
}

a.main_nav:hover {
color: #a51c30;
}

/* Link styles of the sub menu items */
a.sub_nav:link, a.sub_nav:visited {
color: #6e6e6e;
text-decoration: none;
border: 1px solid #cc0000;
padding: 15px 15px 15px 15px;
}

a.sub_nav:hover {
color: #a51c30;
border: 1px solid #00cc00;
}

Das Ganze findet ihr hier zur Ansicht: Live-Demo (http://mirnigth.pf-control.de/nav-test/)

Würde mich freuen, wenn der/die ein oder andere da einen Lösungsansatz parat hätte! :)

Dankeschön!
lG, tomtom

AintCoolName
2012-09-20, 19:50:00
Ich fürchte ohne Java Script geht das nicht nur mit CSS kriegt man das glaube ich nicht hin.

fdk
2012-09-20, 20:13:58
Ich fürchte ohne Java Script geht das nicht nur mit CSS kriegt man das glaube ich nicht hin.
Blub.

Es gibt dazu ca drölf Millionen (http://lmgtfy.com/?q=css3+horizontal+dropdown+menu) tutorials im Netz.

Gast
2012-09-20, 20:55:42
Blub.

Es gibt dazu ca drölf Millionen (http://lmgtfy.com/?q=css3+horizontal+dropdown+menu) tutorials im Netz.
Dann solltest du aber auch dazu schreiben das bei weitem noch nicht jeder Browser etwas mit CSS3 anfangen kann. Also entweder richtig und so Kompatibel wie möglich oder gar nicht.

Weyoun
2012-10-07, 22:26:28
Dann solltest du aber auch dazu schreiben das bei weitem noch nicht jeder Browser etwas mit CSS3 anfangen kann. Also entweder richtig und so Kompatibel wie möglich oder gar nicht.
Paar Wochen zu spät, sicherlich hast du es bereits gelöst. Ich bin zumindest gerade am Einlesen:
http://sperling.com/examples/menuh/

sieht eigentlich gut aus und es steht auch dabei:
"This technique works for all browsers EXCEPT for IE 5.23 and below. These outdated browsers don't even recognize Microsoft's embedded commands."