✔ Navigation mit slideToggle funktion

F

fredolin

Erfahrenes Mitglied
Hallo JS Freaks...

ich habe ein kleines Problem, was ich jetzt seit 2 Tagen mit mir herum schleppe..:-(

ich bin grad dabei eine neues Webseite auf zubauen, wo ich mit jquery arbeitet. Da möchte ich eine Navigation bauen, wo ich auf jeden Menulink ein Untermenu mit jQuery einblenden lasse.

Code
PHP: 
JavaScript Code
<script type="text/javascript"> 
	$(document).ready(function() {
	  
	   
	   <!-- Submenue //-->
	   var NavCounter = $(".slide_navi");
	   for (var i=1; i<=NavCounter; i++) {
	   		$(".slide_navi").click(function() {
	   		var content = $(".slide_content").slideToggle('slow');
	   		});
		}
	   alert("i:" + (NavCounter));
	   return true;
	   
	 });
</script>

HTML COde der Nav-Bar

<div class="navigation">
			<div class="slide_navi"><a href="#" title="Windkraft - Erneuerbare Energie"><span class="navText">Allge. Kenntnisse und Fertigkeiten</span></a></div>
			<div class="slide_navi"><a href="#" title="Windkraft - Erneuerbare Energie"><span class="navText">Fachkenntnisse Maschinenbautechnik</span></a></div>
			<div class="slide_navi"><a href="#" title="Windkraft - Erneuerbare Energie"><span class="navText">Fachkenntnisse<br />Elektrotechnik</span></a></div>
			<div class="slide_navi"><a href="#" title="Windkraft - Erneuerbare Energie"><span class="navText">Kontakt</span></a></div>
			<div class="slide_navi"><a href="#" title="Windkraft - Erneuerbare Energie"><span class="navText">Impressum</span></a></div>
			<div class="slide_content">
				<ul class="secmenue">
					<li><a href="#">Text1</a></li>
					<li><a href="#">Text1</a></li>
					<li><a href="#">Text1</a></li>
					<li><a href="#">Text1</a></li>
					<li><a href="#">Text1</a></li>
					<li><a href="#">Text1</a></li>
					<li><a href="#">Text1</a></li>
					<li><a href="#">Text1</a></li>
					<li><a href="#">Text1</a></li>
					<li><a href="#">Text1</a></li>
					<li><a href="#">Text1</a></li>
					<li><a href="#">Text1</a></li>
					<li><a href="#">Text1</a></li>
					<li><a href="#">Text1</a></li>
					<li><a href="#">Text1</a></li>
					<li><a href="#">Text1</a></li>
			</div>
		</div>

Problem:
ich habe mehrer Navi-Punkte und weiß nun nicht wie ich mit JavaScript so durch zählen kann, so das ich auf jeden Menulink auch das richtige Untermenu einblenden lasse.

Nun würde ichmich sehr freuen, wenn ich hier hilfe bekommen könnte und bedanke mich jetzt schon mal.

Gruß
Fredolin
 
Du brauchst im Umgang mit jQuery praktisch nie Schleifen, weil die jQuery Operationen auf einer Liste von Elementen arbeiten.
Da ich dein Markup nicht ganz verstehe, habe ich mir mal ein Beispiel.

http://jsfiddle.net/2WhJ2/1/

Mit nur zwei Zeilen jQuery ;-)
 
Danke CPoly für deine schnell Antwort.
Im Grunde kann ich mit dem was Du mir da gegeben hast gut was anfangen. Aber es wäre schön, wenn ich beim ersten Navlink das Submenue rausfährt. Klicke ich nun auf den zweiten NavLink, dann sollte das erste Submenue einfahren und das Submenu von Link2 ausfahren.

Ich hoffe ich hab nun das Problem etwas besser beschrieben..
 
Hallo CPoly,
erstmal super danke. Genau was ich gesucht habe. Kannst Du mir aber noch kurz eine Erklärung mit geben über deinen Code. Wäre für mich zum Verstehen und als Leihe schöner. Aber nur wenn es Dir keine Mühe macht.

Wäre super wenn Du das machen köntes.

Dennoch ein großes Danke an Dir..

Gruß Fredolin
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück