超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

html5動(dòng)效系列二十四:分享幾款CSS3菜單導(dǎo)航

2015-5-29    藍(lán)藍(lán)設(shè)計(jì)的小編


藍(lán)藍(lán)設(shè)計(jì)m.miumiuwan.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源:www.html5tricks.com

 如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

這是一款基于純CSS3的菜單導(dǎo)航,這款菜單非常有個(gè)性,菜單背景是一頁(yè)古老的筆記本紙張,菜單項(xiàng)像是浮動(dòng)的文字一樣嵌入在紙張上。鼠標(biāo)滑過(guò)菜單項(xiàng)時(shí)會(huì)出現(xiàn)不同的背景線條,顯得相當(dāng)可愛(ài)。這款CSS3菜單導(dǎo)航非常適合在個(gè)人博客中使用。

css3-menu-personal

在線演示源碼下載

2. CSS3扇形動(dòng)畫(huà)菜單 鼠標(biāo)滑過(guò)扇形展開(kāi)動(dòng)畫(huà)

 

這款CSS3菜單外觀是扇形的,并且在鼠標(biāo)滑過(guò)菜單時(shí),扇形菜單項(xiàng)將會(huì)以動(dòng)畫(huà)的方式展開(kāi),并且支持多級(jí)下拉菜單。

css3-sector-menu

在線演示源碼下載

 

3. CSS3響應(yīng)式滑動(dòng)菜單

該菜單有兩個(gè)特點(diǎn):1.響應(yīng)式布局,這就意味著隨著頁(yè)面大小的變化,菜單的布局也會(huì)發(fā)生自適應(yīng)變化,特別適合在移動(dòng)設(shè)備上使用。2.鼠標(biāo)滑過(guò)動(dòng)畫(huà),鼠標(biāo)滑過(guò)菜單項(xiàng)時(shí)可以漸變滑動(dòng),動(dòng)畫(huà)效果還不錯(cuò)。

css3-responsive-slider-menu

在線演示源碼演示

4. 純CSS3黑色氣泡背景動(dòng)畫(huà)菜單

 

這款CSS3菜單有一個(gè)很漂亮的黑色氣泡背景,菜單是銀白色的,和黑色的背景交織在一起更加顯得有3D立體的視覺(jué)效果。CSS3的運(yùn)用讓菜單有圓角的效果,鼠標(biāo)滑過(guò)菜單時(shí)也會(huì)改變背景。

pure-css3-animated-menu

在線演示源碼下載

下面是實(shí)現(xiàn)這款CSS3菜單的過(guò)程和源代碼,一起來(lái)看看。

HTML代碼:

<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列表構(gòu)造了菜單的結(jié)構(gòu),非常簡(jiǎn)單。

CSS代碼:

.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菜單非常不錯(cuò),大家可以嘗試一下。

在線演示源碼下載

 

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔