auskalppbare Menüs mit jquery

nima · 2. Januar 2013

hallo,
Weis jemand, ob man das skript so modifizieren kann, dass sich automatisch die anderen Meüpunkte einklappen, wenn man einen öffnet?
Lg und schon mal im vorhinein danke
niklas

ps.: img html ist auch noch die "main" datei von jquery - ich gluabe version 1.7.1 ´- inkludiert.

HTML

<div id="sidebar">
		<script type="text/javascript" >
		$(document).ready(function() {
		   $(".expand").click(function(e) {
		  	$("expanded").toggleClass("expand");
		  	$(this).toggleClass("expanded");
		  	$(this).children("ul:first").slideToggle("300");
		  	$(this).children("div:first").slideToggle("300");
		  	e.stopPropagation();
		   });
		}); //$(document).ready
		</script>
	<ul id="nav">
	<li class="expand"><h2>Dienstleistungen f&uuml;r...</h2>
    	<ul class="expand " >
        	<li class="expand"><h3>Verwaltung</h3>
            	<ul class="expand hidden">
                	<li><a href="asdfsdfasf">Betriebsaufsicht/Kontrolle</a></li>
                	<li><a href="">Beratung</a></li>
                	<li><a href="">Sachverst&auml;ndigent&auml;tigkeit</a></li>
                	<li><a href="">Planung und Bauaufsicht</a></li>
            	</ul>
        	</li>
        	<li class="expand"><h3>Industrie</h3>
            	<ul class="expand hidden">
                	<li><a href="">Betriebsanlagenplanung</a></li>
                	<li><a href="">Optimierung</a></li>
                	<li><a href="">Anlagenrevamping</a></li>
                	<li><a href="">Beh&ouml;rdenmanagement</a></li>
                	<li><a href="">Sicherheitstechnik</a></li>
                	<li><a href="">Pr&uuml;fung nach Gewerbeordnung §82b</a></li>
            	</ul>
        	</li>
        	<li class="expand"><h3>Abfallbehandlung</h3>
            	<ul class="expand hidden">
                	<li><a href="">Chemisch-Physikalisch</a></li>
                	<li><a href="">Kompostierung</a></li>
                	<li><a href="">Anaerob-Biogas</a></li>
                	<li><a href="">MBA-Mechnisch-Biologisch</a></li>
						  <li><a href="">Optimierung</a></li>
                	<li><a href="">Anlagenrevamping</a></li>
                	<li><a href="">Beh&ouml;rdenmanagement</a></li>
                	<li><a href="">Sicherheitstechnik</a></li>
                	<li><a href="">Pr&uuml;fung nach<br />Abfallwirtschaftsgesetz §62</a></li>
            	</ul>
        	</li>
        	<li class="expand"><h3>Forschung</h3>
        	</li>
    	</ul>
	</li>
	<li onclick="1l ()" class="expand"><h2>Projekte</h2>
    	<ul class="expand hidden">
        	<li><a href="">Industrie</a></li>
        	<li><a href="">Verwaltung</a></li>
        	<li><a href="">Abfallwirtschaft</a></li>
        	<li><a href="">Forschung</a></li>
    	</ul>
	</li>
	<li onclick="1l ()" class="expand"><h2>Kunden</h2>
    	<ul class="expand hidden">
        	<li><a href="">Industrie</a></li>
        	<li><a href="">Verwaltung</a></li>
        	<li><a href="">Abfallwirtschaft</a></li>
        	<li class="lastElement">Forschung</a></li>
    	</ul>
	</li>
	</div>

Alles anzeigen

CSS

#sidebar {
	padding: 0 0 0 0;
	color: #8F8F8F;
	background-color: #55a779;
	float: left;
	border: 3px solid #000000;
	box-shadow: 0 0 15px 2.5px #000;
}




#sidebar h2 {
	padding-left: 5px;
	padding-top: 6px;
	padding-bottom: 6px;
	background: #5C5C5C;
	letter-spacing: -.5px;
	font-size: 1.8em;
	color: #FFFFFF;
	font-weight: bold;;
	opacity: 1;
	text-shadow: 0 0 3px #000;
	cursor: s-resize;
	width: 250px;
	box-shadow: 0 -2.5px 5px #8C8C8C;
}




#sidebar h3 {
	letter-spacing: +2.5px;
	font-size: 20px;
	color: #DD9923;
	font-weight: bold;
	opacity: 1;
	text-align: center;
	text-shadow: 0 0 5px #010101;
	border-top: 1px #77BD8C solid;
	border-bottom: 0px;
	box-shadow: 0 2.5px 5px #77BD8C, 0 -2.5px 5px #050505;
	cursor: s-resize;
	width: 255px;
}




#sidebar p {
	margin: 0 0px;
	padding: 10px 30px 20px 30px;
	text-align: justify;
}




#sidebar a {
	border: none;
	color: #DD9923;
}




#sidebar a:hover {
	text-decoration: underline;
	color: #6E6E6E;
}




#sidebar ul {
	list-style: none;
	color: black;
}




.hidden {
	display: none;
}




#sidebar li ul {
}




#sidebar li ul li {
	line-height: 35px;
	width: 255px;
	letter-spacing: +2.5px;
	font-size: 20px;
	color: #DD9923;
	font-weight: bold;
	opacity: 1;
	text-align: center;
	text-shadow: 0 0 5px #010101;
	border-top: 1px #77BD8C solid;
	border-bottom: 0px;
	box-shadow: 0px 4px 5px #77BD8C, 0px -0.25px 2.5px 0px #050505;
	cursor: pointer;
}




#sidebar li ul li ul li {
	border-right: none;
	text-align: right;
	width: 250px;
	letter-spacing: 0px;
	font-size: 20px;
	color: #000000;
	font-weight: bold;
	opacity: 1;
	text-align: right;
	text-shadow: 0 0 6px #5C5C5C;
	border-top: none;
	border-bottom: 0px;
	box-shadow: none;
	cursor: pointer;
}




#sidebar li ul li ul li a {
	color: #000000;
}




#sidebar li ul li ul li :hover {
	border-right: none;
	text-align: right;
	width: 250px;
	letter-spacing: 0px;
	font-size: 18px;
	color: #DDDDDD;
	font-weight: bold;
	opacity: 1;
	text-align: right;
	text-shadow: 0 0 6px #000000;
	border-top: none;
	border-bottom: 0px;
	cursor: pointer;
}

Alles anzeigen

nima · 3. Januar 2013

im internet http://public.hannes-schurig.d…menu/navigation-demo.html

als demo.

Basi · 3. Januar 2013

Das sollte kein Problem sein

JavaScript

<script>
	$(document).ready(function() {
		$(".expand").click(function(e) {
		  $("expanded").toggleClass("expand");
		  $(this).siblings(".expand").children(".expand").slideUp("300");
		  $(this).toggleClass("expanded");
		  $(this).children("ul:first").slideToggle("300");
		  $(this).children("div:first").slideToggle("300");
		  e.stopPropagation();
		});
	}); //$(document).ready
</script>

Alles anzeigen

nima · 5. Januar 2013

wahnsinn!! danke funktioniert echt super..
also nochmals vielen Dank ich check jquery leider einfach ned..

Basi · 7. Januar 2013

Immer in die API schauen:

http://api.jquery.com/

Einfach durchstöbern bis man etwas gefunden hat wasm an gebrauchen kann, wie in diesem Fall z.B. .siblings(), .children() und .slideUp(), welche ins Deutsche übersetzt durchaus Sinn machen.

auskalppbare Menüs mit jquery

Jetzt mitmachen!

Teilen