从实战中学前端：顶部导航

时间 2019-11-12

标签实战中学前端顶部导航繁體版

原文原文链接

本篇是从实战中学前端的第二篇，上一篇用css实现了几个还不错的按钮，这一篇来实现顶部导航，其中包含二级导航的实现。css

首先咱们来看看将要实现的导航效果图： html

接下来咱们要实现的导航功能：前端

活动导航下滑横线
鼠标悬停于菜单上显示下滑背景
支持二级导航

提示：在第一篇中，咱们讲了css的三种用法，这里咱们使用第三种即把css放在一个单独的文件中html5

实现思路：观察导航条咱们发现导航分为：大背景、一级菜单、菜单下划线、二级菜单块、二级菜单及部分构成，一级菜单每一个菜单是水平一行，而二级菜单是竖行。.net

这里咱们用<ul>标签来实现一个个菜单，<ul>称之为无序列表标签，经常使用标签之一，其每一个子项用<li>标签实现。code

html5中新增了<nav>标签，即英文单词navgator的缩写，表示导航，这里咱们把nav做为最外层，下面是基本的代码：htm

<nav>
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">新闻类别</a></li>
		<li><a href="#">技术达人</a></li>
		<li><a href="#">关于咱们</a></li>
		<li><a href="#">加入咱们</a></li>
	</ul>
</nav>

效果如图：blog

这不是咱们想要的效果，下面咱们写css代码，并给相应的html代码加上类属性，具体功能看注释：图片

/*class选择器，导航条类*/
.navbar{
	width: 100%;/*宽度100%*/
	z-index: 1000;
	margin: 0;
	padding-top: 5px;
	height: 60px;
}
/*导航条默认样式，便于之后根据须要更改导航条样式*/
.navbar-default {
	background: #323232;
	color: white;
	font-size: 18px;
}
/*导航正文样式*/
.navbar-content{
	position: relative;/*对菜单进行定位，使用相对模式*/
}
.navbar-content ul,li{
	list-style: none;/*屏蔽每一个li之间的小圆点（小圆点也能够为其余样式，如方块）*/
}
.navbar-content li{
	padding: 5px;
	float: left;/*使Li左浮动，即实现水平，由于ul默认是竖直的*/
}
.navbar-default>.navbar-content {
	background: #323232;
	color: white;/*文字颜色*/
	font-size: 18px;/*文本大小*/
}



<nav class="navbar navbar-default">
	<ul class="navbar-content">
		<li><a href="#">首页</a></li>
		<li><a href="#">新闻类别</a></li>
		<li><a href="#">技术达人</a></li>
		<li><a href="#">关于咱们</a></li>
		<li><a href="#">加入咱们</a></li>
	</ul>
</nav>

效果图：pdo

接下来咱们改变文本样式和增长绿色下划线效果：

.navbar {
	width: 100%;
	z-index: 1000;
	margin: 0;
	padding-top: 5px;
	min-height: 60px;
	}
.navbar-content {
	display: block;
}
.navbar-header {
	display: none;
}
.navbar-default {
	background: #323232;
}
.navbar>ul>li {
	float: left;
	width: 130px;
	text-align: center;/*文字居中*/
	list-style: none;
}
.navbar>ul>li>a {
	padding: 17px 0;
	color: rgba(255, 255, 255, 0.8);/*rgba颜色模式，分别表明红绿蓝和透明度值*/
	border-bottom: 5px solid rgba(255, 255, 255, 0);
	text-decoration: none;/*连接取消下划线*/
}
.navbar>ul>li>a:hover,
.navbar>ul>.active>a {
	border-bottom: 5px solid rgba(50, 205, 50, 1);/*底部边框，即那条绿色边框*/
	color: rgba(255, 255, 255, 1);
	width: 130px;
}
.navbar>ul>.active>a {
	padding: 17px;
}

效果图：

接下来实现二级菜单：思路：所谓二级菜单不过就是正常状况下隐藏，当鼠标悬浮或滑过期显示，这里能够用css的display属性：display:block显示，display:none；就会隐藏。二级菜单咱们仍然放在ul中，只是此次li不须要浮动，让它天然显示。

/*二级导航核心部分*/
.navbar>ul>.dropdown-menu>ul {
        display: none;/*使二级菜单隐藏*/
	position: relative;
	top: 25px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	border: 1px solid #e7e7e7;
	text-align: center;
}
.dropdown-menu>ul>li {
	padding: 12px;
}
.navbar>ul>.dropdown-menu:hover>a {
	border-bottom: 5px solid rgba(50, 205, 50, 1);
	color: rgba(255, 255, 255, 1);
	padding: 17px 15px;
}

.navbar>ul>.dropdown-menu:hover>ul {
	display: block;/*鼠标悬浮即hover属性时显示*/
}

.dropdown-menu>ul a {
	color: #000000;
	font-weight: 500;
	text-decoration: none;
}

.dropdown-menu>ul a:hover {
	color: orangered;
	font-weight: 800;
}

<!--html代码-->
<nav class="navbar navbar-default">
	<ul class="navbar-content">
	<li class="active"><a href="#">首页</a></li>
	<li class="dropdown-menu">
		<a href="#">新闻类别</a>
		<ul>
			<li><a href="#">创业故事</a></li>
			<li><a href="#">今日热点</a></li>
		</ul>
		</li>
		<li><a href="#">技术达人</a></li>
		<li><a href="#">关于咱们</a></li>
		<li><a href="#">加入咱们</a></li>
	</ul>
</nav>

效果图

从图中看，这里的实现还有点问题，本文就不去实现了，留给读者本身去实现。

PS：写文真的是一件痛苦的事，本文总体思路感受有点混乱，上了一天班也只有晚上有空，在第一篇有网友评论鼓励我继续写下去成为一个系列，感谢鼓励。我会努力，纠正我这种懒惰不想写文的思想。

附所有代码：

注：这里我为了方便就放在一个文件里边，建议将css放在一个单独的css文件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>顶部导航</title>
		<style>
			.navbar {
				width: 100%;
				z-index: 1000;
				margin: 0;
				padding-top: 5px;
				min-height: 60px;
			}
			.navbar-content {
				display: block;
			}
			.navbar-header {
				display: none;
			}
			.navbar-default {
				background: #323232;
			}
			.navbar>ul>li {
				float: left;
				width: 130px;
				text-align: center;
				list-style: none;
			}
			.navbar li {
				list-style: none;
			}
			.navbar>ul>li>a {
				padding: 17px 0;
				color: rgba(255, 255, 255, 0.8);
				border-bottom: 5px solid rgba(255, 255, 255, 0);
				text-decoration: none;
			}
			.navbar>ul>li>a:hover,
			.navbar>ul>.active>a {
				border-bottom: 5px solid rgba(50, 205, 50, 1);
				color: rgba(255, 255, 255, 1);
				width: 130px;
			}
			.navbar>ul>.active>a {
				padding: 17px;
			}
			.navbar>ul>.dropdown-menu>ul {
				display: none;
				position: relative;
				top: 25px;
				box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
				border: 1px solid #e7e7e7;
				text-align: center;
			}
			.dropdown-menu>ul>li {
				padding: 12px;
			}
			.navbar>ul>.dropdown-menu:hover>a {
				border-bottom: 5px solid rgba(50, 205, 50, 1);
				color: rgba(255, 255, 255, 1);
				padding: 17px 15px;
			}
			.navbar>ul>.dropdown-menu:hover>ul {
				display: block;
			}
			.dropdown-menu>ul a {
				color: #000000;
				font-weight: 500;
				text-decoration: none;
			}
			.dropdown-menu>ul a:hover {
				color: orangered;
				font-weight: 800;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-default">
			<ul class="navbar-content">
				<li class="active"><a href="#">首页</a></li>
				<li class="dropdown-menu">
					<a href="#">新闻类别</a>
					<ul>
						<li><a href="#">创业故事</a></li>
						<li><a href="#">今日热点</a></li>
					</ul>
				</li>
				<li><a href="#">技术达人</a></li>
				<li><a href="#">关于咱们</a></li>
				<li><a href="#">加入咱们</a></li>
			</ul>
		</nav>
	</body>
</html>