純css做一個簡單好看的導覽列

 自學做的一個自覺地簡單好看的導覽列的小樣式，用到了一些css3屬性。 很簡單好看的一個導覽欄，喜歡的朋友可以看一下。

   先上程式碼 html的：

<nav>
		<ul>
			<li>哈哈哈</li>
			<li>吼吼吼</li>
			<li>嘿嘿嘿</li>
			<li>嘎嘎嘎</li>
			<li class="move"></li>
			<!--<li class="fly fly1"></li>
			<li class="fly fly2"></li>
			<li class="fly fly3"></li>
			<li class="fly fly4"></li>
			-->
		</ul>
	</nav>

css的：

nav,
ul,
li {
	padding: 0;
	margin: 0;}
nav {
	position: relative;
	left: 35%;
	top: 20px;
	
	width: 30%;
	height: 60px;
	background-color: #66CCFF;
	
	box-sizing: border-box;
	display: inline-block;
	}
ul {
	width: 100%;
	height: 60px;
	vertical-align: middle;
	}
li {
	display: inline-block;
	
	width: 20%;
	text-align: center;
	height: 60px;
	line-height: 60px;
	cursor: pointer;
	color: #000000;
	
	transition: color 0.4s ease-in-out;
	}
li:hover {
	color: #FFFFFF;}
.move {
	display: inline-block;
	border: 4px solid #FF3333;
	height: 0px;
	background-color: #FF3333;
	
	position: absolute;
	left: 0;
	top: 56px;
	
	transition: left 0.4s ease-in-out;}
li:nth-child(1):hover~.move {
	left: 0;}
li:nth-child(2):hover~.move {
	left: 20%;}
li:nth-child(3):hover~.move {
	left: 40%;}
li:nth-child(4):hover~.move {
	left: 60%;}

          開始做的時候，用float完成清單項目在一行的效果，這樣的結果就是順序會顛倒，而且還是以塊元素形式存在，所以同一導航欄其他內容無法排在一行，display：inline-block很好的解決了這一點。

         其他小亮點的使用就是，用一個li的空元素當做用來移動的標識，把他絕對定位到第一個位置，然後透過~來設定每個li元素的懸停時候move類別這個li空元素的位置。 （css3的新屬性真的很好用，尤其是過渡tratition屬性）

         ps：本想用同樣的原理，來實現當懸停時，實現從下到上的一個顏色變換。不過好像自己的思路不對，我設了四個空元素，把他們高度定為0，絕對定位到底，當懸停時高度變為60px，事實和想像還是有距離。

         前兩天終於拖沓的略讀了《css3專業開髮指南》這本書，css3的好多屬性雖然有些還沒有被規範使用，但效果真的很棒。也更加模糊了css，js之間的分界，不再是各管各事，不過對設計的人來說還是方便了不少。

   需要學習CSS的同學請關注php中文網CSS影片教學，眾多css線上影片教學可以免費觀看！     

#

以上是純css做一個簡單好看的導覽列的詳細內容。更多資訊請關注PHP中文網其他相關文章！