横向二级导航菜单

2009-11-24 导航菜单 ℃

<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 id="twopage">
<ul>
    <li>
    <table border="0" cellspacing="0" cellpadding="0" width="389" align="left" height="38">
        <tbody>
            <tr>
                <td align="left">
                <div id="searchnavi">
                <ul>
                    <li id="changebox1" class="search1" onmouseover="javascript:tag(1);this.blur();"><a href="#">数码产品</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 id="searchcontent">
                <div id="searconrow2"> </div>
                <div id="produce1" class="hiddenbox">MD/CD读卡器 | SIM读卡器 | MP3/MP4 | 数码相机 | PSP相关产品</div>
                <div id="produce2" class="hiddenbox">手机外壳 | 屏幕保护帖 | 手机帖纸 | 手机挂链 | 手机闪光器具| 铃声壁纸</div>
                <div id="produce3" class="hiddenbox">IPOD 外壳| IPOD 保护帖 | IPOD 保护套 | IPOD 数据线 | IPOD 外设</div>
                <div id="produce4" class="hiddenbox">手机 | 电话 | 风扇 | 随身听 | 电脑 | 电视 | 自行车 | 滑冰鞋</div>
                <div id="produce5" class="hiddenbox">打印机 | HUB | 软件 | 纸张 | ERP系统</div>
                </div>
                </td>
            </tr>
        </tbody>
    </table>
    </li>
</ul>
</div>

相关特效代码: 鼠标移动到链接文字上出现链接菜单09/15; CSS二级下拉导航菜单09/06; CSS代码精简的二级菜单07/28; jQuery 弹出菜单层05/19; CSS+div+js组合强大实现超酷菜单05/14; 动态翻滚的导航条[酷比flash]01/02; 图片菜单错位特效11/26; upmenu-水平竖弹向上三级弹出菜单11/24; 下拉菜单特效11/24; CSS横向下拉菜单11/24

热门特效代码: 三级竖向展开/收缩导航菜单; 鼠标指向弹出菜单; jQuery 弹出菜单层; CSS二级下拉导航菜单; CSS做的垂直导航菜单效果; 横向二级导航菜单; 仿google首页下端图片文字动画导; 导航链接菜单间隔闪烁; 动态翻滚的导航条[酷比flash]; 纯CSS的三级联动级联菜单

推荐特效代码: CSS+div+js组合强大实现超酷菜单; 动态翻滚的导航条[酷比flash]; CSS横向下拉菜单; 微软风格的CSS横向菜单; 立体的CSS按钮菜单效果; 左侧隐藏的菜单