This is a beautiful multi-level drop-down menu landscaping, can be a perfect substitute for "select" to achieve the effect of the Drop-down menu. and support multi-level menu, there is load waiting effect, there are hierarchical classification display.
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "en" >
<head>
<title>filament Group lab</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script type= "Text/javascript" src= "Jquery-1.3.2.min.js" ></script>
<script type= "Text/javascript" src= "Fg.menu.js" ></script>
<link type= "Text/css" href= "fg.menu.css" media= "screen" rel= "stylesheet"/>
<link type= "Text/css" href= "theme/ui.all.css" media= "screen" rel= "stylesheet"/>
<!--styles for this example page only-->
<style type= "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:0 4px 40px 450px; padding: 4em 1em; 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}/* Removes extra button width in IE * *
. 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;} /* Solo icon buttons must have block properties for the text-indent to work * *
. fg-button.ui-state-loading. Ui-icon {background:url (spinner_bar.gif) no-repeat 0 0;}
</style>
<!--style exceptions for IE 6-->
<!--[if IE 6]>
<style type= "Text/css" >
. fg-menu-ipod. fg-menu li {width:95%;}
. fg-menu-ipod. ui-widget-content {border:0;}
</style>
<! [endif]-->
<script type= "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 (),//grab content from this page
showspeed:400
});
$ (' #hierarchy '). Menu ({
Content: $ (' #hierarchy '). Next (). HTML (),
Crumbdefaulttext: '
});
$ (' #hierarchybreadcrumb '). Menu ({
Content: $ (' #hierarchybreadcrumb '). Next (). HTML (),
Backlink:false
});
or from a external source
$.get (' menucontent.html ', function (data) {//grab content from another page
$ (' #flyout '). Menu ({content:data, flyout:true});
});
});
</script>
<!--theme Switcher button-->
<script type= "Text/javascript" src= "Js/themeswitchertool" ></script>
<script type= "Text/javascript" > $ (Function () {$ (' <div style= ' position:absolute; top:20px; right:300px; "/ > '). Appendto (' body '). Themeswitcher (); }); </script>
</head>
<body>
<p id= "Menulog" >you chose: <span id= "Menuselection" ></span></p>
<a tabindex= "0" href= "#search-engines class= Fg-button fg-button-icon-right Ui-corner-all "id=" flat "><span class=" Ui-icon ui-icon-triangle-1-s "></span>flat menu</a>
<div id= "Search-engines" class= "hidden" >
<ul>
<li><a href= "#" >Google</a></li>
<li><a href= "#" >Yahoo</a></li>
<li><a href= "#" >MSN</a></li>
<li><a href= "#" >Ask</a></li>
<li><a href= "#" >AOL</a></li>
</ul>
</div>
<a tabindex= "0" href= "menucontent.html" class= "Fg-button fg-button-icon-right ui-widget, Ui-state-default Ui-corner-all "id=" flyout "><span class=" Ui-icon ui-icon-triangle-1-s "></span>flyout menu</a> <a tabindex= "0" href= "#news-items" class= "Fg-button fg-button-icon-right ui-widget, Ui-state-default ui-corner-all" Id= "Hierarchy" ><span class= "Ui-icon ui-icon-triangle-1-s" ></span>ipod-style menu</a>
<div id= "News-items" class= "hidden" >
<ul>
<li><a href= "#" >breaking news</a>
<ul>
<li><a href= "#" >Entertainment</a></li>
<li><a href= "#" >Politics</a></li>
<li><a href= "#" >A&E</a></li>
<li><a href= "#" >Sports</a>
<ul>
<li><a href= "#" >Baseball</a></li>
<li><a href= "#" >Basketball</a></li>
<li><a href= "#" >a really long label would wrap nicely as you can see</a></li>
<li><a href= "#" >Swimming</a>
<ul>
<li><a href= "#" >high school</a></li>
<li><a href= "#" >College</a></li>
<li><a href= "#" >Professional</a>
<ul>
<li><a href= "#" >mens swimming</a>
<ul>
<li><a href= "#" >News</a></li>
<li><a href= "#" >Events</a></li>
<li><a href= "#" >Awards</a></li>
<li><a href= "#" >Schedule</a></li>
<li><a href= "#" >team members</a></li>
<li><a href= "#" >fan site</a></li>
</ul>
</li>
<li><a href= "#" >womens swimming</a>
<ul>
<li><a href= "#" >News</a></li>
<li><a href= "#" >Events</a></li>
<li><a href= "#" >Awards</a></li>
<li><a href= "#" >Schedule</a></li>
<li><a href= "#" >team members</a></li>
<li><a href= "#" >fan site</a></li>
</ul>
</li>
</ul>
</li>
<li><a href= "#" >adult recreational</a></li>
<li><a href= "#" >youth recreational</a></li>
<li><a href= "#" >senior recreational</a></li>
</ul>
</li>
<li><a href= "#" >Tennis</a></li>
<li><a href= "#" >ice skating</a></li>
<li><a href= "#" >javascript programming</a></li>
<li><a href= "#" >Running</a></li>
<li><a href= "#" >Walking</a></li>
</ul>
</li>
<li><a href= "#" >Local</a></li>
<li><a href= "#" >Health</a></li>
</ul>
</li>
<li><a href= "#" >Entertainment</a>
<ul>
<li><a href= "#" >celebrity news</a></li>
<li><a href= "#" >Gossip</a></li>
<li><a href= "#" >Movies</a></li>
<li><a href= "#" >Music</a>
<ul>
<li><a href= "#" >Alternative</a></li>
<li><a href= "#" >Country</a></li>
<li><a href= "#" >Dance</a></li>
<li><a href= "#" >Electronica</a></li>
<li><a href= "#" >Metal</a></li>
<li><a href= "#" >Pop</a></li>
<li><a href= "#" >Rock</a>
<ul>
<li><a href= "#" >Bands</a>
<ul>
<li><a href= "#" >Dokken</a></li>
</ul>
</li>
<li><a href= "#" >fan clubs</a></li>
<li><a href= "#" >Songs</a></li>
</ul>
</li>
</ul>
</li>
<li><a href= "#" >slide shows</a></li>
<li><a href= "#" >red carpet</a></li>
</ul>
</li>
<li><a href= "#" >Finance</a>
<ul>
<li><a href= "#" >Personal</a>
<ul>
<li><a href= "#" >Loans</a></li>
<li><a href= "#" >Savings</a></li>
<li><a href= "#" >Mortgage</a></li>
<li><a href= "#" >Debt</a></li>
</ul>
</li>
<li><a href= "#" >Business</a></li>
</ul>
</li>
<li><a href= "#" >food & cooking</a>
<ul>
<li><a href= "#" >Breakfast</a></li>
<li><a href= "#" >Lunch</a></li>
<li><a href= "#" >Dinner</a></li>
<li><a href= "#" >Dessert</a>
<ul>
<li><a href= "#" >dump cake</a></li>
<li><a href= "#" >Doritos</a></li>
<li><a href= "#" >both please.</a></li>
</ul>
</li>
</ul>
</li>
<li><a href= "#" >Lifestyle</a></li>
<li><a href= "#" >News</a></li>
<li><a href= "#" >Politics</a></li>
<li><a href= "#" >Sports</a>
<ul>
<li><a href= "#" >Baseball</a></li>
<li><a href= "#" >Basketball</a></li>
<li><a href= "#" >Swimming</a>
<ul>
<li><a href= "#" >high school</a></li>
<li><a href= "#" >College</a></li>
<li><a href= "#" >Professional</a>
<ul>
<li><a href= "#" >mens swimming</a>
<ul>
<li><a href= "#" >News</a></li>
<li><a href= "#" >Events</a></li>
<li><a href= "#" >Awards</a></li>
<li><a href= "#" >Schedule</a></li>
<li><a href= "#" >team members</a></li>
<li><a href= "#" >fan site</a></li>
</ul>
</li>
<li><a href= "#" >womens swimming</a>
<ul>
<li><a href= "#" >News</a></li>
<li><a href= "#" >Events</a></li>
<li><a href= "#" >Awards</a></li>
<li><a href= "#" >Schedule</a></li>
<li><a href= "#" >team members</a></li>
<li><a href= "#" >fan site</a></li>
</ul>
</li>
</ul>
</li>
<li><a href= "#" >adult recreational</a></li>
<li><a href= "#" >youth recreational</a></li>
<li><a href= "#" >senior recreational</a></li>
</ul>
</li>
<li><a href= "#" >Tennis</a></li>
<li><a href= "#" >ice skating</a></li>
<li><a href= "#" >javascript programming</a></li>
<li><a href= "#" >Running</a></li>
<li><a href= "#" >Walking</a></li>
</ul>
</li>
</ul>
</div>
<a tabindex= "0" href= "#news-items-2 class= Fg-button fg-button-icon-right Ui-corner-all "id=" Hierarchybreadcrumb "><span class=" Ui-icon ui-icon-triangle-1-s "></span> Ipod-style Menu W/breadcrumb</a>
<div id= "news-items-2" class= "hidden" >
<ul>
<li><a href= "#" >breaking news</a>
<ul>
<li><a href= "#" >Entertainment</a></li>
<li><a href= "#" >Politics</a></li>
<li><a href= "#" >A&E</a></li>
<li><a href= "#" >Sports</a>
<ul>
<li><a href= "#" >Baseball</a></li>
<li><a href= "#" >Basketball</a></li>
<li><a href= "#" >a really long label would wrap nicely as you can see</a></li>
<li><a href= "#" >Swimming</a>
<ul>
<li><a href= "#" >high school</a></li>
<li><a href= "#" >College</a></li>
<li><a href= "#" >Professional</a>
<ul>
<li><a href= "#" >mens swimming</a>
<ul>
<li><a href= "#" >News</a></li>
<li><a href= "#" >Events</a></li>
<li><a href= "#" >Awards</a></li>
<li><a href= "#" >Schedule</a></li>
<li><a href= "#" >team members</a></li>
<li><a href= "#" >fan site</a></li>
</ul>
</li>
<li><a href= "#" >womens swimming</a>
<ul>
<li><a href= "#" >News</a></li>
<li><a href= "#" >Events</a></li>
<li><a href= "#" >Awards</a></li>
<li><a href= "#" >Schedule</a></li>
<li><a href= "#" >team members</a></li>
<li><a href= "#" >fan site</a></li>
</ul>
</li>
</ul>
</li>
<li><a href= "#" >adult recreational</a></li>
<li><a href= "#" >youth recreational</a></li>
<li><a href= "#" >senior recreational</a></li>
</ul>
</li>
<li><a href= "#" >Tennis</a></li>
<li><a href= "#" >ice skating</a></li>
<li><a href= "#" >javascript programming</a></li>
<li><a href= "#" >Running</a></li>
<li><a href= "#" >Walking</a></li>
</ul>
</li>
<li><a href= "#" >Local</a></li>
<li><a href= "#" >Health</a></li>
</ul>
</li>
<li><a href= "#" >Entertainment</a>
<ul>
<li><a href= "#" >celebrity news</a></li>
<li><a href= "#" >Gossip</a></li>
<li><a href= "#" >Movies</a></li>
<li><a href= "#" >Music</a>
<ul>
<li><a href= "#" >Alternative</a></li>
<li><a href= "#" >Country</a></li>
<li><a href= "#" >Dance</a></li>
<li><a href= "#" >Electronica</a></li>
<li><a href= "#" >Metal</a></li>
<li><a href= "#" >Pop</a></li>
<li><a href= "#" >Rock</a>
<ul>
<li><a href= "#" >Bands</a>
<ul>
<li><a href= "#" >Dokken</a></li>
</ul>
</li>
<li><a href= "#" >fan clubs</a></li>
<li><a href= "#" >Songs</a></li>
</ul>
</li>
</ul>
</li>
<li><a href= "#" >slide shows</a></li>
<li><a href= "#" >red carpet</a></li>
</ul>
</li>
<li><a href= "#" >Finance</a>
<ul>
<li><a href= "#" >Personal</a>
<ul>
<li><a href= "#" >Loans</a></li>
<li><a href= "#" >Savings</a></li>
<li><a href= "#" >Mortgage</a></li>
<li><a href= "#" >Debt</a></li>
</ul>
</li>
<li><a href= "#" >Business</a></li>
</ul>
</li>
<li><a href= "#" >food & cooking</a>
<ul>
<li><a href= "#" >Breakfast</a></li>
<li><a href= "#" >Lunch</a></li>
<li><a href= "#" >Dinner</a></li>
<li><a href= "#" >Dessert</a>
<ul>
<li><a href= "#" >dump cake</a></li>
<li><a href= "#" >Doritos</a></li>
<li><a href= "#" >both please.</a></li>
</ul>
</li>
</ul>
</li>
<li><a href= "#" >Lifestyle</a></li>
<li><a href= "#" >News</a></li>
<li><a href= "#" >Politics</a></li>
<li><a href= "#" >Sports</a>
<ul>
<li><a href= "#" >Baseball</a></li>
<li><a href= "#" >Basketball</a></li>
<li><a href= "#" >Swimming</a>
<ul>
<li><a href= "#" >high school</a></li>
<li><a href= "#" >College</a></li>
<li><a href= "#" >Professional</a>
<ul>
<li><a href= "#" >mens swimming</a>
<ul>
<li><a href= "#" >News</a></li>
<li><a href= "#" >Events</a></li>
<li><a href= "#" >Awards</a></li>
<li><a href= "#" >Schedule</a></li>
<li><a href= "#" >team members</a></li>
<li><a href= "#" >fan site</a></li>
</ul>
</li>
<li><a href= "#" >womens swimming</a>
<ul>
<li><a href= "#" >News</a></li>
<li><a href= "#" >Events</a></li>
<li><a href= "#" >Awards</a></li>
<li><a href= "#" >Schedule</a></li>
<li><a href= "#" >team members</a></li>
<li><a href= "#" >fan site</a></li>
</ul>
</li>
</ul>
</li>
<li><a href= "#" >adult recreational</a></li>
<li><a href= "#" >youth recreational</a></li>
<li><a href= "#" >senior recreational</a></li>
</ul>
</li>
<li><a href= "#" >Tennis</a></li>
<li><a href= "#" >ice skating</a></li>
<li><a href= "#" >javascript programming</a></li>
<li><a href= "#" >Running</a></li>
<li><a href= "#" >Walking</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
That's all the stuff in this article, and hopefully it will help you learn about jquery.