JavaScript自定义多级联动浮动菜单[二]

发布时间：2018-08-19 03:16:26 所属栏目：创业来源：站长网

导读：烈火网教程上一个版本（第一版请看这里）基本实现了多级联动和浮动菜单的功能，但效果不是太好，使用麻烦还有些bug，实用性不高。这次除了修改已发现的问题外，还对程序做了大幅调整和改进，使程序实用性更高，功能更强大。主程序代码也从第一版的一百

　　烈火网教程上一个版本（第一版请看这里）基本实现了多级联动和浮动菜单的功能，但效果不是太好，使用麻烦还有些bug，实用性不高。

　　这次除了修改已发现的问题外，还对程序做了大幅调整和改进，使程序实用性更高，功能更强大。主程序代码也从第一版的一百多行增加到三百多，我写的程序中也就拖拉缩放效果有这个数量了。各位如果觉得文章还不错的记得给个大拇指啊。

<!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> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title><b>Java</b>Script 多级联动浮动菜单(二)_烈火网(liehuo.net)</title> </head> <body> <style type="text/css"> .container1 {height:30px;} .container1 div {float:left;} .container1 div, .container1_2 div {width:100px;background:#FAFCFD;border:1px solid #5c9cc0;padding:10px;} div.on1 {font-weight:bold;background:#EEF3F7;} div.on1_2 {font-weight:bold;background:#fffff7;border:1px solid #ffcc00;} </style> 菜单使用演示： <br> <br> <div id="idContainer1" class="container1"> </div> <div id="idContainer1_2" class="container1_2"> </div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <input id="idEdit" type="button" value="添加菜单 +"/> 位置： <select id="idRank"> <option value="3"> 第四个 </option> <option value="2"> 第三个</option> <option value="1"> 第二个 </option> <option value="0"> 第一个 </option> </select> <select id="idDelay"> <option value="1000"> 1秒</option> <option value="500"> 0.5秒 </option> <option value="200" selected> 0.2秒 </option> <option value="0"> 不延时 </option> </select> <br> <br> 仿<b>京东</b>商城商品分类菜单： <br> <br> <style type="text/css"> .container2, .container2 dd, .container2_2 dl, .container2_2 dd {margin:0;} .container2 {font-size:14px;width:190px;border:1px solid #cf2020;background:#fffff5;padding:5px 8px; line-height:30px; color:#333;} .container2 dt {font-weight:bold;color:#cf2020;} .container2 dd {background:url(http://www.veryhuo.com/uploads/allimg/090807/liehuo_n4.jpg) 180px 10px no-repeat;_zoom:1;} .container2_2 {background-color:#bebec3; display:none;} .container2_2 dl {font-size:14px;width:200px;border:1px solid #969696;background:#fff; position:relative; left:-3px; top:-3px; } .container2_2 dd div {padding:5px 20px; background:url(http://www.veryhuo.com/uploads/allimg/090807/liehuo_n4.jpg) 6px 7px no-repeat;_zoom:1;} .container2_2 dt, .shadow {padding:0 5px; position:absolute;background:#fff; border:1px solid #969696; border-right:0;width:169px;left:-180px; top:-1px;height:24px;line-height:24px;} .shadow {background-color:#bebec3;border-color:#bebec3; top:0;} .container2_2 a{display:block;_zoom:1;} .container2_2 a:link, .container2_2 a:visited, .container2_2 a:active {color:#333;text-decoration: none;} .container2_2 a:hover {color:#ff6026;text-decoration: underline;} </style> <dl id="idContainer2" class="container2"> <dt id="idMenu2_1">图片动画</dt> <dd id="idMenu2_2">图片效果</dd> <dd id="idMenu2_3">动画效果</dd> <dt id="idMenu2_51">系统其他</dt> <dd id="idMenu2_52">系统效果</dd> <dd id="idMenu2_53">其他效果</dd> </dl> <div id="idContainer2_2" class="container2_2"> <div class="shadow"></div> <dl> <dt id="idTitle"></dt> <dd id="idMenu2"> <div id="idMenu2_11"><a href="http://www.veryhuo.com/?07/06/SlideTrans.html" _fcksavedurl="http://www.veryhuo.com/?07/06/SlideTrans.html">图片滑动切换效果</a></div> <div id="idMenu2_12"><a href="http://www.veryhuo.com/?05/23/1205642.html" _fcksavedurl="http://www.veryhuo.com/?05/23/1205642.html">图片变换效果(ie only)</a></div> <div id="idMenu2_13"><a href="http://www.veryhuo.com/?05/13/1194272.html" _fcksavedurl="http://www.veryhuo.com/?05/13/1194272.html">图片滑动展示效果</a></div> <div id="idMenu2_14"><a href="http://www.veryhuo.com/?07/21/ImgCropper.html" _fcksavedurl="http://www.veryhuo.com/?07/21/ImgCropper.html">图片切割效果</a></div> <div id="idMenu2_21"><a href="http://www.veryhuo.com/?/01/06/Tween.html" _fcksavedurl="http://www.veryhuo.com/?/01/06/Tween.html">Tween算法及缓动效果</a></div> <div id="idMenu2_22"><a href="http://www.veryhuo.com/?08/27/1277131.html" _fcksavedurl="http://www.veryhuo.com/?08/27/1277131.html">渐变效果</a></div> <div id="idMenu2_61"><a href="http://www.veryhuo.com/?10/20/1314766.html" _fcksavedurl="http://www.veryhuo.com/?10/20/1314766.html">无刷新多文件上传系统</a></div> <div id="idMenu2_62"><a href="http://www.veryhuo.com/?10/05/ImgCropper_sys.html" _fcksavedurl="http://www.veryhuo.com/?10/05/ImgCropper_sys.html">图片切割系统</a></div> <div id="idMenu2_71"><a href="http://www.veryhuo.com/?11/17/Drag.html" _fcksavedurl="http://www.veryhuo.com/?11/17/Drag.html">拖放效果</a></div> <div id="idMenu2_72"><a href="http://www.veryhuo.com/?12/03/Resize.html" _fcksavedurl="http://www.veryhuo.com/?12/03/Resize.html">拖拉缩放效果</a></div> <div id="idMenu2_73"><a href="http://www.veryhuo.com/?12/24/Slider.html" _fcksavedurl="http://www.veryhuo.com/?12/24/Slider.html">滑动条效果</a></div> </dd> </dl> </div> <br> 仿右键菜单： <br> <br> <style type="text/css"> .container3 {font-size:12px;border:1px solid #9d9da1;padding:3px;line-height:18px; background:#FFF; cursor:default;-moz-user-select:none;_overflow:hidden;} .container3 div {padding:0 20px;} .menu3_1 {color:#aca899;_zoom:1;} .menu3_2 {background:url(http://www.veryhuo.com/uploads/allimg/090807/liehuo_nn5.gif) 140px 5px no-repeat;} .menu3_3 {background:url(http://www.veryhuo.com/uploads/allimg/090807/liehuo_nn1.gif) 7px 5px no-repeat;} .menu3_4 {background:url(http://www.veryhuo.com/uploads/allimg/090807/liehuo_nn2.gif) 7px 5px no-repeat;} .line3 {border-bottom:1px solid #9d9da1; _font-size:0; margin:4px 0;} .on3 {background-color:#bbb7c7;} /*----烈火网 www.veryhuo.com----*/ .area3 { width:500px; height:200px;border:1px solid #9d9da1;} .pos3 {position:absolute; display:none;line-height:20px; width:150px;} </style> <div id="idArea" class="area3"> </div> <div id="idContainer3" class="container3 pos3"> </div> <div id="idContainer3_2" class="container3"> </div> <br> 仿淘宝拼音索引菜单： <br> <br> <style type="text/css"> .container4 li, .container4_2 li{ list-style:none;} .container4 ul, .container4_2{margin:0;} .container4 {width:350px;padding:7px 10px;font:12px Verdana;border:1px solid #ccc;background:#fffeed; line-height:15px;height:15px; _overflow:hidden;} .container4 li {float:left;padding:0 10px; border-right:1px solid #ccc; } .container4 div {float:left;color:#000;padding-right:10px;} li.menu4 {position:relative;margin-left:-1px; top:-1px; z-index:9999;border:1px solid #85ccff; border-bottom:0; padding-bottom:8px; color:#ff6026; background:#dbf3ff;} .container4_2 {width:350px;padding:10px;border:1px solid #85ccff;background:#dbf3ff;line-height:25px;font-size:14px; font-weight:bold;display:none;} .container4_2 a{ display:block;_zoom:1;} .container4_2 a:link, .container4_2 a:visited, .container4_2 a:active {color:#565553;text-decoration: none;} .container4_2 a:hover {color:#ff5500;text-decoration: underline;} .container4 a:link, .container4 a:visited, .container4 a:hover, .container4 a:active {color:#565553;text-decoration: none;} .menu4 a:link, .menu4 a:visited, .menu4 a:active {color:#ff6026;} .menu4 a:hover{color:#ff6026;text-decoration:underline;} </style> <div id="idContainer4" class="container4"> <div><b>Tag索引</b></div> <ul id="idMenu4"> <li id="idMenu4_1"><a href="http://www.veryhuo.com/" _fcksavedurl="http://www.veryhuo.com/">index</a></li> <li id="idMenu4_2"><a href="http://tool.liehuo.net/" _fcksavedurl="http://tool.liehuo.net/">tool</a></li> <li id="idMenu4_3"><a href="http://bbs.liehuo.net/" _fcksavedurl="http://bbs.liehuo.net/">forum</a></li> <li id="idMenu4_4"><a href="http://baike.liehuo.net/" _fcksavedurl="http://baike.liehuo.net/">baike</a></li> <li id="idMenu4_5"><a href="http://link.liehuo.net/" _fcksavedurl="http://link.liehuo.net/">links</a></li> </ul> </div> <ul id="idContainer4_2" class="container4_2"> <li id="idMenu4_11"><a href="http://www.veryhuo.com/" _fcksavedurl="http://www.veryhuo.com/">烈火网</a></li> <li id="idMenu4_12"><a href="http://tool.liehuo.net/" _fcksavedurl="http://tool.liehuo.net/">站长工具</a></li> <li id="idMenu4_21"><a href="http://bbs.liehuo.net/" _fcksavedurl="http://bbs.liehuo.net/">交流论坛</a></li> <li id="idMenu4_22"><a href="http://alexa.liehuo.net/" _fcksavedurl="http://alexa.liehuo.net/">世界排名</a></li> <li id="idMenu4_31"><a href="http://baike.liehuo.net/" _fcksavedurl="http://baike.liehuo.net/">烈火百科</a></li> <li id="idMenu4_41"><a href="http://www.veryhuo.com/down/" _fcksavedurl="http://www.veryhuo.com/down/">软件下载</a></li> <li id="idMenu4_42"><a href="http://link.liehuo.net/" _fcksavedurl="http://link.liehuo.net/">友情链接</a></li> <li id="idMenu4_51"><a href="http://tool.liehuo.net/" _fcksavedurl="http://tool.liehuo.net/">百度收录</a></li> </ul> <br> <br> <br> <br> <br> <br> <br> </body> </html>
提示：可修改后代码再运行!

　　文章出处：http://www.cnblogs.com/cloudgamer/

（编辑：厦门网）

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

躺赚，坐等收钱的项目	微盟与复星达成战略合
一切的成功，全归功于	2021，做个健身教练没