Posted By

aznprncritic on 02/04/07

Tagged

Versions (?)

Last Edited at 02/04/07 08:09pm

Statistics

Viewed 1474 times

Favorited by 14 user(s)

Related snippets

Suckerfish Drop-Down Menus, jQuery-style

/ Published in: JavaScript

Haven't had a chance to use this but it looks very promising.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

/* 
 jQuery Suckerfish Drop Downs
*/
 
$(document).ready(function(){
    $("#nav-one li").hover(
        function(){ $("ul", this).fadeIn("fast"); }, 
        function() { } 
    );
    if (document.all) {
        $("#nav-one li").hoverClass ("sfHover");
    }
});
 
$.fn.hoverClass = function(c) {
    return this.each(function(){
        $(this).hover( 
            function() { $(this).addClass(c);  },
            function() { $(this).removeClass(c); }
        );
    });
};    
 
 
 
/* 
Sample Markup
*/
 
<ul id="nav-one" class="nav">
			<li>
 
				<a href="#item1">item 1</a>
				<ul>
					<li><a href="#item1.1">item 1.1</a></li>
					<li><a href="#item1.2">item 1.2</a></li>
					<li><a href="#item1.3">item 1.3</a></li>
					<li><a href="#item1.4">item 1.4</a></li>
 
				</ul>
			</li>
			<li>
				<a href="#item2">item 2</a>
				<ul>
					<li><a href="#item2.1">item 2.1</a></li>
					<li><a href="#item2.2">item 2.2</a></li>
 
				</ul>
			</li>
			<li>
				<a href="#item3">item 3</a>
				<ul>
					<li><a href="#item3.1">item 3.1</a></li>
					<li><a href="#item3.2">item 3.2</a></li>
 
				</ul>
			</li>
			<li>
				<a href="#item4">item 4</a>
				<ul>
					<li><a href="#item4.1">item 4.1</a></li>
					<li><a href="#item4.2">item 4.2</a></li>
 
					<li><a href="#item4.3">item 4.3</a></li>
				</ul>
			</li>
		</ul>