vue实现二级响应式导航栏

最新推荐文章于 2022-11-18 11:49:37 发布

置顶

fuckingVictory

最新推荐文章于 2022-11-18 11:49:37 发布

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue.js js html 文章标签：响应式导航栏导航栏响应式二级导航 vue实现导航栏] vue实现二级导航栏

本文链接：https://blog.youkuaiyun.com/weixin_44570977/article/details/90905641

本文介绍了如何使用Vue来创建一个既适用于PC端也适用于移动端的二级响应式导航栏，详细阐述了通过Vue实现数据和表现的分离以及二级导航栏的具体实现过程。

1.通过vue实现表现和数据分离
2.实现了二级导航栏
3.兼容pc端和移动端

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--禁止浏览器缓存-->
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		
		<title>响应式二级导航栏</title>		
				
		<style type="text/css">
			*{
				box-sizing: border-box;
			}
			html,body,div,ul,li,a{
				padding: 0;
				border: 0;
				margin: 0;
			}
			a{
				text-decoration: none;
				color: #000;
			}
			ul{
				clear: both;
				text-decoration: none;
				white-space: nowrap;
			}
			li{
				list-style: none;
			}
			.logo img{
				height: 46px;
				width: auto;
			}
			nav{
				display: flex;
				display: -webkit-flex; /* Safari */
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;
				padding: 0 30px;
				background: darkgray;
			}
			nav > .nav-item{
				position: relative;				
				padding: 20px 30px 20px 0;
			}
			nav .nav-item a{
				display: inline-block;
				width: 100%;
			}
			nav > .nav-item > a:visited{
				color: #000;
			}
			nav > .nav-item > a:hover,
			nav > .nav-item > a:focus{
				color: #fff;
			}
			nav > .nav-item > .dropdown{
				position: absolute;
				top: 50px;/*需根据需求来做调整*/
				left: 0;
				display: none;
				border-radius: 3px;
				bo