✔ Menü zeigt bei Klick Untermenüpunkte an

anve · 12. August 2011

Hallo!

Wie kann ich ein Menü mit Submenü-Elementen erstellen?

Ich habe bereits folgende ungeordnete Liste:

HTML:

<ul>
   <li><a href="#">Menüpunkt 1</a></li>
   <li><a href="#">Menüpunkt 2</a></li>
   <li><a href="#">Menüpunkt 3</a></li>
   <li><a href="#">Menüpunkt 4</a></li>
   <li><a href="#">Menüpunkt 5</a></li>
</ul>

Nun sollten die Submenüs dazukommen:

HTML:

<ul>
   <li><a href="#">Menpunkt 1 Level 1</a>
      <ul>
         <li><a href="#">Menüpunkt 1.1</a></li>
         <li><a href="#">Menüpunkt 1.2</a></li>
         <li><a href="#">Menüpunkt 1.3</a></li>
      </ul>
   </li>
   <li><a href="#">Menüpunkt 2</a>
      <ul>
         <li><a href="#">Menüpunkt 2.1</a></li>
         <li><a href="#">Menüpunkt 2.2</a></li>
         <li><a href="#">Menüpunkt 2.3</a></li>
      </ul>
   </li>
   <li><a href="#">Menüpunkt 3</a></li>
   <li><a href="#">Menüpunkt 4</a></li>
   <li><a href="#">Menüpunkt 5</a></li>
</ul>

Wenn der User auf ein Menülevel 1 klickt, sollen alle Unterpunkte von Level 1 eingeblendet werden (1.1, 1.2, 1.3). Wie kann ich so etwas realisieren? CSS/JavaScript? Es soll auch für IE7 funktionieren.

Vielen Dank im Voraus.

ComFreek · 12. August 2011

Mit CSS kann man leider keine Klicks gesondert behandeln. Aber viele nutzen auch den :hover-Effekt.

Mit JavaScript geht das auf jeden Fall:

HTML:

<!-- onclick-Event hinzufügen! -->
<li><a href="#" onclick="menuClicked(this)">Menpunkt 1 Level 1</a>

Der JS-Code:

Javascript:

function menuClicked(obj)
{
  var ulList = obj.parentNode.getElementsByTagName("ul")[0];
  
  if (ulList.style.display=='block')
    ulList.style.display = 'none';
    
  else
    ulList.style.display = 'block';
}

Und um alle im Ausgangszustand zu verstecken, der CSS-Code:

CSS:

#menu li ul
{
  display: none;
}

threadi · 13. August 2011

Klicks gehen theoretisch auch im CSS, mittels :focus. Ich nutze aber auch eher die :hover-Möglichkeiten, da es für den Anwender eher intuitiv ist.

SpiceLab · 13. August 2011

ComFreek hat gesagt.:
Mit CSS kann man leider keine Klicks gesondert behandeln.

Mit JavaScript geht das auf jeden Fall:

Ohne JS, dafür in CSS mit den Pseudoklassen :active und :focus mittlerweile auch browserübergreifend ;-)

anve hat gesagt.:
Es soll auch für IE7 funktionieren.

Deine Bedingung wird von allen fünf Menüvarianten erfüllt

ComFreek · 15. August 2011

spicelab hat gesagt.:
Ohne JS, dafür in CSS mit den Pseudoklassen :active und :focus mittlerweile auch browserübergreifend ;-)

Habe bisher immer :hover-Menüs benutzt. Ich muss mir diese mal anschauen

SpiceLab · 15. August 2011

ComFreek hat gesagt.:
Habe bisher immer :hover-Menüs benutzt. Ich muss mir diese mal anschauen

Wohl bekomm's!

hela · 16. August 2011

Hallo,

ich würde für eine CSS-Lösung die target-Pseudoklasse verwenden. Dafür müsstest du den UL-Elementen der Submenüs eine ID geben und so ankerfähig machen. Die Links in den Hauptmenüpunkten zielen dann auf diese "following-sibling"-Elemente:

HTML:

<ul id="menu">
   <li><a href="#mp1">Menpunkt 1 Level 1</a>
      <ul id="mp1">
         <li><a href="#">Menüpunkt 1.1</a></li>
         <li><a href="#">Menüpunkt 1.2</a></li>
         <li><a href="#">Menüpunkt 1.3</a></li>
      </ul>
   </li>
   <li><a href="#mp2">Menüpunkt 2</a>
      <ul id="mp2">
         <li><a href="#">Menüpunkt 2.1</a></li>
         <li><a href="#">Menüpunkt 2.2</a></li>
         <li><a href="#">Menüpunkt 2.3</a></li>
      </ul>
   </li>
   <li><a href="#">Menüpunkt 3</a></li>
   <li><a href="#">Menüpunkt 4</a></li>
   <li><a href="#">Menüpunkt 5</a></li>
</ul>

Die zugehörige CSS-Regel würde dann so aussehen:

CSS:

ul#menu li a + ul[id]:not(:target) { display: none; }

Leider wird das vom Internet-Explorer bis einschließlich v8 nicht unterstützt, so dass dafür so ähnlich wie im Tutorial CSS3-Accordion (fast) ohne Javascript mit Javascript oder jQuery innerhalb von "Conditional Comments" nachgeholfen werden kann.

anve · 16. August 2011

Danke für die vielen Infos! Ich habe mal das hier nachgebaut.

Was mir dabei aufgefallen ist:
-nach Klick auf ein Menü-Element klappt das Menü zusammen
-Problem bei der Höhe zwischen IE9 und FF5 (siehe Anhang):

Das letzte Element hat zu wenig Höhe. Ich kann die Werte so einstellen, dass es im IE & Opera geht oder nur für den FF geht.

HTML:

		<div id="SubMenuOuter">				
			<ul id="SubMenu">
				<li class="SubMenu1">
						<a href="#" class="SubMenu1" tabindex="1">Menü</a>
						<ul class="sub3">
							<li class="SubMenu2"><a href="#" class="SubMenu2">text1</a></li>
							<li class="SubMenu2"><a href="#" class="SubMenu2">text2</a></li>
							<li class="SubMenu2"><a href="#" class="SubMenu2">text3</a></li>
						</ul>
				</li>
			</ul>
		</div>

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/SubMenus/cssplay-click-slide.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
/* tabindex="1" in the link code to fix the 'focus persist' problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
	0% {zoom:1;} 
	100% {zoom:1;}
}

#SubMenuOuter {
	position:absolute;
	top:390px;
	margin-left:30px;
	height:300px;
	width:200px;
	z-index:10;
}

/* for Internet Explorer to force a SubMenu refresh after :active + ul */
#SubMenu li a, body {behavior:url(trigger.htc)}

#SubMenu {
	padding: 0 0 10px 10px;
	list-style:none;
	/*position:absolute;
	top:390px;
	margin-left:30px;
	width:180px;*/
	background-color:#fcb344;
	/* Round corners not for IE8 and below*/
	-webkit-border-top-left-radius:15px;
	-khtml-border-top-left-radius:15px;
	-moz-border-radius-topleft:15px;
	border-top-left-radius:15px;
	-webkit-border-top-right-radius:15px;
	-khtml-border-top-right-radius:15px;
	-moz-border-radius-topright:15px;
	border-top-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	-khtml-border-bottom-left-radius:15px;
	-moz-border-radius-bottomleft:15px;
	border-bottom-left-radius:15px;
	-webkit-border-bottom-right-radius:15px;
	-khtml-border-bottom-right-radius:15px;
	-moz-border-radius-bottomright:15px;
	border-bottom-right-radius:15px;
}

#SubMenu li a.SubMenu1 {
	display:block;
	text-decoration:none;
	color:#404041;
	padding-left:4px;
	line-height:26px;
}

#SubMenu ul li a.SubMenu2 {
	/*display:block;*/
	text-decoration:none;
	color:#404041;
	line-height:14px;
}

#SubMenu ul {
	margin:0;
	padding:0;
	height:0;
	overflow:hidden;
	list-style:none;
}

#SubMenu li.SubMenu1 {
	display:block;
	/* for IE7 to remove the vertical gap between list items */
	*float:left;
	list-style:none;
	/*padding:5px 0 5px 0;*/
	border-bottom-style:solid;
	border-color:#fdbf63;
	width:187px;
	background-image:url(../images/SubMenu1Button.png);
	/*background-position:center;*/
	background-repeat:no-repeat;
}

#SubMenu li.SubMenu1:hover {
	display:block;
	background-image:url(../images/SubMenu1ButtonHover.png);
	/*background-position:center;*/
}

#SubMenu li.SubMenu2 {
	display:block;
	/* for IE7 to remove the vertical gap between list items */
	*float:left;
	list-style:none;
	padding:5px 0 5px 21px;
	border-bottom-style:solid;
	border-color:#fdbf63;
	width:167px;
	background-image:url(../images/SubMenu2Button.png);
	background-position:center;
	background-repeat:no-repeat;
}

#SubMenu li.SubMenu2:hover {
	display:block;
	background-image:url(../images/SubMenu2ButtonHover.png);
}

#SubMenu li.last {
	border:none;
}
/* zu testzwecken */
/*#SubMenu ul.sub3 {height:84px;}*/

#SubMenu li a:active + ul, #SubMenu li a:focus + ul {
	/*padding:5px 0 0 0;*/
	background-image:url(../images/SubMenu2Button.png);
	background-position:center;
	background-repeat:no-repeat;
}

#SubMenu li a:active + ul.sub3, #SubMenu li a:focus + ul.sub3 {
	height:78px;
}

#SubMenu li a:active + ul.sub4, #SubMenu li a:focus + ul.sub4 { 
	height:110px;
}

#SubMenu li a:active + ul.sub5, #SubMenu li a:focus + ul.sub5 {
	height:140px;
}

/*#SubMenu li ul {padding:10px 0 10px 0;}*/

/*
#SubMenu li ul:hover {padding:0 0 10px 0;}
#SubMenu li ul.sub3:hover {height:70px;}
#SubMenu li ul.sub4:hover {height:110px;}
#SubMenu li ul.sub5:hover {height:140px;}
*/

Bin für Tips dankbar!

Edit:
Hab bisschen beim CSS rumgespielt und es nun sein lassen. Thread geschlossen.

✔ Menü zeigt bei Klick Untermenüpunkte an

anve

Mitglied

ComFreek

Mod | @comfreek

threadi

Erfahrenes Mitglied

SpiceLab

ZENmechanic

ComFreek

Mod | @comfreek

SpiceLab

ZENmechanic

hela

anve

Mitglied

Anhänge

Neue Beiträge