JQuery实战总结二横向纵向菜单下拉效果图

ゞ浴缸里的玫瑰 2021-10-19 23:56 269阅读 0赞

记得以前在浏览了大多数网站的上面发现很多下拉的导航栏，觉得特别好玩，毕竟咱们是学习编程的嘛，对这下拉的效果还是挺感兴趣的，这种淡入淡出，随着鼠标移动的位置不同、有无等而出现不同的效果，给用户以神美感。

正好学习到有这块的知识，自己就跟着老师的视频真正的尝试了一下，效果出来了，真的很兴奋哈。

###  实现的基本效果图 ###

![Center][]

### HTML： ###

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JQuery实战-菜单效果</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/menu.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/menu.js"></script> </head> <body> <ul> <li class="main"> <a href="#">文件</a> <ul> <li><a href="#">新建</a></li> <li><a href="#">保存</a></li> </ul> </li> <li class="main"><a href="#">编辑</a> <ul> <li><a href="#">复制</a></li> <li><a href="#">查找</a></li> </ul> </li> <li class="main"><a href="#">帮助</a> <ul> <li><a href="#">检查更新</a></li> <li><a href="#">版本说明</a></li> </ul> </li> </ul> </li> </ul> <p>分割线————————分割线</p> <ul> <li class="hmain"> <a href="#">文件</a> <ul> <li><a href="#">新建</a></li> <li><a href="#">保存</a></li> </ul> </li> <li class="hmain"><a href="#">编辑</a> <ul> <li><a href="#">复制</a></li> <li><a href="#">查找</a></li> </ul> </li> <li class="hmain"><a href="#">帮助</a> <ul> <li><a href="#">检查更新</a></li> <li><a href="#">版本说明</a></li> </ul> </li> </ul> </body> </html>

### JS代码：还需要额外引用jquery.js文件 ###

menu.js:

$(document).ready(function(){ //页面中的DOM已经装载完成时，执行的代码 $(".main > a").click(function(){ //找到主菜单项对应的子菜单项 var ulNode = $(this).next("ul"); /* if (ulNode.css("display") == "none") { ulNode.css("display","block"); } else { ulNode.css("display","none"); } */ //ulNode.show("slow");//normal fast //ulNode.hide(); //ulNode.toggle(); // //ulNode.slideDown("slow"); //ulNode.slideUp; ulNode.slideToggle(); changeIcon($(this)); }); $(".hmain").hover(function(){ $(this).children("ul").slideDown(); changeIcon($(this).children("a")); },function(){ $(this).children("ul").slideUp(); changeIcon($(this).children("a")); }); }); /** * 修改主菜单的指示图标 */ function changeIcon(mainNode) { if (mainNode) { if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) { mainNode.css("background-image","url('images/expanded.gif')"); } else { mainNode.css("background-image","url('images/collapsed.gif')"); } } }

### CSS： ###

ul, li { /*清除ul和li上默认的小圆点*/ list-style: none; } ul { /*清除子菜单的缩进值*/ padding: 0; margin: 0; } .main, .hmain { background-image: url(../images/title.gif); background-repeat: repeat-x; width: 120px; } li { background-color: #EEEEEE; } a { /*取消所有的下划线*/ text-decoration: none; padding-left: 20px; display: block; display: inline-block; width: 100px; padding-top: 3px; padding-bottom: 3px; } .main a, .hmain a { color: white; background-image: url(../images/collapsed.gif); background-repeat: no-repeat; background-position: 3px center; } .main li a, .hmain li a { color: black; background-image: none; } .main ul, .hmain ul { display: none; } .hmain { float: left; margin-right: 1px; }

###    效果图： ###

![Center 1][]

###  总结 ###

这种效果在大量的网站上使用，咱们深入了解这个框架之后，我们后面的学习也会轻松很多哈，知识都是大同小异，需要我们不断的来回的使用，才能理解的深刻啊。小知识大思维，我们要打好基础，后面的学习应该就游刃有余了。

[Center]: /images/20211019/5beb1cef26624ccb8e371111b0e31fdc.png
[Center 1]: /images/20211019/37690fad733a42e1b0d56c9b7a41b7c2.png