這是一款很漂亮很有特色的CSS3菜單插件，和普通的菜單不同，它擁有飄帶的外觀，同時(shí)，鼠標(biāo)滑過(guò)菜單項(xiàng)時(shí)，菜單項(xiàng)又會(huì)突起顯示，很有3D立體的視覺效果。

結(jié)合網(wǎng)頁(yè)的背景，這款菜單就更顯立體感了。有需要的前端設(shè)計(jì)師可以通過(guò)研究源碼來(lái)使用這款菜單插件，當(dāng)然，這也需要你的瀏覽器支持CSS3。



在線演示源碼下載

HTML代碼
<div class='ribbon'>
        <a href='#'><span>Home</span></a>
        <a href='#'><span>About</span></a>
        <a href='#'><span>Services</span></a>
        <a href='#'><span>Contact</span></a>
</div>
CSS代碼
* { 
        /* Basic CSS reset */
        margin:0; 
        padding:0;
}

body {
        /* These styles have nothing to do with the ribbon */
        background:url(dark_wood.png) 0 0 repeat;
        padding:35px 0 0;
        margin:auto;
        text-align:center;
}

.ribbon {
        display:inline-block;
}

.ribbon:after, .ribbon:before {
        margin-top:0.5em;
        content: "";
        float:left;
        border:1.5em solid #fff;
}

.ribbon:after {
        border-right-color:transparent;
}

.ribbon:before {
        border-left-color:transparent;
}

.ribbon a:link, .ribbon a:visited { 
        color:#000;
        text-decoration:none;
        float:left;
        height:3.5em;
        overflow:hidden;
}

.ribbon span {
        background:#fff;
        display:inline-block;
        line-height:3em;
        padding:0 1em;
        margin-top:0.5em;
        position:relative;

        -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
        -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
        -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
        -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
        transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span {
        background:#FFD204;
        margin-top:0;
}

.ribbon span:before {
        content: "";
        position:absolute;
        top:3em;
        left:0;
        border-right:0.5em solid #9B8651;
        border-bottom:0.5em solid #fff;
}

.ribbon span:after {
        content: "";
        position:absolute;
        top:3em;
        right:0;
        border-left:0.5em solid #9B8651;
        border-bottom:0.5em solid #fff;
}

在線演示源碼下載


　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無(wú)需額外費(fèi)用，即可穩(wěn)步提升排名至首頁(yè)。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。