✔ css Menü / Navigation anpassen

Status
Nicht offen für weitere Antworten.
R

rainman80

Grünschnabel
Hallo!

Ich habe das Menü von Stu Nicholls für meine Navigation angepasst soweit ich das so einstellen konnte.

Am Ende sollte das Menü so aussehen: http://www.kardex.ch

Wie muss ich diesen Code verändern damit die Navigation wie auf der Kardexseite aussieht:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Kardex</title>
<link rel="stylesheet" media="all" type="text/css" href="kardex.css" />

<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/basic_dd.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}

/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}

/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:10px;
font-weight:bold;
width:126px;
padding:4px 0;
color:#000;
background:#d5d8df;
text-decoration:none;
margin-right:1px;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:#444;
background:#ffe6e6;
}

/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}

</style>

</head>

<body>
<div class="menu">

<ul>
<li><a href="home.html">Home<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->	
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="http://www.hornecker.de">Über Uns<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="home.html">Konzern</a></li>
	<li><a href="home.html">Warum Kardex</a></li>
	<li><a href="expand.html">Produktion & Qualität</a></li>
	<li><a href="enlarge.html">Offene Stellen</a></li>	
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../layouts/index.html">Produkte & Service<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../layouts/bodyfix.html">Lagertechnik</a></li>
	<li><a href="../layouts/body2.html">Office</a></li>
	<li><a href="../layouts/body4.html">Kundenservice</a></li>
	<li><a href="../layouts/body5.html">Produktübersicht</a></li>	
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../boxes/index.html">Anwendungsberichte<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->	
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a  href="../mozilla/index.html">News & Events<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->	
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../layouts/index.html">Kontakt<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../layouts/bodyfix.html">Online Formular</a></li>
	<li><a href="../layouts/body2.html">Verkauf Schweiz</a></li>
	<li><a href="../layouts/body4.html">Kundenservice Schweiz</a></li>
	<li><a href="../layouts/body5.html">Kardex Weltweit</a></li>	
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>

</div>
</body>
</html>

PS: Das komplette Kardex Menü habe ich auch als gif Bilder...
 
Hi,

falls du den Hintergrund und Rahmen für das Submenü meinst, erweiterst du das Stylesheet folgendermaßen:

Code: 
.menu li ul li a {
background:#fff;
border-left:1px solid #d5d8df;
border-right:1px solid #d5d8df;
}

.last {
border-bottom:1px solid #d5d8df;
}
Die Klasse .last rufst du dann jeweils im letzten Link des Submenüs auf.

Und noch zwei Hinweise: bei den Menüpunkten, die kein Submenü enthalten, können die Conditional Comments entfernt werden, und korrigiere noch die obere Positionsangabe für die Tabelle, da sie derzeit zu hoch gewählt ist, und daher eine Lücke zum Submenü entsteht, weshalb sich im IE6 das Submenü umgehend schliesst, sobald die Maus den Hauptlink verlässt.
 
@Maik vielen dank für die Hilfe!

Ich habe leider den ie6 nicht zum testen auf meinem System.

Bei mir wird beim Submenü unter Über Uns Konzern und Warum Kardex noch grau hinterlegt...

Ist es auch irgendwie möglich die Farbe der Untermenüpunkte blau zu machen und nach Links auszurichten?

Was mich auch noch super glücklich machen würde ist, dass beim Mouse Over über den Hauptmenüpunkten der Hintergrund nicht rosa hinterlegt wird sonder grau bleibt...

Hier nochmal mein Code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Kardex</title>
<link rel="stylesheet" media="all" type="text/css" href="kardex.css" />

<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/basic_dd.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}

/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:0px;
top:25px;
}

/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:10px;
font-weight:bold;
width:126px;
padding:4px 0;
color:#000;
background:#d5d8df;
text-decoration:none;
margin-right:1px;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:#444;
background:#ffe6e6;
}

/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}

.menu li ul li a {
background:#fff;
border-left:1px solid #d5d8df;
border-right:1px solid #d5d8df;
}

.last {
border-bottom:1px solid #d5d8df;
}

</style>

</head>

<body>
<div class="menu">

<ul>
<li><a href="home.html">Home</a>
</li>

<li><a href="http://www.hornecker.de">Über Uns<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="home.html">Konzern</a></li>
	<li><a href="home.html">Warum Kardex</a></li>
	<li><a href="expand.html">Produktion & Qualität</a></li>
	<li class="last"><a href="enlarge.html">Offene Stellen</a></li>	
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../layouts/index.html">Produkte & Service<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../layouts/bodyfix.html">Lagertechnik</a></li>
	<li><a href="../layouts/body2.html">Office</a></li>
	<li><a href="../layouts/body4.html">Kundenservice</a></li>
	<li class="last"><a href="../layouts/body5.html">Produktübersicht</a></li>	
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../boxes/index.html">Anwendungsberichte</a>
</li>

<li><a  href="../mozilla/index.html">News & Events</a>
</li>

<li><a href="../layouts/index.html">Kontakt<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../layouts/bodyfix.html">Online Formular</a></li>
	<li><a href="../layouts/body2.html">Verkauf Schweiz</a></li>
	<li><a href="../layouts/body4.html">Kundenservice Schweiz</a></li>
	<li class="last"><a href="../layouts/body5.html">Kardex Weltweit</a></li>	
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>

</div>
</body>
</html>
 
Code: 
/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:0px;
top:20px;
}

/* style the links hover */
.menu :hover{
color:#444;
background:#d5d8de; /* wenn "#d5d8df", öffnet sich das Submenü im IE nicht mehr (?!) */
}

.menu li ul li a {
background:#fff;
border-left:1px solid #d5d8df;
border-right:1px solid #d5d8df;
color:blue;
text-align:left;
}
Dass die beiden Submenüpunkte grau hinterlegt werden, liegt am gleichlautenden Verweisziel, wie im Menüpunkt "Home". Wenn ich im href-Attribut der beiden Links einen anders lautenden Dateinamen angebe, werden sie nicht mehr grau hinterlegt. :confused:

Ansonsten sieht bei mir das Menü im IE6 überhaupt nicht schlimm aus.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück