<input id="u8est"><pre id="u8est"></pre></input>

<ol id="u8est"></ol>

首頁網(wǎng)頁特效庫

首頁 > 特效 > 導(dǎo)航菜單 > 正文

立體的CSS按鈕菜單效果

2009-11-24 導(dǎo)航菜單 ℃

<style type="text/css">
#menu {display:block; position:relative; background:#edebdc; width:112px; padding:25px; border:1px solid #000; margin:0 auto;}
.white {position:absolute; width:100px; height:20px; color:#fff; background:#fff; border-top:1px solid #ffdc56; border-right:1px solid #957704; border-bottom:1px solid #937603; border-left:1px solid #ffdc56;overflow:hidden; text-align:center;}
.blackc {position:absolute; top:0; left:0; width:98px; height:18px; color:#000; font-family:verdana; font-size:11px; font-weight:bold; overflow:hidden; border-top:1px solid #ffd42e; border-right:1px solid #caa205; border-bottom:1px solid #c9a105; border-left:1px solid #ffd42e; overflow:hidden; text-align:center; line-height:15px; background:#fc0;}
.black {position:relative; top:0; left:0; width:102px; height:22px; border:1px solid #000;}
.cona {position:relative; top:0; left:0; width:105px; height:25px; border-top:1px solid #d5d3ca; border-left:1px solid #d5d3ca; background:#f7f6ef;}
.conb {position:relative; top:0; left:0; width:107px; height:27px; border-top:1px solid #b8b7af; border-left:1px solid #b8b7af; background:#f7f6ef;}
.conc {position:relative; top:0; left:0; width:109px; height:29px; border-top:1px solid #9c9b95; border-left:1px solid #9c9b95; background:#f7f6ef;}
.cond {position:relative; top:0; left:0; width:111px; height:31px; border-top:1px solid #d5d3ca; border-left:1px solid #d5dc3a; background:#fff; margin-top:2px;}
#menu a.switch:visited {text-decoration:none;}
#menu a.switch {color:#c00; text-decoration:none; position:absolute;}
#menu a.switch:hover {color:#c00; background:#edebdc; cursor:pointer;}
#menu a.switch:hover .white {position:absolute; width:100px; height:20px; color:#fff; background:#fff; border-bottom:1px solid #ffdc56; border-left:1px solid #957704; border-top:1px solid #937603; border-right:1px solid #ffdc56;overflow:hidden; text-align:center;}
#menu a.switch:hover .blackc {position:absolute; top:0; left:0; width:98px; height:18px; color:#000; font-size:11px; font-weight:bold; overflow:hidden; border-bottom:1px solid #ffd42e; border-left:1px solid #caa205; border-top:1px solid #c9a105; border-right:1px solid #ffd42e; overflow:hidden; text-align:center; line-height:17px; background:#eb0;}
</style>
<div   class="rsivldr"   id="menu">
<div   id="4gthar9"   class="cond"><div   id="q7pxnep"   class="conc"><div   id="pnzrg7o"   class="conb"><div   id="rri4glc"   class="cona"><div   id="x7izqdt"   class="black">
<a class="switch" href="#nogo"><span id="kof7hug"    class="white"><span id="i7n9q4o"    class="blackc" title="Item one">ITEM ONE</span></span></a>
</div></div></div></div></div>
<div   id="qse4lu2"   class="cond"><div   id="orgvphu"   class="conc"><div   id="bgxk4tk"   class="conb"><div   id="ond9dsj"   class="cona"><div   id="oqhyqgy"   class="black">
<a class="switch" href="#nogo"><span id="txn9uoh"    class="white"><span id="or9h4la"    class="blackc" title="Item two">ITEM TWO</span></span></a>
</div></div></div></div></div>
<div   id="safr7a9"   class="cond"><div   id="txiwpgv"   class="conc"><div   id="i4shxmb"   class="conb"><div   id="gg2uzqd"   class="cona"><div   id="9nfw44e"   class="black">
<a class="switch" href="#nogo"><span id="9xhy4hy"    class="white"><span id="sxl4d2q"    class="blackc" title="Item three">ITEM THREE</span></span></a>
</div></div></div></div></div>
<div   id="ve7tkd9"   class="cond"><div   id="2cthwpe"   class="conc"><div   id="kk2p7rj"   class="conb"><div   id="iko9aqb"   class="cona"><div   id="7kumcsf"   class="black">
<a class="switch" href="#nogo"><span id="i2ha8bp"    class="white"><span id="j7j9yqj"    class="blackc" title="Item four">ITEM FOUR</span></span></a>
</div></div></div></div></div>
<div   id="hh79slb"   class="cond"><div   id="aemdriu"   class="conc"><div   id="d47mzrg"   class="conb"><div   id="stk27mf"   class="cona"><div   id="imdulx9"   class="black">
<a class="switch" href="#nogo"><span id="724ibsk"    class="white"><span id="ssixqfy"    class="blackc" title="Item five">ITEM FIVE</span></span></a>
</div></div></div></div></div>

相關(guān)特效代碼

熱門特效代碼: 三級豎向展開/收縮導(dǎo)航菜單; 鼠標(biāo)指向彈出菜單; jQuery 彈出菜單層; CSS二級下拉導(dǎo)航菜單; CSS做的垂直導(dǎo)航菜單效果; 橫向二級導(dǎo)航菜單; 仿google首頁下端圖片文字動畫導(dǎo); 導(dǎo)航鏈接菜單間隔閃爍; 動態(tài)翻滾的導(dǎo)航條[酷比flash]; 純CSS的三級聯(lián)動級聯(lián)菜單

推薦特效代碼: CSS+div+js組合強(qiáng)大實(shí)現(xiàn)超酷菜單; 動態(tài)翻滾的導(dǎo)航條[酷比flash]; CSS橫向下拉菜單; 微軟風(fēng)格的CSS橫向菜單; 立體的CSS按鈕菜單效果; 左側(cè)隱藏的菜單

<ol id="7uslg"><small id="7uslg"><dfn id="7uslg"></dfn></small></ol>

<big id="7uslg"><listing id="7uslg"></listing></big>