從實戰中學前端：頂部導航

時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。