CSS3的一個簡單導(dǎo)航欄實現(xiàn)
淡忘~淺思 發(fā)布時間:2015-08-03 18:59:39 作者: dwqs
我要評論

這篇文章主要介紹了CSS3的一個簡單導(dǎo)航欄實現(xiàn),無需用到JavaScript,文章最后附有demo,需要的朋友可以參考下
上面是一個效果圖,代碼在下面:
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);
- }
查看demo:demo
相關(guān)文章
html+css+js實現(xiàn)導(dǎo)航欄滾動漸變效果
這篇文章主要介紹了html+css+js實現(xiàn)導(dǎo)航欄滾動漸變效果,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-01-28- 這篇文章主要介紹了純CSS實現(xiàn)導(dǎo)航欄下劃線跟隨效果,本文圖文并茂實例代碼詳解,給大家介紹的非常詳細(xì),需要的朋友參考下吧2019-12-09
- 這篇文章主要介紹了基于html+css 實現(xiàn)簡易導(dǎo)航欄功能,主要就是css(級聯(lián)樣式表)對html的內(nèi)容做格式化。具體內(nèi)容詳情大家跟隨小編一起通過本文學(xué)習(xí)吧2021-04-07
- 這篇文章主要介紹了CSS中的導(dǎo)航欄和下拉菜單的實現(xiàn)的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-18
- 這篇文章主要介紹了純CSS實現(xiàn)導(dǎo)航欄下劃線跟隨滑動效果,需要的朋友可以參考下2018-03-29
- 這篇文章主要介紹了使用CSS制作立體導(dǎo)航欄的相關(guān)資料,需要的朋友可以參考下2017-10-16
div+css實現(xiàn)帶箭頭的面包屑導(dǎo)航欄
本文主要介紹了制作漂亮美觀的帶箭頭的面包屑導(dǎo)航欄的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-06- 本篇文章主要介紹了CSS導(dǎo)航欄及彈窗示例代碼,導(dǎo)航欄和彈窗是在web中應(yīng)用很廣泛的,非常具有實用價值,需要的朋友可以參考下。2017-01-10
- CSS 的強(qiáng)大之處有的時候超乎我們的想象,Tab 切換,常規(guī)而言確實需要用到一定的腳本才能實現(xiàn)。下面看看如何使用純CSS實現(xiàn)導(dǎo)航欄Tab切換效果2016-10-13
- 這篇文章主要介紹了CSS利用偽元素實現(xiàn)導(dǎo)航欄斜線分隔的相關(guān)資料2016-03-14