1、垂直菜单布局
2、垂直菜单实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $(".main>a").click(function(){ var ulNode = $(this).next("ul"); // if(ulNode.css("display")=="none"){ // ulNode.css("display", "block"); // }else{ // ulNode.css("display","none"); // }/*这种方法有些繁琐。*/ // ulNode.hide();/*隐藏*/ // ulNode.show();/*显示*/ //ulNode.toggle(500);/*显示/隐藏 这种是相对上面方便的方法*/ /* * 数字、slow、normal、fast * */ // ulNode.slideDown(); // ulNode.slideUp();//这两种方法也需要自己进行判断。 ulNode.slideToggle();//这种方法就不需要自己进行判断了。 });/*用尖角号防止点击子菜单也会执行上面函数*/ }); </script> <style> ul,li{ list-style: none; } ul{ padding:0px;/*覆盖子菜单的缩进*/ margin:0px;/*防止ie浏览器的问题。*/ } .main{ background-image: url("images/title.gif"); background-repeat: repeat-x; width:100px; } li{ background-color:#eeeeee; } a{ text-decoration: none; padding-left:20px; display:block; width:80px; padding-top:3px; padding-bottom:3px; } .main>a{ color:white; background-image: url("images/collapsed.gif"); background-repeat:no-repeat; background-position:3px center;/*距离左面3px，垂直方向居中*/ } .main li a{ color:black; background-image:none; } .main ul{ display:none; } </style> </head> <body> <ul> <li class="main"> <a href="#">菜单1</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a></li> </ul> </li> <li class="main"> <a href="#">菜单2</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a></li> </ul> </li> <li class="main"> <a href="#">菜单3</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a></li> </ul> </li> </ul> </body> </html>
3、水平菜单的实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function () { isClick = 1; /*为了防止多次点击而设置的变量*/ $(".main>a").click(function () { // 这里有个非常nice的写法：$(".main>a,.hmain>a").click(function(){ // if (isClick) { // isClick = 0; var ulNode = $(this).next("ul"); ulNode.stop(true,false).slideToggle();/*详情查询stop函数的用法啊，取消回调函数，两个参数第一个参数决定是否取消当前正在执行的动画， 第二个参数决定是否立即完成当前正在执行的动画。 我们在这里使用的动画效果不足以用到第一个参数，所以这里true和false都是可以的。
这里实现了如何避免动画重复的功能
*/ /*插两个标签：hover、stop标签*/ changeIcon($(this)); // setTimeout(function () { // isClick = 1; // }, 1000); // /*如何处理多次点击造成的之后一直执行动作的方法。 // 这里用的是toggle()函数所以没法分开两个动作的处理 // 比如在还没展开完毕的时候再次点击没有实现直接收回动作。*/ // } }); // $(".hmain").hover(function(){ // $(this).children("ul").slideToggle(); // });//这是一种比较简单的方法，下面还有一种很奇妙的方法，给hover两个函数对象作为参数。 isHover = 1; /*为了防止多次点击而设置的变量*/ $(".hmain").hover(function () { $(this).children("ul").stop(false,false).slideDown(500); changeIcon($(this).children("a")); /*点击的是main的子元素a标签之后执行的动作。*/ } , function () { $(this).children("ul").stop(false,false).slideUp(500); changeIcon($(this).children("a")); } ); /*jQuery官方文档中有介绍，这是有两个参数时的方法。 一个参数是鼠标放上去的时候有的动作，第二个参数时鼠标离开时将要执行的动作。*/ }); function changeIcon(mainNode) { if (mainNode) { if (mainNode.css("background-image").indexOf("collapse.gif") >= 0) {/*indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。*/ mainNode.css("background-image", "url('images/expanded.gif')"); } else { mainNode.css("background-image", "url('images/collapse.gif')"); } } } </script> <style> ul, li { list-style: none; } ul { padding: 0px; /*覆盖子菜单的缩进*/ margin: 0px; /*防止ie浏览器的问题。*/ } .main, .hmain { background-image: url("images/title.gif"); background-repeat: repeat-x; width: 100px; } li { background-color: #eeeeee; } a { text-decoration: none; padding-left: 20px; display: block; width: 80px; 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; /*距离左面3px，垂直方向居中*/ } .main li a, .hmain li a { color: black; background-image: none; } .main ul, .hmain ul { display: none; } .hmain { float: left; margin-right: 3px; } </style> </head> <body> <ul> <li class="main"> <a href="#">菜单1</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a></li> </ul> </li> <li class="main"> <a href="#">菜单2</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a></li> </ul> </li> <li class="main"> <a href="#">菜单3</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a></li> </ul> </li> <br/> <li class="hmain"> <a href="#">菜单1</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a></li> </ul> </li> <li class="hmain"> <a href="#">菜单2</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a></li> </ul> </li> <li class="hmain"> <a href="#">菜单3</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a></li> </ul> </li> </ul> </body> </html>