jQuery实现精美的多级下拉菜单特效
这是一款精美的多级下拉菜单美化,可以完美替代“select”来实现下拉菜单的效果。而且支持多级菜单，有加载等待效果，有层级分类展示。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
<head>
<title>FilamentGroupLab</title>
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<scripttype="text/javascript"src="jquery-1.3.2.min.js"></script>
<scripttype="text/javascript"src="fg.menu.js"></script>
<linktype="text/css"href="fg.menu.css"media="screen"rel="stylesheet"/>
<linktype="text/css"href="theme/ui.all.css"media="screen"rel="stylesheet"/>
<!--stylesforthisexamplepageonly-->
<styletype="text/css">
body{font-size:62.5%;margin:0;padding:0;}
#menuLog{font-size:1.4em;margin:20px;}
.hidden{position:absolute;top:0;left:-9999px;width:1px;height:1px;overflow:hidden;}
.fg-button{clear:left;margin:04px40px450px;padding:.4em1em;text-decoration:none!important;cursor:pointer;position:relative;text-align:center;zoom:1;}
.fg-button.ui-icon{position:absolute;top:50%;margin-top:-8px;left:50%;margin-left:-8px;}
a.fg-button{float:left;}
button.fg-button{width:auto;overflow:visible;}/*removesextrabuttonwidthinIE*/
.fg-button-icon-left{padding-left:2.1em;}
.fg-button-icon-right{padding-right:2.1em;}
.fg-button-icon-left.ui-icon{right:auto;left:.2em;margin-left:0;}
.fg-button-icon-right.ui-icon{left:auto;right:.2em;margin-left:0;}
.fg-button-icon-solo{display:block;width:8px;text-indent:-9999px;} /*soloiconbuttonsmusthaveblockpropertiesforthetext-indenttowork*/
.fg-button.ui-state-loading.ui-icon{background:url(spinner_bar.gif)no-repeat00;}
</style>
<!--styleexceptionsforIE6-->
<!--[ifIE6]>
<styletype="text/css">
.fg-menu-ipod.fg-menuli{width:95%;}
.fg-menu-ipod.ui-widget-content{border:0;}
</style>
<![endif]-->
<scripttype="text/javascript">
$(function(){
//BUTTONS
$('.fg-button').hover(
function(){$(this).removeClass('ui-state-default').addClass('ui-state-focus');},
function(){$(this).removeClass('ui-state-focus').addClass('ui-state-default');}
);
//MENUS
$('#flat').menu({
content:$('#flat').next().html(),//grabcontentfromthispage
showSpeed:400
});
$('#hierarchy').menu({
content:$('#hierarchy').next().html(),
crumbDefaultText:''
});
$('#hierarchybreadcrumb').menu({
content:$('#hierarchybreadcrumb').next().html(),
backLink:false
});
//orfromanexternalsource
$.get('menuContent.html',function(data){//grabcontentfromanotherpage
$('#flyout').menu({content:data,flyOut:true});
});
});
</script>
<!--themeswitcherbutton-->
<scripttype="text/javascript"src="js/themeswitchertool"></script>
<scripttype="text/javascript">$(function(){$('<divstyle="position:absolute;top:20px;right:300px;"/>').appendTo('body').themeswitcher();});</script>
</head>
<body>
<pid="menuLog">Youchose:<spanid="menuSelection"></span></p>
<atabindex="0"href="#search-engines"class="fg-buttonfg-button-icon-rightui-widgetui-state-defaultui-corner-all"id="flat"><spanclass="ui-iconui-icon-triangle-1-s"></span>flatmenu</a>
<divid="search-engines"class="hidden">
<ul>
<li><ahref="#">Google</a></li>
<li><ahref="#">Yahoo</a></li>
<li><ahref="#">MSN</a></li>
<li><ahref="#">Ask</a></li>
<li><ahref="#">AOL</a></li>
</ul>
</div>
<atabindex="0"href="menuContent.html"class="fg-buttonfg-button-icon-rightui-widgetui-state-defaultui-corner-all"id="flyout"><spanclass="ui-iconui-icon-triangle-1-s"></span>flyoutmenu</a><atabindex="0"href="#news-items"class="fg-buttonfg-button-icon-rightui-widgetui-state-defaultui-corner-all"id="hierarchy"><spanclass="ui-iconui-icon-triangle-1-s"></span>ipod-stylemenu</a>
<divid="news-items"class="hidden">
<ul>
<li><ahref="#">BreakingNews</a>
<ul>
<li><ahref="#">Entertainment</a></li>
<li><ahref="#">Politics</a></li>
<li><ahref="#">A&E</a></li>
<li><ahref="#">Sports</a>
<ul>
<li><ahref="#">Baseball</a></li>
<li><ahref="#">Basketball</a></li>
<li><ahref="#">Areallylonglabelwouldwrapnicelyasyoucansee</a></li>
<li><ahref="#">Swimming</a>
<ul>
<li><ahref="#">HighSchool</a></li>
<li><ahref="#">College</a></li>
<li><ahref="#">Professional</a>
<ul>
<li><ahref="#">MensSwimming</a>
<ul>
<li><ahref="#">News</a></li>
<li><ahref="#">Events</a></li>
<li><ahref="#">Awards</a></li>
<li><ahref="#">Schedule</a></li>
<li><ahref="#">TeamMembers</a></li>
<li><ahref="#">FanSite</a></li>
</ul>
</li>
<li><ahref="#">WomensSwimming</a>
<ul>
<li><ahref="#">News</a></li>
<li><ahref="#">Events</a></li>
<li><ahref="#">Awards</a></li>
<li><ahref="#">Schedule</a></li>
<li><ahref="#">TeamMembers</a></li>
<li><ahref="#">FanSite</a></li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">AdultRecreational</a></li>
<li><ahref="#">YouthRecreational</a></li>
<li><ahref="#">SeniorRecreational</a></li>
</ul>
</li>
<li><ahref="#">Tennis</a></li>
<li><ahref="#">IceSkating</a></li>
<li><ahref="#">JavascriptProgramming</a></li>
<li><ahref="#">Running</a></li>
<li><ahref="#">Walking</a></li>
</ul>
</li>
<li><ahref="#">Local</a></li>
<li><ahref="#">Health</a></li>
</ul>
</li>
<li><ahref="#">Entertainment</a>
<ul>
<li><ahref="#">Celebritynews</a></li>
<li><ahref="#">Gossip</a></li>
<li><ahref="#">Movies</a></li>
<li><ahref="#">Music</a>
<ul>
<li><ahref="#">Alternative</a></li>
<li><ahref="#">Country</a></li>
<li><ahref="#">Dance</a></li>
<li><ahref="#">Electronica</a></li>
<li><ahref="#">Metal</a></li>
<li><ahref="#">Pop</a></li>
<li><ahref="#">Rock</a>
<ul>
<li><ahref="#">Bands</a>
<ul>
<li><ahref="#">Dokken</a></li>
</ul>
</li>
<li><ahref="#">FanClubs</a></li>
<li><ahref="#">Songs</a></li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">Slideshows</a></li>
<li><ahref="#">Redcarpet</a></li>
</ul>
</li>
<li><ahref="#">Finance</a>
<ul>
<li><ahref="#">Personal</a>
<ul>
<li><ahref="#">Loans</a></li>
<li><ahref="#">Savings</a></li>
<li><ahref="#">Mortgage</a></li>
<li><ahref="#">Debt</a></li>
</ul>
</li>
<li><ahref="#">Business</a></li>
</ul>
</li>
<li><ahref="#">Food&Cooking</a>
<ul>
<li><ahref="#">Breakfast</a></li>
<li><ahref="#">Lunch</a></li>
<li><ahref="#">Dinner</a></li>
<li><ahref="#">Dessert</a>
<ul>
<li><ahref="#">DumpCake</a></li>
<li><ahref="#">Doritos</a></li>
<li><ahref="#">Bothplease.</a></li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">Lifestyle</a></li>
<li><ahref="#">News</a></li>
<li><ahref="#">Politics</a></li>
<li><ahref="#">Sports</a>
<ul>
<li><ahref="#">Baseball</a></li>
<li><ahref="#">Basketball</a></li>
<li><ahref="#">Swimming</a>
<ul>
<li><ahref="#">HighSchool</a></li>
<li><ahref="#">College</a></li>
<li><ahref="#">Professional</a>
<ul>
<li><ahref="#">MensSwimming</a>
<ul>
<li><ahref="#">News</a></li>
<li><ahref="#">Events</a></li>
<li><ahref="#">Awards</a></li>
<li><ahref="#">Schedule</a></li>
<li><ahref="#">TeamMembers</a></li>
<li><ahref="#">FanSite</a></li>
</ul>
</li>
<li><ahref="#">WomensSwimming</a>
<ul>
<li><ahref="#">News</a></li>
<li><ahref="#">Events</a></li>
<li><ahref="#">Awards</a></li>
<li><ahref="#">Schedule</a></li>
<li><ahref="#">TeamMembers</a></li>
<li><ahref="#">FanSite</a></li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">AdultRecreational</a></li>
<li><ahref="#">YouthRecreational</a></li>
<li><ahref="#">SeniorRecreational</a></li>
</ul>
</li>
<li><ahref="#">Tennis</a></li>
<li><ahref="#">IceSkating</a></li>
<li><ahref="#">JavascriptProgramming</a></li>
<li><ahref="#">Running</a></li>
<li><ahref="#">Walking</a></li>
</ul>
</li>
</ul>
</div>
<atabindex="0"href="#news-items-2"class="fg-buttonfg-button-icon-rightui-widgetui-state-defaultui-corner-all"id="hierarchybreadcrumb"><spanclass="ui-iconui-icon-triangle-1-s"></span>ipod-stylemenuw/breadcrumb</a>
<divid="news-items-2"class="hidden">
<ul>
<li><ahref="#">BreakingNews</a>
<ul>
<li><ahref="#">Entertainment</a></li>
<li><ahref="#">Politics</a></li>
<li><ahref="#">A&E</a></li>
<li><ahref="#">Sports</a>
<ul>
<li><ahref="#">Baseball</a></li>
<li><ahref="#">Basketball</a></li>
<li><ahref="#">Areallylonglabelwouldwrapnicelyasyoucansee</a></li>
<li><ahref="#">Swimming</a>
<ul>
<li><ahref="#">HighSchool</a></li>
<li><ahref="#">College</a></li>
<li><ahref="#">Professional</a>
<ul>
<li><ahref="#">MensSwimming</a>
<ul>
<li><ahref="#">News</a></li>
<li><ahref="#">Events</a></li>
<li><ahref="#">Awards</a></li>
<li><ahref="#">Schedule</a></li>
<li><ahref="#">TeamMembers</a></li>
<li><ahref="#">FanSite</a></li>
</ul>
</li>
<li><ahref="#">WomensSwimming</a>
<ul>
<li><ahref="#">News</a></li>
<li><ahref="#">Events</a></li>
<li><ahref="#">Awards</a></li>
<li><ahref="#">Schedule</a></li>
<li><ahref="#">TeamMembers</a></li>
<li><ahref="#">FanSite</a></li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">AdultRecreational</a></li>
<li><ahref="#">YouthRecreational</a></li>
<li><ahref="#">SeniorRecreational</a></li>
</ul>
</li>
<li><ahref="#">Tennis</a></li>
<li><ahref="#">IceSkating</a></li>
<li><ahref="#">JavascriptProgramming</a></li>
<li><ahref="#">Running</a></li>
<li><ahref="#">Walking</a></li>
</ul>
</li>
<li><ahref="#">Local</a></li>
<li><ahref="#">Health</a></li>
</ul>
</li>
<li><ahref="#">Entertainment</a>
<ul>
<li><ahref="#">Celebritynews</a></li>
<li><ahref="#">Gossip</a></li>
<li><ahref="#">Movies</a></li>
<li><ahref="#">Music</a>
<ul>
<li><ahref="#">Alternative</a></li>
<li><ahref="#">Country</a></li>
<li><ahref="#">Dance</a></li>
<li><ahref="#">Electronica</a></li>
<li><ahref="#">Metal</a></li>
<li><ahref="#">Pop</a></li>
<li><ahref="#">Rock</a>
<ul>
<li><ahref="#">Bands</a>
<ul>
<li><ahref="#">Dokken</a></li>
</ul>
</li>
<li><ahref="#">FanClubs</a></li>
<li><ahref="#">Songs</a></li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">Slideshows</a></li>
<li><ahref="#">Redcarpet</a></li>
</ul>
</li>
<li><ahref="#">Finance</a>
<ul>
<li><ahref="#">Personal</a>
<ul>
<li><ahref="#">Loans</a></li>
<li><ahref="#">Savings</a></li>
<li><ahref="#">Mortgage</a></li>
<li><ahref="#">Debt</a></li>
</ul>
</li>
<li><ahref="#">Business</a></li>
</ul>
</li>
<li><ahref="#">Food&Cooking</a>
<ul>
<li><ahref="#">Breakfast</a></li>
<li><ahref="#">Lunch</a></li>
<li><ahref="#">Dinner</a></li>
<li><ahref="#">Dessert</a>
<ul>
<li><ahref="#">DumpCake</a></li>
<li><ahref="#">Doritos</a></li>
<li><ahref="#">Bothplease.</a></li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">Lifestyle</a></li>
<li><ahref="#">News</a></li>
<li><ahref="#">Politics</a></li>
<li><ahref="#">Sports</a>
<ul>
<li><ahref="#">Baseball</a></li>
<li><ahref="#">Basketball</a></li>
<li><ahref="#">Swimming</a>
<ul>
<li><ahref="#">HighSchool</a></li>
<li><ahref="#">College</a></li>
<li><ahref="#">Professional</a>
<ul>
<li><ahref="#">MensSwimming</a>
<ul>
<li><ahref="#">News</a></li>
<li><ahref="#">Events</a></li>
<li><ahref="#">Awards</a></li>
<li><ahref="#">Schedule</a></li>
<li><ahref="#">TeamMembers</a></li>
<li><ahref="#">FanSite</a></li>
</ul>
</li>
<li><ahref="#">WomensSwimming</a>
<ul>
<li><ahref="#">News</a></li>
<li><ahref="#">Events</a></li>
<li><ahref="#">Awards</a></li>
<li><ahref="#">Schedule</a></li>
<li><ahref="#">TeamMembers</a></li>
<li><ahref="#">FanSite</a></li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">AdultRecreational</a></li>
<li><ahref="#">YouthRecreational</a></li>
<li><ahref="#">SeniorRecreational</a></li>
</ul>
</li>
<li><ahref="#">Tennis</a></li>
<li><ahref="#">IceSkating</a></li>
<li><ahref="#">JavascriptProgramming</a></li>
<li><ahref="#">Running</a></li>
<li><ahref="#">Walking</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
以上就是本文所述的全部内容了，希望对大家学习jQuery能够有所帮助。