首頁  >  文章  >  web前端  >  純css做一個簡單好看的導覽列

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

零下一度
零下一度原創
2017-04-22 13:20:277289瀏覽

 自學做的一個自覺地簡單好看的導覽列的小樣式,用到了一些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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn