橫向二級導(dǎo)航菜單

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

<p>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type" /><SCRIPT type=text/javascript>
var num=5;
function getObj(objName){return(document.getElementById(objName));}
function tag(id){
getObj("searconrow2").innerHTML=getObj("produce"+id).innerHTML;
for(var i=1;i<=num;i++){
if(i==id) {
getObj("changebox"+i).className="search1";
}
else{
if(i==3 || i==(id-1)){
getObj("changebox"+i).className="search3";}
else{
getObj("changebox"+i).className="search2";}
}
}
}
function loadme(){
getObj("searconrow2").innerHTML=getObj("produce1").innerHTML;
}
</SCRIPT><style type="text/css">
#twopage{width:779px; height:62px; margin:0px auto; background-image:url(bannerbg.gif); overflow:hidden}
#twopage ul{width:779px; height:62px; margin:0px; list-style-type:none; overflow:hidden}
#twopage ul li{ float:left; padding:12px 20px; height:62px; margin:0px;overflow:hidden; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#660099}
#searchnavi{width:389px; height:19px; margin:0px; padding:0px; overflow:hidden}
#searchnavi ul{width:389px; margin:0px; padding:0px; list-style-type:none; overflow:hidden}
#searchnavi ul li{ float:left;width:70px; height:18px; cursor:hand; text-align:left}
A:link{
color:#000033;
text-decoration:none;
}
A:visited{
color:#000033;
text-decoration:none;
}
A:hover{color:#FF9900;
text-decoration:none;
}
#searchnavi LI.search1 { margin:0px;FONT-SIZE: 12px; color:#000000; font-weight:bold;BACKGROUND: url(topbg.gif) no-repeat; text-align:center; WIDTH: 70px; PADDING: 5px 0px 0px 0px; HEIGHT: 19px! important
}
#searchnavi LI.search2 { margin:0px;FONT-SIZE: 12px; color:#000000; font-weight:bold;WIDTH: 70px; PADDING: 4px 0px 0px 0px;text-align:center; HEIGHT: 18px! important
}
#searchnavi LI.search3 { margin:0px;FONT-SIZE: 12px; color:#000000; font-weight:bold;WIDTH: 70px; PADDING: 4px 0px 0px 0px;text-align:center; HEIGHT: 18px! important
}
.hiddenbox{
display:none;
}</style></p>
<div   class="22xzsxo"   id="twopage">
<ul>
    <li>
    <table border="0" cellspacing="0" cellpadding="0" width="389" align="left" height="38">
        <tbody>
            <tr>
                <td align="left">
                <div   class="uaozqx9"   id="searchnavi">
                <ul>
                    <li id="changebox1" class="search1" onmouseover="javascript:tag(1);this.blur();"><a href="#">數(shù)碼產(chǎn)品</a></li>
                    <li id="changebox2" class="search2" onmouseover="javascript:tag(2);this.blur();"><a href="#">手機配件</a></li>
                    <li id="changebox3" class="search2" onmouseover="javascript:tag(3);this.blur();"><a href="#">IPOD配件</a></li>
                    <li id="changebox4" class="search2" onmouseover="javascript:tag(4);this.blur();"><a href="#">家用電器</a></li>
                    <li id="changebox5" class="search2" onmouseover="javascript:tag(5);this.blur();"><a href="#">辦公用品</a></li>
                </ul>
                </div>
                </td>
            </tr>
            <tr>
                <td background="images/dibg.gif" align="left" style="padding-left: 8px">
                <div   class="ce99zox"   id="searchcontent">
                <div   class="79gx2wj"   id="searconrow2"> </div>
                <div   class="kl4gxet"   id="produce1" class="hiddenbox">MD/CD讀卡器 | SIM讀卡器 | MP3/MP4 | 數(shù)碼相機 | PSP相關(guān)產(chǎn)品</div>
                <div   class="v7zngxj"   id="produce2" class="hiddenbox">手機外殼 | 屏幕保護帖 | 手機帖紙 | 手機掛鏈 | 手機閃光器具| 鈴聲壁紙</div>
                <div   class="tvd9pcs"   id="produce3" class="hiddenbox">IPOD 外殼| IPOD 保護帖 | IPOD 保護套 | IPOD 數(shù)據(jù)線 | IPOD 外設(shè)</div>
                <div   class="ggqdyrl"   id="produce4" class="hiddenbox">手機 | 電話 | 風(fēng)扇 | 隨身聽 | 電腦 | 電視 | 自行車 | 滑冰鞋</div>
                <div   class="eesft9g"   id="produce5" class="hiddenbox">打印機 | HUB | 軟件 | 紙張 | ERP系統(tǒng)</div>
                </div>
                </td>
            </tr>
        </tbody>
    </table>
    </li>
</ul>
</div>

相關(guān)特效代碼: 鼠標(biāo)移動到鏈接文字上出現(xiàn)鏈接菜單09/15; CSS二級下拉導(dǎo)航菜單09/06; CSS代碼精簡的二級菜單07/28; jQuery 彈出菜單層05/19; CSS+div+js組合強大實現(xiàn)超酷菜單05/14; 動態(tài)翻滾的導(dǎo)航條[酷比flash]01/02; 圖片菜單錯位特效11/26; upmenu-水平豎彈向上三級彈出菜單11/24; 下拉菜單特效11/24; CSS橫向下拉菜單11/24

熱門特效代碼: 三級豎向展開/收縮導(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組合強大實現(xiàn)超酷菜單; 動態(tài)翻滾的導(dǎo)航條[酷比flash]; CSS橫向下拉菜單; 微軟風(fēng)格的CSS橫向菜單; 立體的CSS按鈕菜單效果; 左側(cè)隱藏的菜單