jQuery菜单（Menu）

最新推荐文章于 2023-07-30 15:00:24 发布

原创最新推荐文章于 2023-07-30 15:00:24 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #jquery Menu

JQuery 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了一种实现垂直和水平菜单的交互设计方法，包括使用HTML、CSS和JavaScript（尤其是jQuery库）来创建响应式下拉菜单。垂直菜单通过点击触发子菜单的显示和隐藏，而水平菜单则在鼠标悬停时显示子菜单。文章还介绍了如何通过CSS和jQuery简化代码，以及如何在菜单项上添加切换图片的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：垂直菜单需要点击触发事件弹出子菜单
水平菜单鼠标移动到菜单上就会弹出子菜单，鼠标移开子菜单收起
1.垂直菜单布局

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="http://127.0.0.1/web/app.css">
<script src="http://127.0.0.1/web/jquery-3.3.1.js"></script>
<script src="http://127.0.0.1/web/Vmenu.js"></script>
</head>

<body>
<ul>
	<li class="mian">
    	<a href="#">菜单一</a>
    	<ul>
        	<li><a href="#">子菜单一</a></li>
            <li><a href="#">子菜单二</a></li>
        </ul>
       
    </li>
    <li class="mian">
    <a href="#">菜单二</a>
    	<ul>
        	<li><a href="#">子菜单一</a></li>
            <li><a href="#">子菜单二</a></li>
        </ul>
    </li>
    <li class="mian">
    
    <a href="#">菜单三</a>
    	<ul>
        	<li><a href="#">子菜单一</a></li>
            <li><a href="#">子菜单二</a></li>
        </ul></li>
</ul>
</body>
</html>

CSS文件

@charset "utf-8";
/* CSS Document */
ul,li{
	list-style:none;
	}
ul{
	padding:0;
	margin:0;
	}
.mian{
	background-color:#63C;
	/*只在X轴重复*/
	background-repeat:repeat-x;
	width:100px;}
li{
	background-color:#C63;
}

a{
	/*取消下滑线*/
	text-decoration:none；
	padding-left:20px;
	display:block;
	width:80px;
	padding-top:3px;
	padding-bottom:3px;
	
	}
.mian a{
	color:#FFF;
	}
.mian li a{
	color: black;}

垂直菜单
设置子菜单的隐藏与出现

if(urlNode.css("display") == "none"){
			urlNode.css("display","block");
			}else{
				
				urlNode.css("display","none");
				}

简化以上代码

urlNode.toggle();//数字,slow faast normal
//或者
urlNode.slideToggle();

水平菜单
CSS代码改变

.mian a,.hmian a{
	color:#FFF;
	}
.mian li a,.hmian li a{
	color: black;}
	/*默认子菜单收起*/
.mian ul,.hmian ul{
	display:none;
	}
.hmian{
	background-color:#63C;
	/*横向排列*/
	float:left;
	margin-left:1px;
	}

//鼠标滑动过后的事件
	$(".hmian").hover(function(){
		$(this).children("ul").slideToggle();
		});

点击切换图片

$(document).ready(function(e) {
	/*子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
	.mian>a意思为选择mian 的a子元素进行操作
	*/
    $(".mian>a").on("click",function(){
		//alert("点击了");
		var urlNode = $(this).next("ul");
		//if(urlNode.css("display") == "none"){
//			urlNode.css("display","block");
//			}else{
//				
//				urlNode.css("display","none");
//				}
		urlNode.toggle(1000);//数字,slow faast normal
		changeIcon($(this));
		//urlNode.slideToggle();
		});
		//鼠标滑动过后的事件
	$(".hmian").hover(function(){
		$(this).children("ul").slideToggle();
		});
		
});

function changeIcon(mainNode){
	if(mainNode){
		if(mainNode.css("bacground-image").indexOf("1.jpg")>=0){
			mainNode.css("bacground-image","url('image/1.jpg')");
			changeIcon($(this)).children("a");
			}else{
				mainNode.css("bacground-image","url('image/2.jpg')");
				changeIcon($(this)).children("a");
				}
		}
	};