Vue指令实现下拉菜单效果

最新推荐文章于 2024-03-12 08:21:49 发布

℡52Hz★

最新推荐文章于 2024-03-12 08:21:49 发布

阅读量1k

点赞数

分类专栏：案例分享文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_53541336/article/details/129900621

版权

案例分享专栏收录该内容

17 篇文章 0 订阅

订阅专栏

上期我们讲述了有关vue的一些指令，今天就利用一些指令来实现下拉菜单效果吧。这里是仿照制作重庆红岩历史革命博物馆官网的导航栏，话不多说直接上代码：

（1）HTML和vue部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>仿重庆红岩历史革命博物馆官网的导航栏</title>
		<link rel="stylesheet" href="css/public.css">
		<link rel="stylesheet" href="css/homeWokr1.css">
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<!-- 头部 -->
		<div class="header">
			<div class="box">
				<img src="img/logo.png" >
				<div class="content">
					<img src="img/icon-18.png" >
					<ul class="contentUl">
						<li><a href="#">设为首页</a></li>
						<div class="line">|</div>
						<li><a href="#">加入收藏</a></li>
						<div class="line">|</div>
						<li><a href="#">热线：023-65312300（沙坪坝片区）023-63303457（渝中片区）</a></li>
						<div class="line">|</div>
						<li><a href="#">English</a></li>
					</ul>
					<form name="search" class="myform" method="post">
						<input type="text" name="key" value class="search" placeholder="请输入关键词"/>
						<span class="search_txt"><a href="#">搜索</a></span>
					</form>
				</div>
			</div>
		</div>
		<!-- 头部 end-->
		<!-- 导航部分 -->
		<div class="box2" >
			<ul  class="navUl" id="root" v-cloak>
				<li v-for="menu in menus" @mouseover="menu.show=!menu.show" @mouseout="menu.show=!menu.show" class="navLi">
					<a :href="menu.url">
						{{menu.name}}
					</a>
					<ul v-show="menu.show" class="navSub">
						<li v-for="subMenu in menu.subMenus" class="subLi">
							<a :href="subMenu.url">
								{{subMenu.name}}
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- 导航部分 end-->
		<!-- banner部分 -->
		<div class="box3"></div>
		<!-- banner部分 end-->
		<!-- js部分 -->
		<script>
		const app=Vue.createApp({
			data(){
				return{
					menus:[
					{
						name:'首页',url:'#',show:false
					},
					{
						name:'关于红岩',url:'#',show:false,subMenus:[
							{name:'红岩文化',url:'#'},
							{name:'博物馆机构',url:'#'},
							{name:'历史沿革',url:'#'}
						]
					},
					{
						name:'公告动态',url:'#',show:false,subMenus:[
							{name:'文博信息',url:'#'},
							{name:'政务平台',url:'#'},
							{name:'公告',url:'#'},
							{name:'专题报告',url:'#'}
						]
					},
					{
						name:'馆藏精品',url:'#',show:false,subMenus:[
							{name:'一级文物',url:'#'},
							{name:'二级文物',url:'#'},
							{name:'三级文物',url:'#'}
						]
					},
					{
						name:'陈列展馆',url:'#',show:false,subMenus:[
							{name:'虚拟展览',url:'#'},
							{name:'基本陈列',url:'#'},
							{name:'复原陈列',url:'#'},
							{name:'临时展览',url:'#'},
							{name:'展览交流',url:'#'}
						]
					},
					{
						name:'研究开发',url:'#',show:false,subMenus:[
							{name:'历史研究',url:'#'},
							{name:'艺术创作',url:'#'},
							{name:'影音在线',url:'#'},
							{name:'文创产品',url:'#'}
						]
					},
					{
						name:'公共教育',url:'#',show:false,subMenus:[
							{name:'党性教育',url:'#'},
							{name:'爱国主义教育',url:'#'},
							{name:'研学实践教育',url:'#'},
							{name:'科普教育',url:'#'}
						]
					},
					{
						name:'参观服务',url:'#',show:false,subMenus:[
							{name:'景点介绍',url:'#'},
							{name:'服务内容',url:'#'},
							{name:'网上预约',url:'#'},
							{name:'志愿服务',url:'#'}
						]
					},
					{
						name:'网上预约',url:'#',show:false,
					}
					]
				}
			},
			methods:{
				
			},
		});
		const vm=app.mount("#root");
		</script>
		<!-- js部分 end-->
	</body>
</html>

（2）css部分

.header{
	width: 100%;
	min-width: 1200px;
	height: 140px;
	background: url(../img/header-bg.png);
}
.box{
	width: 1024px;
	height: 140px;
	min-width: 1200px;
	/* background: #1E90FF; */
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
}
.box>img{
	width: 400px;
	height: 89px;
	margin-top: 20px;
}
.content{
	width: 570px;
	height: 95px;
	margin-top: 20px;
	/* background: #4855EC; */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	/* justify-content: flex-end; */
}
.content>img{
	width: 245px;
	height: 20px;
}
.contentUl{
	width: 560px;
	height: 20px;
	/* background: #fc0; */
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.contentUl>li>a{
	display: block;
	font-size: 12px;
	color: #ec1b23;
}
.contentUl>li>a:hover{
	color: #990000;
}
.line{
	font-size: 12px;
	color: #ec1b23;
}
.myform{
	width: 175px;
	height: 25px;
	margin-top: 10px;
}
.search{
	background: #fff;
	float: left;
	font-family: "宋体";
	font-size: 12px;
	height: 25px;
	text-indent: 1rem;
	width: 120px;
	border: 1px solid #d0d0d0;
}
.search_txt>a{
	display: block;
	float: left;
	width: 50px;
	height: 27px;
	background: #9d3328;
	color: #FFF;
	line-height: 27px;
	text-align: center;
}
.search_txt>a:hover{
	background: #FFCC00;
}
.box2{
	width: 100%;
	min-width: 1200px;
	border-bottom: 8px solid #ed1d24;
	height: 100px;
	background: url(../img/nav-bg.png);
}
.navUl{
	width: 1024px;
	height: 100px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-flow: row;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	/* background: #1E90FF; */
}
.navLi{
	height: 100px;
	line-height: 100px;
	position: relative;
}
.navUl>li>a{
	display: block;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}
.navUl>li>a:hover{
	background: url(../img/nav.png);
}
.navSub{
	width: 85px;
	text-align: center;
	position: absolute;
	/* top: 60px; */
	left: 75%;
	margin-left: -60px;
	font-size: 12px;
	background: #ed1d24;
}
.navSub>li>a{
	font-size: 16px;
	color: #fff;
	display: block;
	line-height: 50px;
	transition: all 0.5s;
}
.navSub>li>a:hover{
	background: #ee;
	opacity: 0.6;
}
[v-cloak]{
	display: none;
}
.box3{
	min-width: 1200px;
	width: 100%;
	height: 500px;
	background: url(../img/banner1.jpg);
	background-size: 100% 100%;
}

（3）效果展示