Menü zeigt bei Klick Untermenüpunkte an @ tutorials.de: Tutorials, Forum & Hilfe

anve · 12.08.11 15:27

Hallo!

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

Ich habe bereits folgende ungeordnete Liste:

HTML-Code:

<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-Code:

<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.08.11 19:35

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

Mit JavaScript geht das auf jeden Fall:

HTML-Code:

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

Der JS-Code:

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:

Code css:

#menu li ul
{
  display: none;
}

threadi · 13.08.11 00:09

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.08.11 06:46

Zitat von ComFreek

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

Zitat von anve

Es soll auch für IE7 funktionieren.

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

**ComFreek** · 15.08.11 20:42

Zitat von spicelab

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.08.11 21:26

Zitat von ComFreek

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

Wohl bekomm's!

***hela*** · 16.08.11 11:02

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-Code:

<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:

Code css:

1	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.08.11 17:47

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-Code:

		<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>

Code css:

/* ================================================================ 
This copyright notice must be untouched at all times.
 
The original version of this stylesheet and the associated (x)html
is available at [url]http://www.cssplay.co.uk/SubMenus/cssplay-click-slide.html[/url]
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.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

JQuery - Untermenüpunkte sliden lassen

Untermenüpunkte bei Bedarf ausblenden

Bei Klick: Bildwechsel im JS-Menü

Dropdown Menü zeigt falsches Menü

Menü auf Klick ausblenden

E-Mail:

Abonnieren Abbestellen