DropDownMenue erweitern

A

amn.ssy

Erfahrenes Mitglied
Hallo,

ich hab hier ein sehr schönes DropDownMenue, das fast schon zum Einbauen fertig ist - aber eben nur fast.
Wo bzw. wie muß ich das CSS anpassen um dem ganzen auch noch Unterpunkte bei zu bringen, die sich dann seitlich daneben zeigen bzw runter klappen.

PHP: 
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>
<body>
	<div class="menu">
		<ul>
			<li><a href="#" >Home</a></li>
			<li><a href="#" id="current">Seite 1</a>
			    <ul>
					<li><a href="#">Seite 1.1</a>
                                         <ul>
					       <li><a href="#">Seite 1.1.1</a></li>
					       <li><a href="#">Seite 1.1.2</a></li>
                                        </ul>
                                        </li>
					<li><a href="#">Seite 1.2</a>
                                         <ul>
					       <li><a href="#">Seite 1.2.1</a></li>
					       <li><a href="#">Seite 1.2.2</a></li>
                                        </ul>
                                        </li>
					<li><a href="#">Seite 1.3</a>
                                         <ul>
					       <li><a href="#">Seite 1.3.1</a></li>
					       <li><a href="#">Seite 1.3.2</a></li>
                                        </ul>
                                        </li>
					<li><a href="#">Seite 1.4</a></li>
			   </ul>
		      </li>
		      <li><a href="#">Seite 2</a>
                          <ul>
					<li><a href="#">Seite 2.1</a></li>
					<li><a href="#">Seite 2.2</a></li>
					<li><a href="#">Seite 2.3</a></li>
					<li><a href="#">Seite 2.4</a></li>
                         </ul>
                    </li>
			<li><a href="kontaKt.html">Kontakt</a></li>
		</ul>
	</div>

</body>
</html>

PHP: 
.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font-family:verdana,geneva,arial,helvetica,sans-serif;
	font-size:14px;
	font-weight:bold;
	color:8e8e8e;
	}
.menu ul{
	background:url(images/menu-bg.gif) top left repeat-x;
	height:43px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
		padding:0px 8px 0px 8px;
		}
	.menu li a{
		color:#666666;
		display:block;
		font-weight:bold;
		line-height:43px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover{
			color:#000000;
			text-decoration:none;
			}
	.menu li ul{
		background:#e0e0e0;
		border-left:2px solid #f68618;
		border-right:2px solid #f68618;
		border-bottom:2px solid #f68618;
		display:none;
		height:auto;
		filter:alpha(opacity=95);
		opacity:0.95;
		position:absolute;
		width:225px;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		}
	.menu li li {
		display:block;
		float:none;
		padding:0px;
		width:225px;
		}
	.menu li ul a{
		display:block;
		font-size:12px;
		font-style:normal;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover{
			background:#949494;
			color:#000000;
			opacity:1.0;
			filter:alpha(opacity=100);
			}
	.menu p{
		clear:left;
		}	
	.menu #current{
		background:url(images/current-bg.gif) top left repeat-x;
		color:#ffffff;
		}

Danke im Voraus

Grüße
_opiWahn_
 
Zuletzt bearbeitet:
Hallo djheke,

vielen Dank für deinen Tipp. Auch wenn's in diesem Beispiel um ein vertikales Menue geht, kann ich wenigstens mal eine grundsätzliche Richtung erkennen.
Im Prinzip bin ich, glaub ich, garnicht soweit vom Ziel entfernt. Denoch bleibt mir die 3. Ebene sichtbar auf der Zweiten liegen. Ziel ist aber, daß Sie genau wie bei dem Beispiel erst beim hover sichtbar wird. Ich habe mir schon einige Teile angeschaut, aber offensichtlich gibt es hierfür keine Standardlösung. Ich habe, etwas verwirrt, schon mindestens 3-4 relativ unterschiedliche gesehen.
 
_opiWahn_ hat gesagt.:
... Ich habe mir schon einige Teile angeschaut, aber offensichtlich gibt es hierfür keine Standardlösung. Ich habe, etwas verwirrt, schon mindestens 3-4 relativ unterschiedliche gesehen.
Zum Vergrößern anklicken....
Hallo,
es gibt m.E. auch keine Standardlösung. Aber sieh dir mal folgendes an:
Create a multilevel Dropdown menu with CSS and improve it via jQuery

Die Formatierung der Liste wird schrittweise erklärt und die jQuery-Animation kannst du problemlos weglassen.
Vielleicht hilft dir das weiter.
 
Moinsen,

mit der Ersetzung ab Zeile 56 im CSS

.menu li:hover > ul{
display:block;
}
.menu li li ul {
position: absolute;
top: 0;
left: 100%;
}

und der Reduzierung der Breite in Zeile 50 auf 125px bin ich dem ganzen schon deutlich näher gekommen.
Ein kleiner Wurm scheint noch drin zu sein:
Ich komme mit der Maus nicht auf die 3. Ebene. Sobald ich versuche rüber zu gehen blendet sich das Fenster wieder aus!?

Grüße
_opiWahn_
 
Sorry erstmal. Ich dachte du möchtest eine vertikale navi. Nun hast du hier eine horizontale
http://www.gipspferd.de/forumhilfe/horizontale navigation/
Dies navi ist natürlich noch ausbaufähig.
Viel Spaß damit. Achso, für den IE kleine 7 brauchst du noch JS
Dein Problem mit dem Ausblenden der Listenpunkte beim Hovern besteht im IE 7 und ist im Beispiel behoben.
 
Zuletzt bearbeitet:
_opiWahn_ hat gesagt.:
... Wo bzw. wie muß ich das CSS anpassen um dem ganzen auch noch Unterpunkte bei zu bringen, die sich dann seitlich daneben zeigen bzw runter klappen...
Zum Vergrößern anklicken....
Ich habe das CSS vom o.g. Link mal auf dein (leicht modifiziertes) HTML angepasst. Das Klassenattribut "menu" kannst du dem ersten UL-Element deiner Menüliste geben. Der umhüllende DIV-Block liefert keinen entscheidenden Beitrag zum Menü, lediglich Formatierungen, die das Menü normalerweise aus dem Wurzel- oder BODY-Element erben würde.
Angenommen dein HTML-Quelltext sieht so aus:
HTML: 
<body>
  <div class="menuWrapper">
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <!-- usw. usf. -->
      <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
  </div>
</body>
Dann könntest du die Stylesheets dazu auch so gestalten:
CSS: 
div.menuWrapper {
  margin: 0;
  border: 0;
  padding: 0;
  font-family: verdana,geneva,arial,helvetica,sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #888;
}

/*******************************************************************
 * Globale Listenformatierung:
 * Alle initialen Listenzeichen und Einrückungen entfernen,
 * "line-height" wird vererbt und bestimmt die Höhe der LI-Elemente.
 *******************************************************************/
ul.menu,
ul.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 43px;
}

/*************************************************************************
 * Formatierung der horizontal angeordneten Listenpunkte (1. Listenebene):
 *************************************************************************/
ul.menu {
  height: 43px;
  background: url(images/menu-bg.gif) top left repeat-x;
}
ul.menu li {
  float: left;
  position: relative;
  margin: 0;
  padding: 0; /*padding: 0 8px;*/
}

/**************************************
 * Globale Formatierung der A-Elemente:
 **************************************/
ul.menu li a {
  display: block;
  padding: 0 25px;
  text-decoration: none;
  font-weight: bold;
  color:#666;
}
ul.menu li a:hover {
  color: #000;
}

/*************************************************************************
 * Formatierung der vertikal angeordneten Listenpunkte (ab 2. Listenebene):
 **************************************************************************/
ul.menu ul {
  display: none;
  position: absolute;
  top: 43px;  /* = Höhe des horizontalen Menübalkens */
  left: 0;  /* urspr. 8px; */
  border: 2px solid #f68618;
  border-top: 0;
  background: #ddd;
/*
  opacity: 0.95;
  filter:alpha(opacity=95);
*/
}
ul.menu ul a {
  width: 225px;
  border-top: 1px solid #fff;
  font-size: 12px;
  font-style: normal;
  text-align: left;
}
ul.menu ul li:first-child > a {
  border-top: 2px solid #f68618;
}
ul.menu ul a:hover{
  background: #949494;
/*
  opacity:1.0;
  filter:alpha(opacity=100);
*/
}

/********************************************************
 * TOP-Wert ab 3. Listenebene zurücksetzen und Einrückung
 * um die Breite der vertikal angeordneten LI-Elemente:
 ********************************************************/
ul.menu li ul ul {
  top: 0;
  left: 225px;
  margin-left: 50px;  /* = Summe der PADDING-Werte im A-Element */
}

/******************
 * HOVER-Verhalten:
 ******************/
ul.menu li:hover ul ul,
ul.menu li:hover ul ul ul,
ul.menu li:hover ul ul ul ul {
  display: none;
}
ul.menu li:hover ul,
ul.menu li li:hover ul,
ul.menu li li li:hover ul,
ul.menu li li li li:hover ul {
  display: block;
}

/*********************
 * CURRENT-Markierung:
 *********************/
ul.menu #current{
  background: url(images/current-bg.gif) top left repeat-x;
  color: #fff;
}
Bedingung für die Funktion ist, dass jedes LI-Element der Liste nur ein A-Element und ggf. ein UL-Element für Submenüs als Kindelement(e) hat. Würde man also in LI-Elementen, die Submenüs haben, auf das A-Element verzichten und statt dessen einfach nur Text dort einfügen, dann funktioniert das hier gezeigte nicht mehr und man müsste sich was anderes einfallen lassen.

Funktioniert bei mir im aktuellen Firefox, Chrome, Opera und IE7+8.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück