HoverAccordion 製作捲簾菜單

原創

bennman

2020-02-23 23:44

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>

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

HoverAccordion 製作捲簾菜單

python gdal 安裝使用（Windows， python 3.6.8）

36個引人注目的jquery菜單

position:fixed -------> IE6

offsetWidth、offsetHeight 算法

AS3一些不太常見的代碼寫法

getDefinitionByName/getQualifiedClassName/getQualifiedSuperclassName

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結