jQuery多级手风琴菜单示例说明

手风琴式菜单一般用于下拉导航，以其外观简洁，像手风琴一样伸缩而得名。手风琴效果在项目中的适当应用会给用户带来非常好的体验。在本文中，借助jQuery插件，我们可以轻松创建一个非常好的手风琴菜单。

HTML首先指jQuery和插件之间的头。

脚本类型=' text/JAVAScript ' src=' http : js/jquery . js '/script script type=' text/JAVAScript ' src=' http 3360 js/手风琴. js '/脚本然后，在主体之间编写菜单主体代码，HTML代码将由一系列无序列表组成。

ul class=' nav ' lia href='//www . JB 51 . net '主页/a/Li lia href=' # ' service/a/Li lia href=' # ' case/a/Li lia href=' # ' article/a/a ullia href=' # ' target=' _ blank。Li lia href=' # ' JavaScript/Ajax/Jquery/a ul lia href=' # ' Cookies/a/Li lia href=' # ' Event/a/Li lia href=' # ' Games/a/Li lia href=' # ' Images/a/Li/ul/Li lia href=' # ' target=' _ blank ' PHP/MySQL/a/Li lia href=' #' target=' _ blank '前端观察/a/Li lia href=' # ' target='。nav { width: 213pxpadd : 40px 28px 25px 0；} ul . nav { padd : 0；margin : 0；font-size : 1em；线高0.5emlist-style:无；} ul.nav li {} ul.nav阿利{ line-height : 10px；font-size : 14px；padding: 10px 5pxcolor: # 000display:块；文本装饰：无；字体粗细：更粗；} ul . nav Li a : hover { background-color : # 675 C7C；颜色：白色；} ul . nav ul { margin : 0；padd : 0；display:无；} ul . nav ul Li { margin : 0；padd : 0；clear:两者；} ul.nav ul阿利{ padding-left : 20px；font-size : 12px；font-weight:正常；} ul . nav ul Li a : hover { background-color : # d3c 99c；color: # 675C7C} ul.nav ul ul阿利{ color:silver左填充left: 40px} ul . nav ul ul Li a : hover { background-color : # D3CEB 8；color: # 675C7C} ul . nav span { float : right；} jQuery调用手风琴插件并设置相关属性，就完成了一个漂亮的手风琴效果。

$(function(){ $(')。nav ')。手风琴({ speed: 500，closedSign: '[ ]'，opened sign : '[-]' })；});手风琴提供了以下选项设置：速度：数字毫秒，设置菜单展开和关闭的时间。ClosedSign:当下方菜单关闭时，菜单旁边显示的内容可以是任何html或文本。OpenedSign:当展开下面的菜单时，菜单旁边显示的内容可以是任何html或文本。请注意，如果您想在菜单最初加载时展开它，您可以将class='active '添加到要展开的相应li中。

看完这篇文章，你想放弃原来的菜单吗？然后迅速行动，让你的网站焕然一新。