zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden JS Quicknavigation (hover)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.05.2008, 15:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.05.2007
Beiträge: 77
Sonny Lane befindet sich auf einem aufstrebenden Ast
Standard JS Quicknavigation (hover)

Hallo zusammen

Ich bin wieder einmal auf eure Hilfe angewiesen

Und zwar möchte ich eine Blog Quicknavigation erstellen, wie hier auf dem Bild ersichtlich:


Je nach dem, welche Kategorie gehovert wird, werden die entsprechenden Post-Titel rechts daneben angezeigt.

Leider konnte ich nirgendwo etwas vergleichbares finden, um mir mal anzuschauen wie es andere machen.
Ich verwende bereits jQuery, kann ein Beispiel aber sicher auch selbst auf jQuery umschreiben.

Beste Grüsse
SL
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.05.2008, 16:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.05.2007
Beiträge: 77
Sonny Lane befindet sich auf einem aufstrebenden Ast
Standard

Habe es soeben lösen können, für alle die es interessiert:

JS jQuery Code:
Code:
	$('#quicknav_posts ul').hide();
	$('#quicknav_cats h3').hover(function() {
		$('#quicknav_cats h3.hover').removeClass("hover");		
		var getClass = $(this).attr("class");
		/*alert(getClass);*/
		$('#quicknav_posts ul').hide();
		$('#quicknav_posts .' + getClass).show();			
		$(this).addClass("hover");		
	}, function() {		
	});
XHTML Code:
Code:
<div id="quicknav" class="clearfix">
	<div id="quicknav_cats">
		<h3 class="cat1">Kategorie1</h3>
		<h3 class="cat2">Kategorie2</h3>
		<h3 class="cat3">Kategorie3</h3>
		<h3 class="cat4">Kategorie4</h3>
		<h3 class="cat5">Kategorie5</h3>
		<h3 class="cat6">Kategorie6</h3>
	</div>	
	<div id="quicknav_posts">
		<ul class="cat1">
			<li><a href="#">Kategorie1 Post 1</a></li>
			<li><a href="#">Kategorie1 Post 2</a></li>
			<li><a href="#">Kategorie1 Post 3</a></li>
			<li><a href="#">Kategorie1 Post 4</a></li>
		</ul>
		<ul class="posts cat2">
			<li><a href="#">Kategorie2 Post 1</a></li>
			<li><a href="#">Kategorie2 Post 2</a></li>
			<li><a href="#">Kategorie2 Post 3</a></li>
			<li><a href="#">Kategorie2 Post 4</a></li>
		</ul>
		<ul class="posts cat3">
			<li><a href="#">Kategorie3 Post 1</a></li>
			<li><a href="#">Kategorie3 Post 2</a></li>
			<li><a href="#">Kategorie3 Post 3</a></li>
			<li><a href="#">Kategorie3 Post 4</a></li>
		</ul>
	</div>
</div>
Grüsse,
S.L.
Mit Zitat antworten
Sponsored Links
Antwort


Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 19:51
Problem mit CSS Menü SMundt CSS 9 07.01.2009 19:12
CSS Navigation - Problem mit IE6 pcklinik CSS 4 18.09.2007 12:04
Darstellungsproblem CSS Navigation im IE7 pcklinik CSS 7 09.09.2007 17:25
CSS Einsteiger bittet um Hilfe pcklinik CSS 0 06.09.2007 14:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:24 Uhr.