Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

michey · 31-01-2011, 22:05

Hi

Möchte ein kleines >hier gucken> Accordion-Menu so umbasteln, dass die "selected" Klasse aus der hover-Animation ausgenommen wird, d.h. die selected menu links (blau/rot) sollen so stehen bleiben, wie sie beim Betreten der Seite angezeigt werden.
Hat jemand von euch eine Idee, wie das gehen könnte?

HTML-Code:

<style>
/* Menu */
#nav {float: left; width: 280px; border-top: 1px solid #bbb; border-right: 1px solid #bbb; border-left: 1px solid #bbb; margin-bottom: 15px;}
#nav li a {display: block; padding: 10px 15px 10px 35px; background: #ddd; border-top: 1px solid #eee; border-bottom: 1px solid #bbb; text-decoration: none; color: #000;}
#nav li a:hover, #nav li a.active {background: #ccc; color: #fff;}
#nav li ul {display: none; border-bottom: 1px solid #bbb;}
#nav li ul li a {padding: 10px 25px; background: #efefef; border-bottom: 1px dotted #ccc;}
#nav li a.selected {background: red; color: #blue;}
#nav li ul.selected {display: block; background: red; color: #blue;}
#nav li ul li a.selected {background: red; color: #blue;}
</style>
<script>
$(document).ready(function(){
    $('#nav > li').hover(
	function(){
		if ($('> a',this).attr('class') != 'active'){
			$('#nav li ul').slideUp();
			$('a',this).next().slideToggle();
			$('#nav li a').removeClass('active');
			$('> a',this).addClass('active');
			
		}
	},
	function(){
			$('#nav li ul').slideUp();
			$('#nav li a').removeClass('active');
	});
});
</script>

</head>
<body>
<div>
 
	    <h2 class="page-title">jQuery Demo: Simple Accordion Menu using Hover Event</h2>
		<div class="content-block">
		  <ul id="nav">
	    <li><a href="#">Item 1</a>
		  <ul>
		    <li><a href="#">Sub-Item 1 a</a></li>
			<li><a href="#">Sub-Item 1 b</a></li>
			<li><a href="#">Sub-Item 1 c</a></li>
		  </ul>
		</li>
		<li><a href="#" class="selected">Item 2</a>
		  <ul class="selected">
		    <li><a href="#" class="selected">Sub-Item 2 a</a></li>
			<li><a href="#">Sub-Item 2 b</a></li>
		  </ul>
		</li>
		<li><a href="#">Item 3</a>
		  <ul>
		    <li><a href="#">Sub-Item 3 a</a></li>
			<li><a href="#">Sub-Item 3 b</a></li>
			<li><a href="#">Sub-Item 3 c</a></li>
			<li><a href="#">Sub-Item 3 d</a></li>
		  </ul>
		</li>
		<li><a href="#">Item 4</a>
		  <ul>
		    <li><a href="#">Sub-Item 4 a</a></li>
			<li><a href="#">Sub-Item 4 b</a></li>
			<li><a href="#">Sub-Item 4 c</a></li>
		  </ul>
		</li>
	  </ul>
		</div>
</body>
</html>

michey · 01-02-2011, 09:27

:not(.selected) scheint die Lösung zu sein

HTML-Code:

<script type="text/javascript">
$(document).ready(function(){
    $('#nav > li').hover(
	function(){
		if ($('> a:not(.selected)',this).attr('class') != 'active'){
			$('#nav li ul:not(.selected)').slideUp();
			$('a:not(.selected)',this).next().slideToggle();
			$('#nav li a:not(.selected)').removeClass('active');
			$('> a:not(.selected)',this).addClass('active');			
		}
	},
	function(){
			$('#nav li ul:not(.selected)').slideUp();
			$('#nav li a:not(.selected)').removeClass('active');
	});
});
</script>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Accordion Menu // Selbstgemacht :)	stiffmeister	Stuff	7	17-03-2010 09:01
Accordion Menu verändern	Tiburon	Komponenten und SmartClips	12	24-04-2007 16:39
accordion-menu problem	gpunkt	Flash MX 2004	13	07-06-2006 17:36
Suche SAcript für Accordion Menu	SunboX	ActionScript 2	8	26-05-2006 11:23
UI Components Set5 - Accordion Style Menu	maniac2key	Komponenten und SmartClips	0	17-10-2003 21:03