JQuery+DIV+CSS实现无限级联菜单

发布时间：2018-08-22 18:30:42 所属栏目：政策来源：站长网

导读：这是新一代框架技术 jQuery 实现的级联菜单，时间关系，效率可能不高。在IE6下不兼容，想用的朋友，只要把样式更改一下就可以实现无限级联的树型导航了。先来看一下效果演示图片：完整代码演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitiona

　　这是新一代框架技术jQuery实现的级联菜单，时间关系，效率可能不高。在IE6下不兼容，想用的朋友，只要把样式更改一下就可以实现无限级联的树型导航了。先来看一下效果演示图片：

　　完整代码演示：

<!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>多级菜单范例 - Liehuo.Net</title> <script type="text/javascript" language="javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.4.min.js"></script> <script type="text/javascript" language="javascript"> $(function JqueryNavigate() { $(function LoadCss() { var jquerynavigate = $("#jquerynavigate"); jquerynavigate.children().addClass("navigate"); jquerynavigate.children().children().addClass("firstmenu"); jquerynavigate = jquerynavigate.children().children().children(); if (jquerynavigate.is("div")) { jquerynavigate.addClass("firstlist"); jquerynavigate.children().addClass("menu"); jquerynavigate = jquerynavigate.children().children(); while (jquerynavigate.is("div")) { jquerynavigate.addClass("list"); jquerynavigate.children().addClass("menu"); jquerynavigate = jquerynavigate.children().children(); } } }); $(function LoadEven() { $(".firstmenu").mouseover(function() { $(this).css("background", "#333333"); $(this).children().show(); }); $(".firstmenu").mouseout(function() { $(this).css("background", "#400000"); $(this).children().hide(); }); $(".menu").mouseover(function() { $(this).css("background", "#000000"); $(this).children().show(); }); $(".menu").mouseout(function() { $(this).css("background", "#333333"); $(this).children().hide(); }); }); }); </script> <style type="text/css"> .navigate{ border-bottom:solid #CCF 1px; width:100%; text-align:center; white-space:nowrap;} .firstmenu{ background:#400000; color:#fff; position:relative; left:5px; bottom:1px; padding-top:5px; display:inline-block; width:150px; height:24px; border:solid #ccf 1px; border-bottom:0;} .firstlist{ background:#333333; position:absolute; top:24px; left:-1px; padding-top:5px; width:150px; border:solid #ccf 1px; border-top:0; display:none;} .menu{position:relative; padding-top:5px; width:150px; height:24px; padding-top:5px; } .list{ background:#333333; position:absolute; top:0; left:150px; width:150px; border:solid #ccf 1px; display:none;} #jquerynavigate{ top:40px; width:98%;} </style> </head> <body> <div id="jquerynavigate"><div> <div>一级菜单 <div><div>二级菜单 <div><div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div></div></div> <div>二级菜单 <div><div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div></div></div> <div>二级菜单 <div><div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div></div></div></div></div> <div>一级菜单 <div><div>二级菜单 <div><div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div></div></div> <div>二级菜单 <div><div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div></div></div> <div>二级菜单 <div><div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div></div></div></div></div> <div>一级菜单 <div><div>二级菜单 <div><div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div></div></div> <div>二级菜单 <div><div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div></div></div> <div>二级菜单 <div><div>三层菜单 <div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div><div>四层菜单</div></div></div> <div>三层菜单</div> </div></div></div></div> </div></div> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：老爷爷站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!