vue+html中利用hover制作三级菜单

最新推荐文章于 2024-04-25 15:57:52 发布

被蒙蔽了双眼

最新推荐文章于 2024-04-25 15:57:52 发布

阅读量546

点赞数

文章标签： vue js html css3

本文链接：https://blog.csdn.net/weixin_45319500/article/details/114277447

版权

效果

参考

https://blog.csdn.net/futianwenA/article/details/83999129

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title>Document</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#div-nav {
				width: 100%;
				height: 70px;
				
			}

			/*一级菜单*/
			.menu-1 {
				width: 140px;
				height: 70px;
				background: lightgray;
				box-shadow: 2px 0px 5px black;
				margin-left: 30px;
				text-align: center;
				line-height: 70px;
				font-size: 20px;
			}

			.menu-1:hover {
				background: dimgray;
			}

			/*二级菜单*/
			.menu2-all {
				margin-left: 140px;
				display: none;
				margin-top: -70px;
			}

			.menu-2 {
				width: 140px;
				height: 70px;
				background: lightgray;
				box-shadow: 2px 0px 5px black;
				text-align: center;
				line-height: 70px;
				font-size: 20px;
			}

			.menu-2:hover {
				background: dimgray;
			}

			/*三级菜单*/
			.menu3-all {
				position: relative;
				left: 140px;
				top: -70px;
				display: none;
			}

			.menu-3 {
				width: 140px;
				height: 70px;
				background: lightgray;
				box-shadow: 2px 0px 5px black;
				text-align: center;
				line-height: 70px;
				font-size: 20px;
			}

			.menu-1:hover .menu2-all {
				display: block;
			}

			.menu-2:hover .menu3-all {
				display: block;
			}

			.menu-3:hover {
				background: dimgray;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="div-nav" v-for="(item,index) in nav.data">				
				<div class="menu-1" id="div-user">
					{{item.name}}
					<div class="menu2-all">
						<div class="menu-2" id="div-write" v-for="(item2,index2) in item.second">
							{{item2.name}}
							<div class="menu3-all">
								<div class="menu-3" v-for="(item3,index3) in item2.third">{{item3.name}}</div>
							</div>
						</div>
					</div>

				</div>

			</div>
		</div>

	</body>

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue!',
				//前后端分离，推荐后端返回给前端数据格式
				//前后端分离，推荐后端返回给前端数据格式
				nav: {
					"status": 0, //执行状态码
					"msg": "SUCCESS", //说明文字信息，没有为NULL
					"data": [{ //对象中嵌套数组，数组是返回的数据，
						"id": 1,
						"name": "一级菜单",
						"second": [{
							"id": 11,
							"name": "二级菜单",
							"third": [{
								"id": 111,
								"name": "三级菜单1",
							},
							{
								"id": 112,
								"name": "三级菜单2",
							},
							{
								"id": 113,
								"name": "三级菜单3",
							}
							]
						}]
					}, {
						"id": 2,
						"name": "一级菜单2",
						"second": [{
							"id": 11,
							"name": "二级菜单2",
							"third": [{
								"id": 111,
								"name": "三级菜单4",
							},
							{
								"id": 112,
								"name": "三级菜单5",
							},
							
							]
						},
						{
							"id": 113,
							"name": "二级菜单3",
						}
						]
					}]
				},


				message2: 'Hello Vue!',
			},
			components: {
				
			},
			methods: {
				back: function() {
					this.$router.back(-1);
				}
			}
		})
	</script>
</html>

被蒙蔽了双眼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue+html中利用hover制作三级菜单

效果参考https://blog.csdn.net/futianwenA/article/details/83999129<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-
复制链接

扫一扫