CSS3無圖片實現華麗折頁菜單效果（多瀏覽器兼容）

昨天在做一個網站的左欄菜單的時候，突然想到，看了那么多創意的CSS3導航、菜單，何不自己動手做一個純CSS3菜單呢？于是搗鼓了一下把想法給實現了，雖然說是比較老掉牙的一個創意，不過順便也算是鍛煉了一下CSS水平。

先看看網頁里的最終效果：

那么，教程開始了！

Step1

首先，一個菜單的結構如下：

    <div class="wrapper">  
        <ul id="menu">  
            <li><a href="javascript:void(0);">菜單1</a></li>  
            <li><a href="javascript:void(0);">菜單2</a></li>  
            <li><a href="javascript:void(0);">菜單3</a></li>  
            <li><a href="javascript:void(0);">菜單4</a></li>  
            <li><a href="javascript:void(0);">菜單5</a></li>  
        </ul>  
    </div>  

當然，未經過CSS美化的效果相當之差，我們來開始加工——

Step2

加上該加上的，去掉該去掉的。該上色的上色，該加寬度的加寬度，該重置的重置（css reset）。

• body顏色：#ddd
• wrapper顏色：#eee
• menu顏色：#0764a1
• 鏈接顏色：#cde0ec

雖然顏色也有了形狀也有了但仍很是單調，因此——

Step3

加上光影圓角細節：

• 菜單左上圓角：10px
• 菜單右下圓角：10px
• 菜單左邊框顏色：#0982bd
• 菜單上邊框顏色：#0982bd
• 菜單下邊框顏色：#054685
• 菜單陰影：3px 5px 5px rgba(0,0,0,0.5)
• wrapper陰影：0 0 10px #222222

雖然菜單已經成型了，但怎么說都談不上“創意”二字，作為一個追求完美的前端發燒友，自然不能止步于此——

Step4

通過margin負值來實現菜單與wrapper錯開：

• menu左端外邊距：-20px

但似乎還是少了點什么？沒錯，就是小小的三角形折頁——

Step5

如何用DIV+CSS實現三角形呢？可以利用border來實現，具體原理可參見張鑫旭的《CSS border三角、圓角圖形生成技術簡介》一文。

• 翻折三角形顏色：#054685
• 邊框大小：12px 20px
• 左端外邊距：-40px（利用右邊框實現多瀏覽器兼容三角形，因此整個DIV都應該在wrapper外，即為上面20px的兩倍）
• 頂端外邊距：-12px（與上面邊框大小中12px對應）

整個折頁菜單的效果就出來了，但為了用戶體驗，還應該給菜單加上交互效果——

Step6

為菜單的鼠標經過及按下加上交互效果：

• 鼠標經過菜單顏色：#05528f
• 鼠標經過菜單上邊框顏色：#066fae
• 鼠標經過菜單下邊框顏色：#033772
• 鼠標按下菜單顏色：#033f7e
• 鼠標按下菜單上邊框顏色：#045ca0
• 鼠標按下菜單下邊框顏色：#02275f

這里還為菜單加大了左端內邊距，當然你也可以加上其它CSS3效果：

如圖是加上左端外邊距和放大1.05倍的效果。

Finally

最后當然是給出代碼和Demo了：

CSS部分：

    body{  
        margin:0;  
        background:#ddd;  
    }  
    .wrapper{  
        width:960px;  
        height:800px;  
        margin:0 auto;  
        position:relative;  
        background:#eee;  
        -moz-box-shadow:0 0 10px #222222;  
        -khtml-box-shadow:0 0 10px #222222;  
        -webkit-box-shadow:0 0 10px #222222;  
        box-shadow:0 0 10px #222222;  
    }  

    #menu{  
        margin: 0;  
        padding:0;  
        list-style:none;  
        margin-top:150px;  
        margin-left:-20px;  
        display:inline-block;  
        position:relative;  
        z-index:100;  
    }  

    #menu a{  
        *zoom:1;  
        width:120px;  
        display:block;  
        font-size:14px;  
        color: #cde0ec;  
        line-height:45px;  
        padding-left:40px;  
        background:#0764a1;  
        text-decoration:none;  
        border-left:1px solid #0982bd;  
        border-top:1px solid #0982bd;  
        border-bottom:1px solid #054685;  
        -webkit-transition: all .3s;  
        -moz-transition: all .3s;  
        -o-transition: all .3s;  
        transition: all .3s;  
        -moz-box-shadow:3px 5px 5px rgba(0,0,0,0.5);  
        -khtml-box-shadow:3px 5px 5px rgba(0,0,0,0.5);  
        -webkit-box-shadow:3px 5px 5px rgba(0,0,0,0.5);  
    }  

    #menu li:first-child a{  
        border-top-right-radius:10px;  
    }  

    #menu li:last-child a{  
        border-bottom-right-radius:10px;  
    }  

    #menu a:hover{  
        padding-left:55px;  
        padding-left:40px\0;  
        *padding-left:40px;  
        background:#05528f;  
        border-top:1px solid #066fae;  
        border-bottom:1px solid #033772;  
        -webkit-transform-origin:0;  
        -moz-transform-origin:0;  
        -o-transform-origin:0;  
        -moz-box-shadow:0 5px 5px rgba(0,0,0,0.5);  
        -khtml-box-shadow:0 5px 5px rgba(0,0,0,0.5);  
        -webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.5);  
    }  

    #menu a:active{  
        background:#033f7e;  
        border-top:1px solid #045ca0;  
        border-bottom:1px solid #02275f;  
    }  

    .triangle{  
        width:0;  
        height:0;  
        position:relative;  
        margin-top:-12px;  
        _margin-top:-30px;  
        margin-left:-40px;  
        border-color:transparent #054685 transparent transparent;  
        border-style:dashed solid dashed dashed;  
        border-width:12px 20px;  
    }  

    #main{  
        top:0;  
        position:fixed;  
        margin:200px;  
    }  

    #main p{  
        margin:2em;  
        text-indent:2em;  
    }  

    <div class="wrapper">  
        <ul id="menu">  
            <li><a href="javascript:void(0);">菜單1</a></li>  
            <li><a href="javascript:void(0);">菜單2</a></li>  
            <li><a href="javascript:void(0);">菜單3</a></li>  
            <li><a href="javascript:void(0);">菜單4</a></li>  
            <li><a href="javascript:void(0);">菜單5</a></li>  
        </ul>  
        <div class="triangle"></div>  
    </div>  

大家最喜愛的Demo