HoverAccordion 制作卷帘菜单

HoverAccordion插件

最新推荐文章于 2017-08-04 12:17:00 发布

原创最新推荐文章于 2017-08-04 12:17:00 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery插件 #border #xhtml #html #function #float

jQuery Js 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个基于jQuery的HoverAccordion插件，该插件用于创建响应鼠标悬停的导航菜单。通过简单的HTML结构和少量配置参数即可实现优雅的下拉菜单效果。

HoverAccordion -- 一个jQuery插件

http://berndmatzner.de/jquery/hoveraccordion/

需要基于一个两层的无序列表框架，JS只需要接受外层ul的id值即可，格式如下：

<ul id="identifier"> <li><a href="#" mce_href="#">Item 1</a> <ul> <li>Subitem 1a</li> </ul> </li> <li><a href="#" mce_href="#">Item 2</a> <ul> <li>Subitem 2a</li> </ul> </li> </ul>

example：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> body{ margin:0; padding:0; font-size:14px; font-family:Arial; font-size:16px; font-weight:bold} ul{ margin:0; padding:0; list-style:none} div{ margin-top:20px; margin-left:50px; width:200px; color:#FFF; border:5px solid #090; overflow:hidden} #nav li{ width:200px ; margin-bottom:1px; float:left} #nav li a{ background-color:#000; display:block; height:28px; line-height:28px; padding-left:10px} #nav li ul{ height:98px; width:198px; color:#000; border:1px solid #000; display:block; overflow:hidden} #nav li ul li{ padding:10px; width:180px; margin-bottom:0;} a{ color:#FFF; text-decoration:none} </style> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript" src="js/jquery.hoveraccordion.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#nav').hoverAccordion({ activateitem: '1', speed: 'fast' }); }); </script> </head> <body> <div> <ul id="nav"> <li><a href="#">Home</a> <ul ><li>11111111111111<br />11111111111111</li></ul> </li> <li><a href="#">About us</a> <ul ><li>22222222222222<br />22222222222222</li></ul> </li> <li><a href="#">Company</a> <ul ><li>33333333333333<br />33333333333333</li></ul> </li> <li><a href="#">Product</a> <ul ><li>44444444444444<br />44444444444444</li></ul> </li> <li><a href="#">Cantact us</a> <ul ><li>55555555555555<br />55555555555555</li></ul> </li> </ul> </div> </body> </html>