昨天我向你們介紹了一款兼容性不錯的jQuery淡入淡出下拉菜單,今天要分享一款相對絢麗的CSS3垂直下拉動畫菜單,不過須要支持CSS3的瀏覽器纔能有效果。下面是效果圖,一塊兒看看。css
咱們也能夠在這裏查看菜單DEMO演示。html
下面來分析一下源代碼,首先是HTML代碼:html5
<nav> <ul class="mcd-menu"> <li> <a href=""> <i class="fa fa-home"></i> <strong>Home</strong> <small>sweet home</small> </a> </li> <li> <a href="" class="active"> <i class="fa fa-edit"></i> <strong>About us</strong> <small>sweet home</small> </a> </li> <li> <a href=""> <i class="fa fa-gift"></i> <strong>Features</strong> <small>sweet home</small> </a> </li> <li> <a href=""> <i class="fa fa-globe"></i> <strong>News</strong> <small>sweet home</small> </a> </li> <li> <a href=""> <i class="fa fa-comments-o"></i> <strong>Blog</strong> <small>what they say</small> </a> <ul> <li><a href="#"><i class="fa fa-globe"></i>Mission</a></li> <li> <a href="#"><i class="fa fa-group"></i>Our Team</a> <ul> <li><a href="#"><i class="fa fa-female"></i>Leyla Sparks</a></li> <li> <a href="#"><i class="fa fa-male"></i>Gleb Ismailov</a> <ul> <li><a href="#"><i class="fa fa-leaf"></i>About</a></li> <li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li> </ul> </li> <li><a href="#"><i class="fa fa-female"></i>Viktoria Gibbers</a></li> </ul> </li> <li><a href="#"><i class="fa fa-trophy"></i>Rewards</a></li> <li><a href="#"><i class="fa fa-certificate"></i>Certificates</a></li> </ul> </li> <li> <a href=""> <i class="fa fa-picture-o"></i> <strong>Portfolio</strong> <small>sweet home</small> </a> </li> <li> <a href=""> <i class="fa fa-envelope-o"></i> <strong>Contacts</strong> <small>drop a line</small> </a> </li> <li class="float"> <a class="search"> <input type="text" value="search ..."> <button><i class="fa fa-search"></i></button> </a> <a href="" class="search-mobile"> <i class="fa fa-search"></i> </a> </li> </ul> </nav>
這裏用ul構造了菜單的基本結構。css3
接下來就利用CSS3代碼來實現菜單的下拉和動畫效果。web
CSS代碼比較繁瑣,這裏我只是提供一些核心的CSS代碼,完整的代碼你們能夠在文章最後下載學習。瀏覽器
這是鼠標滑過菜單項時的動畫代碼:學習
.mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small { position: relative; transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; -moz-transition: all 300ms linear; -webkit-transition: all 300ms linear; } .mcd-menu li:hover > a i { opacity: 1; -webkit-animation: moveFromTop 300ms ease-in-out; -moz-animation: moveFromTop 300ms ease-in-out; -ms-animation: moveFromTop 300ms ease-in-out; -o-animation: moveFromTop 300ms ease-in-out; animation: moveFromTop 300ms ease-in-out; } .mcd-menu li:hover a strong { opacity: 1; -webkit-animation: moveFromLeft 300ms ease-in-out; -moz-animation: moveFromLeft 300ms ease-in-out; -ms-animation: moveFromLeft 300ms ease-in-out; -o-animation: moveFromLeft 300ms ease-in-out; animation: moveFromLeft 300ms ease-in-out; } .mcd-menu li:hover a small { opacity: 1; -webkit-animation: moveFromRight 300ms ease-in-out; -moz-animation: moveFromRight 300ms ease-in-out; -ms-animation: moveFromRight 300ms ease-in-out; -o-animation: moveFromRight 300ms ease-in-out; animation: moveFromRight 300ms ease-in-out; } .mcd-menu li:hover > a { color: #e67e22; }
如下定義了鼠標滑事後文字圖標滑過的動畫,分別是從頂部劃入,從左側劃入,從右側劃入:動畫
@-webkit-keyframes moveFromTop { from { opacity: 0; -webkit-transform: translateY(200%); -moz-transform: translateY(200%); -ms-transform: translateY(200%); -o-transform: translateY(200%); transform: translateY(200%); } to { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes moveFromLeft { from { opacity: 0; -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); -o-transform: translateX(200%); transform: translateX(200%); } to { opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes moveFromRight { from { opacity: 0; -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -ms-transform: translateX(-200%); -o-transform: translateX(-200%); transform: translateX(-200%); } to { opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } }
最後,把源代碼分享一下,下載地址>>spa