本菜单控件允许用户自己添加多级下拉菜单,每一个菜单项可以定义子菜单的显示方向,使用ul和li控制菜单,非常方便,菜单显示带有动态效果
查看演示页面 View Demo 查看全部代码 View Code
下载
点击这里下载脚本源代码
在网页<head>区添加以下代码
<link rel="stylesheet" type="text/css" href="flexdropdown.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="flexdropdown.js"></script>
在网页<body>区添加以下代码
<h3>Drop Down Menu:</h3> <p style="text-align:left"><a href="http://www.sharejs.com" data-flexmenu="flexmenu1">sharejs.com</a></p> <h3>Drop to the right, with custom offset of 8px horizontally, 0px vertically, added:</h3> <p style="text-align:left"><a href="http://www.sharejs.com" data-flexmenu="flexmenu2" data-dir="h" data-offsets="8,0">Webmaster Resources(JavaScript)</a></p> <!--HTML for Flex Drop Down Menu 1--> <ul id="flexmenu1" class="flexdropdownmenu"> <li><a href="#">Item 1a</a></li> <li><a href="#">Item 2a</a></li> <li><a href="#">Item Folder 3a</a> <ul> <li><a href="#">Sub Item 3.1a</a></li> <li><a href="#">Sub Item 3.2a</a></li> <li><a href="#">Sub Item 3.3a</a></li> <li><a href="#">Sub Item 3.4a</a></li> </ul> </li> <li><a href="#">Item 4a</a></li> <li><a href="#">Item Folder 5a</a> <ul> <li><a href="#">Sub Item 5.1a</a></li> <li><a href="#">Item Folder 5.2a</a> <ul> <li><a href="#">Sub Item 5.2.1a</a></li> <li><a href="#">Sub Item 5.2.2a</a></li> <li><a href="#">Sub Item 5.2.3a</a></li> <li><a href="#">Sub Item 5.2.4a</a></li> </ul> </li> </ul> </li> <li><a href="#">Item 6a</a></li> </ul> <!--HTML for Flex Drop Down Menu 2--> <ul id="flexmenu2" class="flexdropdownmenu"> <li><a href="http://www.sharejs.com/">share javascript</a></li> <li><a href="http://www.cssdrive.com">CSS Drive</a></li> <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li> <li><a href="http://www.codingforums.com">Coding Forums</a></li> <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li> </ul>




