css就能實現(xiàn)簡單導(dǎo)航欄實例

　　導(dǎo)語：導(dǎo)航欄，是網(wǎng)業(yè)中比較重要的一個部分，不同的網(wǎng)頁有不不同的導(dǎo)航欄，各式各樣，你自己會寫導(dǎo)航欄嗎？下面的是百分網(wǎng)小編為大家整理的用css就能實現(xiàn)簡單導(dǎo)航欄實例，供大家參考。

　　上面是一個效果圖，代碼在下面：

　　html

　　XML/HTML Code復(fù)制內(nèi)容到剪貼板

　　<nav>

　　<ul class="nav-ul">

　　<li>

　　<a href="/">首頁</a>

　　</li>

　　<li>

　　<a href="/category/frontend">Web前端</a>

　　<ul>

　　<li class="nav-effect-1">

　　<a href="/category/frontend/javascript">JavaScript</a>

　　</li>

　　<li class="nav-effect-2">

　　<a href="/category/frontend/jq">JQuery</a>

　　</li>

　　<li class="nav-effect-3">

　　<a href="/category/frontend/style">CSS</a>

　　</li>

　　<li class="nav-effect-4">

　　<a href="/category/frontend/html">HTML</a>

　　</li>

　　</ul>

　　</li>

　　<li>

　　<a href="/category/end">后端</a>

　　<ul>

　　<li class="nav-effect-1">

　　<a href="/category/end/python-end">Python</a>

　　</li>

　　<li class="nav-effect-2">

　　<a href="category/end/php">PHP</a>

　　</li>

　　</ul>

　　</li>

　　<li>

　　<a href="/category/trivial">瑣碎雜類</a>

　　<ul>

　　<li class="nav-effect-1">

　　<a href="/category/trivial/linux">Linux</a>

　　</li>

　　<li class="nav-effect-2">

　　<a href="/category/trivial/ajax">Ajax</a>

　　</li>

　　</ul>

　　</li>

　　<li>

　　<a href="/category/life">我的生活</a>

　　<ul>

　　<li class="nav-effect-1">

　　<a href="/category/life/college">College</a>

　　</li>

　　<li class="nav-effect-2">

　　<a href="/category/life/review">Review</a>

　　</li>

　　<li class="nav-effect-3">

　　<a href="/category/life/sentiment">Sentiment</a>

　　</li>

　　</ul>

　　</li>

　　<li>

　　<a href="#">關(guān)于我</a>

　　<ul>

　　<li class="nav-effect-1">

　　<a href="/contribute">友情鏈接</a>

　　</li>

　　<li class="nav-effect-2">

　　<a href="/message">留言板</a>

　　</li>

　　</ul>

　　</li>

　　</ul>

　　</nav>

　　css:

　　CSS Code復(fù)制內(nèi)容到剪貼板

　　*{

　　margin:0 auto;

　　}

　　body{

　　background-color: #EEEEEE;

　　font-family: Microsoft Yahei,Arial,sans-serif;

　　}

　　nav{

　　width: 100%;

　　background-color: #455552;

　　position: relative;

　　width: 650px;

　　margin-top: 100px;

　　}

　　.nav-ul{

　　list-style: none;

　　}

　　.nav-ul>li{

　　display: inline-block;

　　position: relative;

　　}

　　.nav-ul a{

　　text-decoration: none;

　　color: #FFF;

　　display: inline-block;

　　padding: 10px 20px;

　　}

　　.nav-ul a:hover{

　　background-color: #1ABC9C;

　　}

　　.nav-ul a:hover+ul li{

　　opacity:1;

　　-webkit-transform: rotateY(0deg);

　　transform: rotateY(0deg);

　　}

　　.nav-ul a+ul{

　　list-style: none;

　　position: absolute;

　　transition: opacity 0.5s;

　　-webkit-perspective: 800;

　　-webkit-transform-style: preserve-3d;

　　}

　　.nav-ul a+ul:hover li{

　　opacity: 1;

　　-webkit-transform: rotateY(0deg);

　　transform: rotateY(0deg);

　　}

　　.nav-ul a+ul li{

　　position: relative;

　　left: -40px;

　　opacity: 0;

　　width: 150px;

　　transition: transform 1.5s,opacity 0.8s;

　　}

　　.nav-ul a+ul a{

　　display: inline-block;

　　width: 75%;

　　background-color: rgba(26,188, 156, 0.75);

　　}

　　.nav-effect-1{

　　transform: rotateY(90deg) translateX(10px);

　　}

　　.nav-effect-2{

　　transform: rotateY(120deg) translateX(20px);

　　}

　　.nav-effect-3{

　　transform: rotateY(150deg) translateX(30px);

　　}

　　.nav-effect-4{

　　transform: rotateY(180deg) translateX(40px);

　　}

　　.nav-ul a+ul a:hover{

　　background-color: rgba(69,85, 82, 0.75);

　　}

【css就能實現(xiàn)簡單導(dǎo)航欄實例】相關(guān)文章：

css實現(xiàn)的tab切換效果實例09-16

純css實現(xiàn)藍(lán)色圓角效果水平導(dǎo)航菜單代碼07-10

PHP應(yīng)用：用XSLT輕松實現(xiàn)樹形折疊導(dǎo)航欄08-05

CSS和JavaScript腳本實例10-26

讓網(wǎng)站變灰的css代碼實例05-30

CSS3實現(xiàn)選項卡切換的方法08-05

php中實現(xiàn)回刪功能實例10-03

CSS讓網(wǎng)頁設(shè)計簡單的方法07-31

CSS如何實現(xiàn)中英文雙語菜單效果代碼06-01

C語言實現(xiàn)歸并排序算法實例09-18