Advanced Search

Return to Snippet

Revision: 2372
at February 4, 2007 20:09 by aznprncritic
Initial Code 
/* 
 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>
Initial URL 
http://be.twixt.us/jquery/suckerFish.php
Initial Description 
Haven't had a chance to use this but it looks very promising.
Initial Title 
Suckerfish Drop-Down Menus, jQuery-style
Initial Tags 
javascript, dropdown, navigation
Initial Language 
JavaScript