ich brauche Hilfe bei der Erstellung eines CSS Menü mit folgenden Features:
Hauptnavigation plus Subnavigation.
Hauptnavigation soll horizontal, die Subnavigation vertikal aufgebaut sein.
Ich habe gegoogelt und folgende Menüs gefunden:
Hauptnavigation: nicholls DOTTED LINE REPLACEMENT technique (STEP 4)
Subnavigation: Wire Frame Menu
Ich habe versucht die beiden Menüs miteinander zu verbinden, nicholls Menü als Hauptnavigation, das zweite als Subnavigation.
Mein jetziger Aufbau haut aber noch nicht ganz hin:
- Code: Alles auswählen
<html>
<head>
<style type="text/css">
<!--
#primary-nav {
padding:0;
margin:0;
list-style-type:none;
white-space:nowrap;
}
#primary-nav li, #primary-nav li.menuparent {
float:left;
padding:4px 0;
background:url(images/menu/menueteiler.png) no-repeat right center; margin:0 0 0 -1px;
}
#primary-nav span {
float: left;
background:url(images/menu/menueteiler.png) no-repeat left center;
}
#primary-nav a {
position:relative;
display:block;
text-decoration:none;
float:left;
}
#primary-nav a span {
display:block;
color: #7a7a7c; /* font */
text-align:left;
padding:4px 16px;
}
#primary-nav a:hover, #primary-nav .menuactive {
background:#fff;
border-bottom:4px solid #0064aa;
}
#primary-nav a:hover span {
color:#000; /* font hover */
/* background:#08c; */
}
/* Subnavigation */
.unli {
border: 1px solid #C0C0C0;
background-color: white;
border-bottom-width: 0;
width: 170px;
}
* html .unli { /* IE only */
width: 164px;
}
.unli ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.unli a {
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}
.unli a:visited{
color: #595959;
}
html>body .unli a { /*Non IE rule*/
width: auto;
}
.unli a:hover {
background-color: #F8FBBD;
color: black;
}
#primary-nav .unli a:hover, .unli .menuactive {
background:#fff;
border-bottom:0;
}
.clearb {clear:both;}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
display: block;
}
/* IE Hack, will cause the css to not validate */
#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }
-->
</style>
<title>menu</title>
</head>
<body>
<!-- Menü -->
<div id="menuwrapper">
<ul id="primary-nav">
<li class="menuactive"><a class="menuactive" href="#"><span>Home</span></a></li>
<li class="menuparent"><a class="menuparent"><span class="sectionheader">Artikel</span></a>
<ul class="unli">
<li><a href="#"><span>Hosen</span></a></li>
<li><a href="#"><span>Jacken</span></a></li>
<li><a href="#"><span>Pullover</span></a></li>
<li><a href="#"><span>Mäntel</span></a></li>
</ul>
</li>
<li><a href="#"><span>Bekleidung</span></a></li>
<li><a href="#"><span>Möbel</span></a></li>
<li class="menuparent"><a class="menuparent"><span class="sectionheader">Kontakt</span></a>
<ul class="unli">
<li><a href="#"><span>Kontakt</span></a></li>
<li><a href="#"><span>Anfahrt</span></a></li>
<li><a href="#"><span>Impressum</span></a></li>
</ul>
</li>
</ul>
<div class="clearb"></div>
</div>
<!-- /Menü -->
</body>
</html>
Der obige screenshot ist mit Photoshop gebastelt, und wäre mein Wunsch für's Endergebnis (Der screenshot ist inhaltlich nicht identisch mit dem Aufbau der html-Datei, ich probiere mein Glück schon etwas länger...). Im obigen screenshot ist »Home« plus »Bekleidung« aktiv, das ist nur zur Verdeutlichung gemacht, beim hover-Status zum Beispiel.
Die blaue border-bottom in der Haupnavigation sollte bei der Deklaration »menuactive« in der Hauptnavigation stehen bleiben.
Wenn eine Seite aus der Subnavigation aktiv ist sollte das »menuactive« beides anzeigen, die blaue border-bottom der Haupnavigation plus die background-color der Subnavigation (im screenshot grau dargestellt).
Wäre schick wenn der Aufbau cross-browser gerecht ist?
Ich hoffe, mir kann jemand beim Zusammenbau der Navigation helfen?
