jquery动态弹性多级下拉菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery动态弹性多级下拉菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery动态弹性多级下拉菜单</title>
<link rel="stylesheet" type="text/css" href="css/sooperfish.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/sooperfish-theme-large.css" media="screen">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>

</head>
<body>

<br>

  <ul class="sf-menu" id="nav">
    <li class="current">
      <a href="#a">Fruits by Color</a>
      <ul>
        <li>
          <a href="#aa">All fruits with drawings and photos</a>
        </li>
        <li class="current">
          <a href="#ab">Red Fruits</a>
          <ul>
            <li class="current"><a href="#">Red Apples</a></li>
            <li><a href="#aba">Red Grapes</a></li>
            <li><a href="#abc">Cherries</a></li>
            <li><a href="#abb">Strawberries</a>
              <ul>
                <li class="current"><a href="#">Dutch Strawberries</a></li>
                <li><a href="#aba">French Strawberries</a></li>
                <li><a href="#abb">German Strawberries</a></li>
                <li><a href="#abc">American Strawberries</a></li>
                <li><a href="#abd">Scandinavian Strawberries</a></li>
              </ul>
            </li>
            <li><a href="#abd">Berries</a></li>
            <li><a href="#abd">Cherry Tomatoes</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Yellow Fruits</a>
          <ul>
            <li><a href="#">Bananas</a></li>
            <li><a href="#">Lemons</a></li>
            <li><a href="#">Mangos</a></li>
            <li><a href="#">Dragon Fruit</a></li>
            <li><a href="#">Tangerine</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Green Fruits</a>
          <ul>
            <li><a href="#">Green apples</a></li>
            <li><a href="#">Kiwis</a></li>
            <li><a href="#">Melons</a></li>
            <li><a href="#">Pears</a></li>
            <li><a href="#">Unripe bananas</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Singularity</a>
    </li>
    <li>
      <a href="#">Widgets</a>
      <ul>
        <li>
          <a href="#">Things</a>
          <ul>
            <li><a href="#">Red things</a></li>
            <li><a href="#">Blue things</a></li>
            <li><a href="#">Green things</a></li>
            <li><a href="#">Yellow things</a></li>
            <li><a href="#">Black things</a></li>
          </ul>
        </li>
        <li><a href="#">Stuff</a></li>
        <li>
          <a href="#">Others</a>
          <ul>
            <li><a href="#">Really white others</a></li>
            <li><a href="#">Broken white others</a></li>
            <li><a href="#">Silver others</a></li>
            <li><a href="#">Grey others</a></li>
            <li><a href="#">Ash others</a></li>
            <li><a href="#">Anthracite others</a></li>
            <li><a href="#">Really black others</a></li>
            <li><a href="#">Galactic void others</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Misc</a>
          <ul>
            <li><a href="#">Cyan others</a></li>
            <li><a href="#">Magenta others</a></li>
            <li><a href="#">Yellow others</a></li>
            <li><a href="#">Black others</a></li>
            <li><a href="#">White others</a></li>
            <li><a href="#">Cyan others</a></li>
            <li><a href="#">Magenta others</a></li>
            <li><a href="#">Yellow others</a></li>
            <li><a href="#">Black others</a></li>
            <li><a href="#">White others</a></li>
            <li><a href="#">Cyan others</a></li>
            <li><a href="#">Magenta others</a></li>
            <li><a href="#">Yellow others</a></li>
            <li><a href="#">Black others</a></li>
            <li><a href="#">White others</a></li>
            <li><a href="#">Cyan others</a></li>
            <li><a href="#">Magenta others</a></li>
            <li><a href="#">Yellow others</a></li>
            <li><a href="#">Black others</a></li>
            <li><a href="#">White others</a></li>
            <li><a href="#">Cyan others</a></li>
            <li><a href="#">Magenta others</a></li>
            <li><a href="#">Yellow others</a></li>
            <li><a href="#">Black others</a></li>
            <li><a href="#">White others</a></li>
            <li><a href="#">White others</a></li>
            <li><a href="#">White others</a></li>
          </ul>
        </li>
        <li><a href="#">Unique thing</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>	
  </ul>
</body>
</html>

JS代码(jquery.sooperfish.js):

/* * SooperFish 0.1 * (c) 2010 Jurriaan Roelofs - SooperThemes.com * Inspired by Suckerfish,Superfish and Droppy * Licensed GPL:http://www.gnu.org/licenses/gpl.html */
$.fn.sooperfish = function(op){
	var sf = $.fn.sooperfish;
	sf.o = [];
	sf.op ={
}
;
	sf.c ={
	menuClass:'sf-js-enabled',isParent:'sf-parent',arrowClass:'sf-arrow'}
;
	if ($.easing.easeOutOvershoot){
	//set default easing sooperEasingShow = 'easeOutOvershoot';
}
else{
	sooperEasingShow = 'linear';
}
;
	if ($.easing.easeInTurbo){
	sooperEasingHide = 'easeInTurbo';
}
else{
	sooperEasingHide = 'linear';
}
;
	sf.defaults ={
	multiColumn:true,dualColumn:6,//if a submenu has at least this many items it will be divided in 2 columns tripleColumn:12,//if a submenu has at least this many items it will be divided in 3 columns hoverClass:'sfHover',delay:500,//make sure menus only disappear when intended,500ms is advised by Jacob Nielsen animationShow:{
	height:'show'}
,speedShow:600,easingShow:sooperEasingShow,animationHide:{
	height:'hide',opacity:'hide'}
,speedHide:200,easingHide:sooperEasingHide,autoArrows:true,//Adds span elements to parent li elements,projecting arrow images on these items to indicate submenus. I added an alternative image file with white arrows. onShow:function(){
}
,//callback after showing menu onHide:function(){
}
//callback after hiding menu}
;
	//Merge default settings with o function parameter var o = $.extend({
}
,sf.defaults,op);
	if (!o.sooperfishWidth){
	o.sooperfishWidth = $('ul:first li:first',this).width();
	//if no width is set in options try to read it from DOM}
else{
	$('ul li',this).width(o.sooperfishWidth) //if width is set in invocation make sure this width is true for all submenus}
this.each(function(){
	//Check dom for submenus var parentLi = $('li:has(ul)',this);
	parentLi.each(function(){
	if (o.autoArrows){
	//Add autoArrows if requested $('>a',this).append('<span class="'+sf.c.arrowClass+'"></span>');
}
$(this).addClass(sf.c.isParent);
}
);
	$('ul',this).css({
	left:'auto',display:'none'}
);
	//The script needs to use display:none to make the hiding animation possible //Divide menu in columns //Set width override if (o.multiColumn){
	var uls = $('ul',this);
	uls.each(function(){
	var ulsize = $('>li:not(.backLava)',this).length;
	//Skip list items added by Lavalamp plugin if (ulsize >= o.dualColumn){
	if (ulsize >= o.tripleColumn){
	$(this).width(3*o.sooperfishWidth).addClass('multicolumn triplecolumn');
}
else{
	$(this).width(2*o.sooperfishWidth).addClass('multicolumn dualcolumn');
}
}
}
);
}
var root = this,zIndex = 1000;
	function getSubmenu(ele){
	if (ele.nodeName.toLowerCase() == 'li'){
	var submenu = $('> ul',ele);
	return submenu.length ? submenu[0]:null;
}
else{
	return ele;
}
}
function getActuator(ele){
	if (ele.nodeName.toLowerCase() == 'ul'){
	return $(ele).parents('li')[0];
}
else{
	return ele;
}
}
function hideSooperfishUl(){
	var submenu = getSubmenu(this);
	if (!submenu) return;
	$.data(submenu,'cancelHide',false);
	setTimeout(function(){
	if (!$.data(submenu,'cancelHide')){
	$(submenu).animate(o.animationHide,o.speedHide,o.easingHide,function(){
	o.onHide.call(submenu);
}
);
}
}
,o.delay);
}
function showSooperfishUl(){
	var submenu = getSubmenu(this);
	if (!submenu) return;
	$.data(submenu,'cancelHide',true);
	$(submenu).css({
	zIndex:zIndex++}
).animate(o.animationShow,o.speedShow,o.easingShow,function(){
	o.onShow.call(submenu);
}
);
	if (this.nodeName.toLowerCase() == 'ul'){
	var li = getActuator(this);
	$(li).addClass('hover');
	$('> a',li).addClass('hover');
}
}
// Bind Events. Yes it's that simple! $('li',this).unbind().hover(showSooperfishUl,hideSooperfishUl);
}
);
}
;

CSS代码(sooperfish-theme-large.css):

/* Configuration of menu width */
/**Stylesheet for SooperFish by www.SooperThemes.comAuthor:Jurriaan Roelofs*/
html body ul#nav ul,html body ul#nav ul li{width:200px;}
html body ul#nav ul ul{margin:0 0 0 200px;}
/* Theming the menu */
ul#nav{float:left;font-size:120%;border:solid #aeff5e;border-width:0 5px 0 5px;}
ul#nav ul{border-bottom:5px solid #aeff5e;background:#222;}
ul#nav li a{padding:20px 30px;font-family:"Lucida Sans","Century Gothic","Franklin Gothic Book","Franklin Gothic",helvetica,arial,verdana,sans;text-decoration:none;background:#222;color:#fff;}
ul#nav ul li a{padding:10px 15px;}
ul#nav li a:hover,ul#nav li a:focus{color:#aeff5e;}
ul#nav span.sf-arrow{top:28px;right:6px;background-image:url(images/arrows-white.png);}
ul#nav ul span.sf-arrow{right:12px;top:16px;}

附件:下载该文件资源,减少时间成本(增值服务)