柯乐义高级菜单是使用jquery实现的弹出层菜单,可以有三级菜单项。效果网址:http://www.keleyi.com/keleyi/phtml/supermenu/
或者将下面的完整代码保存到html文件,打开查看效果。
本实例使用了jQuery的bind() 方法。bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
语法
$(selector).bind(event,data,function)
event 必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。
下面是完整的代码:
<!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>
<title>柯乐义高级弹出菜单(可以有三级菜单)</title>
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js"></script>
<link type="text/css" href="http://www.keleyi.com/keleyi/phtml/supermenu/keleyimenu.css" rel="Stylesheet" />
</head>
<body>
<div>柯乐义<br /><br /><br /><br /><br /><br /><br /><br /> </div><div style="width:300px;float:left;height:100px;">柯乐义高级弹出菜单</div>
<div id="menuframe" class="menuframe">
<div id="fathermenu" class="fathermenu">
<div id="menuitem1" class="menuitem" >
<a href="http://www.keleyi.com/menu/net/" target="_blank">一级菜单一</a>
</div>
<div id="menuitem2" class="menuitem">
<a href="http://www.keleyi.com/menu/jquery/" target="_blank">一级菜单二</a>
</div>
<div id="menuitem3" class="menuitem">
<a href="http://www.keleyi.com/menu/csharp/" target="_blank">一级菜单三</a>
</div>
</div>
<div id="submenuitem1" class="submenuitem">
<div class="stmenuframe"><div class="secondmenu"><a href="http://www.keleyi.com/menu/csharp/" target="_blank">二级菜单一组</a></div><div class="thirdmenu"><ul><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://www.keleyi.com/menu/csharp/" target="_blank">二级菜单一组</a></div><div class="thirdmenu"><ul><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://www.keleyi.com/menu/csharp/" target="_blank">二级菜单一组</a></div><div class="thirdmenu"><ul><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://www.keleyi.com/menu/csharp/" target="_blank">二级菜单一组</a></div><div class="thirdmenu"><ul><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://www.keleyi.com/" target="_blank">二级菜单一组</a></div><div class="thirdmenu"><ul><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://www.keleyi.com/" target="_blank">二级菜单一组</a></div><div class="thirdmenu"><ul><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://keleyi.com/" target="_blank">二级菜单一组</a></div><div class="thirdmenu"><ul><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
</div>
<div id="submenuitem2" class="submenuitem">
<div class="stmenuframe"><div class="secondmenu"><a href="http://keleyi.com/" target="_blank">二级菜单二组</a></div><div class="thirdmenu"><ul><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://keleyi.com/" target="_blank">二级菜单二组</a></div><div class="thirdmenu"><ul><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/net/" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://keleyi.com/" target="_blank">二级菜单二组</a></div><div class="thirdmenu"><ul><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://download.keleyi.com/" target="_blank">二级菜单二组</a></div><div class="thirdmenu"><ul><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://download.keleyi.com/" target="_blank">二级菜单二组</a></div><div class="thirdmenu"><ul><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://download.keleyi.com/" target="_blank">二级菜单二组</a></div><div class="thirdmenu"><ul><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.com" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://download.keleyi.com/soft/keleyiwatermark.rar" target="_blank">二级菜单二组</a></div><div class="thirdmenu"><ul><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
</div>
<div id="submenuitem3" class="submenuitem">
<div class="stmenuframe"><div class="secondmenu"><a href="http://download.keleyi.com/soft/keleyiwatermark.rar" target="_blank">二级菜单三组</a></div><div class="thirdmenu"><ul><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://download.keleyi.com/soft/keleyiwatermark.rar" target="_blank">二级菜单三组</a></div><div class="thirdmenu"><ul><li><a href="http://keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://download.keleyi.com/soft/keleyiwatermark.rar" target="_blank">二级菜单三组</a></div><div class="thirdmenu"><ul><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://download.keleyi.com/soft/keleyiwatermark.rar" target="_blank">二级菜单三组</a></div><div class="thirdmenu"><ul><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.cn" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://www.keleyi.com/menu/javascript/" target="_blank">二级菜单三组</a></div><div class="thirdmenu"><ul><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://www.keleyi.com/menu/javascript/" target="_blank">二级菜单三组</a></div><div class="thirdmenu"><ul><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
<div class="stmenuframe"><div class="secondmenu"><a href="http://www.keleyi.com/menu/javascript/" target="_blank">二级菜单三组</a></div><div class="thirdmenu"><ul><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">三级菜单</a></li></ul></div>
<div class="clear0"></div>
</div>
</div>
</div>
<div style="clear:both;width:100%;">Jquery DIV切换(版本2)http://www.keleyi.com/keleyi/phtml/divqiehuan2.htm </div>
<script type="text/javascript" src="http://www.keleyi.com/keleyi/phtml/supermenu/keleyimenu.js"></script>
</body>
</html>
本文转载自柯乐义http://www.keleyi.com/a/bjac/1329fae4a4a54bdd.htm