《Flex分级下拉菜单》查看源代码

2010-02-23 18:08:04 | 【大中小】

本菜单控件允许用户自己添加多级下拉菜单，每一个菜单项可以定义子菜单的显示方向，使用ul和li控制菜单，非常方便，菜单显示带有动态效果

<!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>Flex分级下拉菜单 - 分享JavaScript-sharejs.com</title>
<meta name="Copyright" content="JavaScript分享网 http://www.sharejs.com/" />
<meta name="description" content="Flex分级下拉菜单,JavaScript分享网" />
<meta content="JavaScript,分享,JavaScript代码,Ajax" name="keywords" />
<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>
</head>
<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>

<br><br>
<div align="center">

<script language="javascript" src="http://www.sharejs.com/js/720.js"></script>
<br><br>

获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a>
<br>
转载请注明出处，本代码仅供学习交流，不可用于任何商业用途！
</div>
</body>
</html>

返回《Flex分级下拉菜单》

《Flex分级下拉菜单》 查看源代码

《Flex分级下拉菜单》查看源代码