✔ Problem mit Menü

Jan-Frederik Stieler · 19. Februar 2006

Hi,
steh ma wieder vor einem Problem. Undzwar schaffe ich es nicht das sich alle Subemnüs von ganz oben Öffnen. Jetzt öffnen sie sich immer auf der gleichen Höhe des Primärmenüs nur reicht dann der Platz nicht aus.

Code:

</head>
<body>
<div id="hintergrund">
<!-- Menue -->
<div id="menueposition">
<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
    <ul>
      <li><a href="#">History</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Offices</a></li>
    </ul>
  </li>
  <li><a href="#">Services</a>
    <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Internet Marketing</a></li>
      <li><a href="#">Hosting</a></li>
      <li><a href="#">Domain Names</a></li>
      <li><a href="#">Broadband</a></li>
    </ul>
  </li>
  <li><a href="#">Contact Us</a>
    <ul>
      <li><a href="#">United Kingdom</a></li>
      <li><a href="#">France</a></li>
      <li><a href="#">USA</a></li>
      <li><a href="#">Australia</a></li>
    </ul>
  </li>
</ul>
</div>
</div>
</body>
</html>

Code:

body {font: normal 11px verdana;}
#hintergrund {position:absolute; width:720px; left:50%; margin-left:-360px; /* negative Hälfte von width: 790px */
              height:430px; top:50%; margin-top:-215px; /* negative Hälfte von width: 450px */
              background-image: url(../pics/hintergrund.png); background-repeat:no-repeat;}

Code:

#menueposition {position:absolute; padding:0px; margin:0px; top:66px; width:150px; height:298px;}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	}

ul li {
	position: relative;
	}

li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777777;
	background: transparent; /* IE6 Bug */
	padding: 5px;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #FF0000; background: transparent; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */

Code:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

Hoffe das mir nal wieder jemand aus der Patsche hilft.

Viele Grüße

Maik · 20. Februar 2006

Hierfür wären dann für die Hauptmenüpunkte feste Höhenangaben erforderlich, um die Submenüs mit zunehmend negativen top- bzw. margin-top -Werten oben auszurichten.

Jan-Frederik Stieler · 20. Februar 2006

Hi,
Super vielen Dank! daran lags, hab mich schon gewundert warum ich keine negativen Werte eingeben konnte.

Viele Grüße

Jan-Frederik Stieler · 20. Februar 2006

Warum kann ich die Liste eigentlich nicht mit einem Top-Attribut versehen (den dann könnte ich das Div entfernen)?
Desweiteren ist mir nicht ganz klar warum die erste Menüstruktur nicht ganz an den rand gesetzt wird.

geändertes CSS:

Code:

ul li {
	position: relative;
         	}

ul li.einseins {
         margin-left:0px;
         	}
ul li.einszwei {
         margin-left:0px;
         	}
ul li.einsdrei {
         margin-left:0px;
         	}
ul li.einsvier {
         margin-left:0px;
         	}
ul li.einsfuenf {
         margin-left:0px;
         	}

/* Styles for 2. Submenü */

li ul.zweieins {
	position:absolute;
	left: 149px; /* Set 1px less than menu width */
	top: -5px;
	display: none;

	}

li ul.zweizwei {
	position:absolute;
	left: 149px; /* Set 1px less than menu width */
	top: -65px;
	display: none;
	}

li ul.zweidrei {
	position:absolute;
	left: 149px; /* Set 1px less than menu width */
	top: -125px;
	display: none;
	}

li ul.zweivier {
	position:absolute;
	left: 149px; /* Set 1px less than menu width */
	top: -185px;
	display: none;
	}

Maik · 20. Februar 2006

Selbstverständlich kann die Liste positioniert werden:

Code:

ul#nav {
position: absolute;
left: 50px;
top: 66px;
}

In diesem Beispiel habe ich den Listenpunkten eine Zeilenhöhe von 20 Pixel gegeben, damit die Submenüs mit den entsprechend negativen top-Werten oben ausgerichtet werden.

Browsercheck: FF 1.5, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50 | Win2000

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body {
font: normal 11px verdana;
}

#hintergrund {
position:absolute;
width:720px;
left:50%;
margin-left:-360px; /* negative Hälfte von width: 790px */
height:430px;
top:50%;
margin-top:-215px; /* negative Hälfte von width: 450px */
background-image: url(../pics/hintergrund.png);
background-repeat:no-repeat;
border: 1px solid #dfdfdf;
}

ul, li {
margin: 0;
padding: 0;
}

ul {
width: 150px;
list-style: none;
}

li {
line-height: 20px;
}

ul#nav {
position: absolute;
left: 50px;
top: 66px;
}

ul#nav li {
        position: relative;
        }

ul#nav li.einseins {
         margin-left:0px;
                 }
ul#nav li.einszwei {
         margin-left:0px;
                 }
ul#nav li.einsdrei {
         margin-left:0px;
                 }
ul#nav li.einsvier {
         margin-left:0px;
                 }
ul#nav li.einsfuenf {
         margin-left:0px;
                 }

/* Styles for 2. Submenü */

li ul.zweieins {
        position:absolute;
        left: 149px; /* Set 1px less than menu width */
        top: 0;
        display: none;
        }

li ul.zweizwei {
        position:absolute;
        left: 149px; /* Set 1px less than menu width */
        top: -20px;
        display: none;
        }

li ul.zweidrei {
        position:absolute;
        left: 149px; /* Set 1px less than menu width */
        top: -40px;
        display: none;
        }

li ul.zweivier {
        position:absolute;
        left: 149px; /* Set 1px less than menu width */
        top: -60px;
        display: none;
        }

/* Styles for Menu Items */
ul li a {
        display: block;
        text-decoration: none;
        color: #777777;
        background: transparent; /* IE6 Bug */
        /*padding: 5px;*/
        border-bottom: 0;
        }

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #FF0000; background: transparent; } /* Hover Styles */

li ul li a { /*padding: 2px 5px;*/ } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */
-->
</style>

<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
//-->
</script>

</head>
<body>

<div id="hintergrund">
<!-- Menue -->
<ul id="nav">
  <li class="einseins"><a href="#">Home</a></li>
  <li class="einszwei"><a href="#">About</a>
    <ul class="zweizwei">
      <li><a href="#">History</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Offices</a></li>
    </ul>
  </li>
  <li class="einsdrei"><a href="#">Services</a>
    <ul class="zweidrei">
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Internet Marketing</a></li>
      <li><a href="#">Hosting</a></li>
      <li><a href="#">Domain Names</a></li>
      <li><a href="#">Broadband</a></li>
    </ul>
  </li>
  <li class="einsvier"><a href="#">Contact Us</a>
    <ul class="zweivier">
      <li><a href="#">United Kingdom</a></li>
      <li><a href="#">France</a></li>
      <li><a href="#">USA</a></li>
      <li><a href="#">Australia</a></li>
    </ul>
  </li>
</ul>
<!-- End Menue -->
</div>

</body>
</html>

Jan-Frederik Stieler · 20. Februar 2006

Ah, bei mir hats nicht funktioniert da ich vergessen hatte „position:absolute“ anzugeben.
Danke!

✔ Problem mit Menü

Jan-Frederik Stieler

Monsterator

Maik

Jan-Frederik Stieler

Monsterator

Jan-Frederik Stieler

Monsterator

Anhänge

Maik

Jan-Frederik Stieler

Monsterator

Neue Beiträge