2015-5-29 藍藍設計的小編
藍藍設計( paul-jarrel.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每一個扁平化界面設計,都是我們的心靈碰撞致力于最棒的 metro ui 設計
這是一款基于純CSS3的菜單導航,這款菜單非常有個性,菜單背景是一頁古老的筆記本紙張,菜單項像是浮動的文字一樣嵌入在紙張上。鼠標滑過菜單項時會出現不同的背景線條,顯得相當可愛。這款CSS3菜單導航非常適合在個人博客中使用。
這款CSS3菜單外觀是扇形的,并且在鼠標滑過菜單時,扇形菜單項將會以動畫的方式展開,并且支持多級下拉菜單。
該菜單有兩個特點:1.響應式布局,這就意味著隨著頁面大小的變化,菜單的布局也會發生自適應變化,特別適合在移動設備上使用。2.鼠標滑過動畫,鼠標滑過菜單項時可以漸變滑動,動畫效果還不錯。
這款CSS3菜單有一個很漂亮的黑色氣泡背景,菜單是銀白色的,和黑色的背景交織在一起更加顯得有3D立體的視覺效果。CSS3的運用讓菜單有圓角的效果,鼠標滑過菜單時也會改變背景。
下面是實現這款CSS3菜單的過程和源代碼,一起來看看。
<nav> <ul class="fancyNav"> <li id="home"><a href="#home" class="homeIcon">Home</a></li> <li id="news"><a href="#news">News</a></li> <li id="about"><a href="#about">About us</a></li> <li id="services"><a href="#services">Services</a></li> <li id="contact"><a href="#contact">Contact us</a></li> </ul> </nav>
這里我們用了ul li列表構造了菜單的結構,非常簡單。
.fancyNav{ /* Affects the UL element */ overflow: hidden; display: inline-block; } .fancyNav li{ /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */ background-color: #f0f0f0; background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6)); background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%); background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%); background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%); background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%); border-right: 1px solid rgba(9, 9, 9, 0.125); /* Adding a 1px inset highlight for a more polished efect: */ box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset; -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset; -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset; position:relative; float: left; list-style: none; } .fancyNav li:after{ /* This creates a pseudo element inslide each LI */ content:'.'; text-indent:-9999px; overflow:hidden; position:absolute; width:100%; height:100%; top:0; left:0; z-index:1; opacity:0; /* Gradients! */ background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5))); background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */ box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff; -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff; -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff; /* This will create a smooth transition for the opacity property */ -moz-transition:0.25s all; -webkit-transition:0.25s all; -o-transition:0.25s all; transition:0.25s all; } /* Treating the first LI and li:after elements separately */ .fancyNav li:first-child{ border-radius: 4px 0 0 4px; } .fancyNav li:first-child:after, .fancyNav li.selected:first-child:after{ box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; border-radius:4px 0 0 4px; } .fancyNav li:last-child{ border-radius: 0 4px 4px 0; } /* Treating the last LI and li:after elements separately */ .fancyNav li:last-child:after, .fancyNav li.selected:last-child:after{ box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff; -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff; -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff; border-radius:0 4px 4px 0; } .fancyNav li:hover:after, .fancyNav li.selected:after, .fancyNav li:target:after{ /* This property triggers the CSS3 transition */ opacity:1; } .fancyNav:hover li.selected:after, .fancyNav:hover li:target:after{ /* Hides the targeted li when we are hovering on the UL */ opacity:0; } .fancyNav li.selected:hover:after, .fancyNav li:target:hover:after{ opacity:1 !important; } /* Styling the anchor elements */ .fancyNav li a{ color: #5d5d5d; display: inline-block; font: 20px/1 Lobster,Arial,sans-serif; padding: 12px 35px 14px; position: relative; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6); z-index:2; text-decoration:none !important; white-space:nowrap; } .fancyNav a.homeIcon{ background:url('../img/home.png') no-repeat center center; display: block; overflow: hidden; padding-left: 12px; padding-right: 12px; text-indent: -9999px; width: 16px; }
這款CSS菜單非常不錯,大家可以嘗試一下。