jQuery implements exquisite multi-level drop-down menu effects

This is an exquisite multi-level drop-down menu beautification, which can perfectly replace "select" to achieve the effect of drop-down menu. It also supports multi-level menus, with loading waiting effects and hierarchical classification display.

Copy code The code is as follows: http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> http://www.w3.org/1999/xhtml " xml:lang="en"> Filament Group Lab 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; } .fg-menu-ipod .fg-menu li { width: 95%; } .fg-menu-ipod .ui-widget-content { border:0; } $(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 an external source $.get('menuContent.html', function(data){ // grab content from another page $('#flyout').menu({ content: data, flyOut: true }); }); }); $(function(){ $(' ').appendTo('body').themeswitcher(); }); You chose:

flat menu Google Yahoo MSN Ask AOL flyout menu ipod-style menu Breaking News Entertainment Politics A&E Sports Baseball Basketball A really long label would wrap nicely as you can see Swimming High School College Professional Mens Swimming News Events Awards Schedule Team Members Fan Site Womens Swimming News Events Awards Schedule Team Members Fan Site Adult Recreational Youth Recreational Senior Recreational Tennis Ice Skating Javascript Programming Running Walking Local Health Entertainment Celebrity news Gossip Movies Music Alternative Country Dance Electronica Metal Pop Rock Bands Dokken Fan Clubs Songs Slide shows Red carpet Finance Personal Loans Savings Mortgage Debt Business Food & Cooking Breakfast Lunch Dinner Dessert Dump Cake Doritos Both please. Lifestyle News Politics Sports Baseball Basketball Swimming High School College Professional Mens Swimming News Events Awards Schedule Team Members Fan Site Womens Swimming News Events Awards Schedule Team Members Fan Site Adult Recreational Youth Recreational Senior Recreational Tennis Ice Skating Javascript Programming Running Walking ipod-style menu w/ breadcrumb Breaking News Entertainment Politics A&E Sports Baseball Basketball A really long label would wrap nicely as you can see Swimming High School College Professional Mens Swimming News Events Awards Schedule Team Members Fan Site Womens Swimming News Events Awards Schedule Team Members Fan Site Adult Recreational Youth Recreational Senior Recreational Tennis Ice Skating Javascript Programming Running Walking Local Health Entertainment Celebrity news Gossip Movies Music Alternative Country Dance Electronica Metal Pop Rock Bands Dokken Fan Clubs Songs Slide shows Red carpet Finance Personal Loans Savings Mortgage Debt Business Food & Cooking Breakfast Lunch Dinner Dessert Dump Cake Doritos Both please. Lifestyle News Politics Sports Baseball Basketball Swimming High School College Professional Mens Swimming News Events Awards Schedule Team Members Fan Site Womens Swimming News Events Awards Schedule Team Members Fan Site Adult Recreational Youth Recreational Senior Recreational Tennis Ice Skating Javascript Programming Running Walking 以上就是本文所述的全部内容了，希望对大家学习jQuery能够有所帮助。

jQuery implements exquisite multi-level drop-down menu effects_jquery