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>web前端学习（五）（9）-- jQuery菜单
原文地址：https://www.cnblogs.com/foreverlin/p/10123046.html