js二级横向滑动导航菜单代码

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<TITLE>js二级横向滑动导航菜单 - </TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<style type=text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>>
BODY {}
UL {
	LIST-STYLE-TYPE: none;
	padding:0px;
	margin:0px;
}
LI {
	FONT-SIZE: 12px; 
	COLOR: #333; 
	LINE-HEIGHT: 1.5em; 
	FONT-FAMILY: "宋体", Arial, Verdana;
}
.hide {
	DISPLAY: none
}
#mainmenu_top UL LI .menuhover {
	BACKGROUND: url(mainmenu_s.gif) no-repeat; 
	COLOR: #fff;
}
#mainmenu_top UL LI A {
	MARGIN-TOP: 2px;
	CURSOR: pointer;
	PADDING-TOP: 8px;
	
	text-decoration: none;
}
#mainmenu_top { 
	width:100%;
	 
	display:block;
	overflow:hidden;
}
#mainmenu_top UL LI {FLOAT: left}
#mainmenu_top UL LI A {
 	
	height:auto;
	DISPLAY: block;
	COLOR: #666666; 
	TEXT-ALIGN: center; 
	FONT-WEIGHT: bold; 
	BACKGROUND: url(mainmenu_h.gif) no-repeat; 
}
#mainmenu_bottom {
	width:100%;
	
	line-
	display:block;
	overflow:hidden;
	BACKGROUND: url(mainmenu_bg.jpg) repeat-x
}
#mainmenu_bottom .mainmenu_rbg {
	
	COLOR: #fff;
	MARGIN-LEFT: 0px; 
	PADDING: 0px 0px 0px 5px;
	BACKGROUND: url(mainmenu_r.gif) no-repeat right 50%; 
}
#mainmenu_bottom UL {}
#mainmenu_bottom UL LI {
	PADDING-LEFT: 8px; 
	FLOAT: left; 
	MARGIN-LEFT: 7px; 
	
}
#mainmenu_bottom UL LI.se {
	FLOAT: left; 
	MARGIN-LEFT: 7px; 
	
	PADDING-LEFT: 8px; 
	BACKGROUND: url(menulink_bg_l.gif) no-repeat; 
}
#mainmenu_bottom UL LI A {
	COLOR: #fff; 
	LINE-
	PADDING-RIGHT: 18px; 
	DISPLAY: block;
	text-decoration: none;
	BACKGROUND: url(menulink_bg_normal.gif) no-repeat right 50%; 
}
#mainmenu_bottom UL LI A:hover {
	BACKGROUND: url(menulink_bg_normal.gif) no-repeat right 50%;
	color: #FFCC00;
}
#mainmenu_bottom UL LI A.se {
	COLOR: #fff; 
	LINE-
	PADDING-RIGHT: 18px; 
	DISPLAY: block; 
	BACKGROUND: url(menulink_bg_r.gif) no-repeat right 50%; 
}
</style>

<SCRIPT type=text/javascript>              
var waitting = 1;              
var secondLeft = waitting;              
var timer;                              
var sourceObj;              
var number;              
function getObject(objectId)//获取id的函数               
    {              
        if(document.getElementById && document.getElementById(objectId)) {              
        // W3C DOM              
        return document.getElementById(objectId);              
        } else if (document.all && document.all(objectId)) {              
        // MSIE 4 DOM              
        return document.all(objectId);              
        } else if (document.layers && document.layers[objectId]) {              
        // NN 4 DOM.. note: this won't find nested layers              
        return document.layers[objectId];              
        } else {              
        return false;              
        }              
    }              
function SetTimer()//主导航时间延迟的函数              
    {              
        for(j=1; j <10; j++){              
            if (j == number){              
                if(getObject("mm"+j)!=false){              
                    getObject("mm"+ number).className = "menuhover";              
                    getObject("mb"+ number).className = "";              
                }              
            }              
            else{              
                 if(getObject("mm"+j)!=false){               
                    getObject("mm"+ j).className = "";              
                    getObject("mb"+ j).className = "hide";               
                }              
            }              
        }              
    }              
function CheckTime()//设置时间延迟后              
    {              
        secondLeft--;              
        if ( secondLeft == 0 )              
        {              
        clearInterval(timer);                                      
        SetTimer();                      
        }              
    }              
function showM(thisobj,Num)//主导航鼠标滑过函数,带时间延迟              
    {              
        number = Num;              
        sourceObj = thisobj;              
        secondLeft = 1;              
        timer = setTimeout('CheckTime()',100);              
    }              
function OnMouseLeft()//主导航鼠标移出函数,清除时间函数              
    {              
        clearInterval(timer);              
    }              
</SCRIPT>

<DIV id=mainmenu_body> 

    <DIV id=mainmenu_top> 
        <UL> 
        <LI><A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="#" target=_parent>网站首页</A> </LI> 
        <LI><A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="#" target=_parent>JS代码</A> </LI> 
        <LI><A id=mm3 onmouseover=showM(this,3); onmouseout=OnMouseLeft(); href="#" target=_parent>电子商务</A> </LI> 
        <LI><A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="#" target=_parent>免费模板</A> </LI> 
        <LI><A id=mm5 onmouseover=showM(this,5); onmouseout=OnMouseLeft(); href="#" target=_parent>建站技巧</A> </LI> 
        <LI><A id=mm6 onmouseover=showM(this,6); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS技巧</A> </LI> 
        <LI><A id=mm7 onmouseover=showM(this,7); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS导航菜单</A> </LI> 
        <LI style="DISPLAY: none"><A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="#" target=_parent>网络营销</A> </LI> 
        <LI><A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="#" target=_parent>SEO优化</A> </LI></UL>
    </DIV> 

    <DIV id=mainmenu_bottom> 
    
        <DIV class=mainmenu_rbg>
         
            <UL class=hide id=mb1> 
            <LI><A href="#">免费模板-网页模板下载</A> </LI> 
            <LI><A href="#">网站公告：免费模板征集友情链接</A> </LI> 
		</UL> 
            
            <UL class=hide id=mb2> 
            <LI style="DISPLAY: none"><A href="#" target=_parent>免费模板</A> </LI> 
            <LI><A href="#" target=_parent>免费模板</A> </LI> 
            <LI><A href="#" target=_parent>免费模板</A> </LI> 
            <LI><A href="#" target=_parent>免费模板</A> </LI> 
            <LI><A href="#" target=_parent>免费模板</A> </LI> 
            <LI><A href="#" target=_parent>网页特效</A> </LI></UL> 
            
            <UL class=hide id=mb3> 
            <LI style="DISPLAY: none"><A href="#" target=_parent>免费模板</A> </LI> 
            <LI style="MARGIN-LEFT: 7px"><A href="#" target=_parent>免费模板</A> </LI> 
            <LI><A href="#" target=_parent>网络营销</A> </LI> 
            <LI><A href="#" target=_parent>网络营销</A> </LI> 
            <LI><A href="#" target=_parent>网络营销</A> </LI> 
            <LI><A href="#" target=_parent>网络营销</A> </LI> 
            <LI><A href="#" target=_parent>网络营销</A> </LI> 
            <LI><A href="#" target=_parent>网页特效</A> </LI></UL> 
            
            <UL class=hide id=mb4> 
            <LI style="DISPLAY: none; MARGIN-LEFT: 80px"><A href="#" target=_parent>免费模板</A> </LI> 
            <LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>网页特效</A> </LI> 
            <LI><A href="#" target=_parent>网络营销</A> </LI> 
            <LI><A href="#" target=_parent>网络营销</A> </LI></UL> 
            
            <UL class=hide id=mb5> 
            <LI style="DISPLAY: none"><A href="#" target=_parent>免费模板</A> </LI> 
            <LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>服务器租用首页</A> </LI> 
            <LI><A href="#" target=_parent>网络营销</A> </LI> 
            <LI><A href="#" target=_parent>网络营销</A> </LI> 
            <LI><A href="#" target=_parent>超级机房</A> </LI> 
            <LI><A href="#" target=_parent>免费模板</A> </LI></UL> 
            
            <UL class=hide id=mb6> 
            <LI style="DISPLAY: none"><A href="#" target=_parent>免费模板</A> </LI> 
            <LI style="MARGIN-LEFT: 160px"><A href="#" target=_parent>免费模板</A> </LI> 
            <LI><A href="#" target=_parent>免费模板</A> </LI> 
            <LI><A href="#" target=_parent>免费模板</A> </LI></UL> 
            <UL class=hide id=mb7> 
            
            <LI style="DISPLAY: none"><A href="#" target=_parent>免费模板</A> </LI> 
            <LI style="MARGIN-LEFT: 180px"><A href="#" target=_parent>免费模板</A> </LI> 
            <LI><A href="#" target=_parent>免费模板</A> </LI> 
            <LI><A href="#" target=_parent>个人建站</A> </LI> 
            <LI><A href="#" target=_parent>门户建站</A> </LI></UL> 
            
            <UL class=hide id=mb8 style="DISPLAY: none"> 
            <LI style="MARGIN-LEFT: 270px"><A href="#" target=_parent>免费模板</A> </LI> 
            <LI><A href="#" target=_parent>网络营销</A> </LI> 
            <LI><A href="#" target=_parent>网络营销</A> </LI></UL> 
            
            <UL class=hide id=mb9> 
            <LI style="MARGIN-LEFT: 180px"><A href="/agent/">免费模板</A> </LI> 
            <LI><A href="#" target=_parent>网络营销</A> </LI> 
            <LI><A href="#" target=_parent>网络营销</A> </LI> 
            <LI><A href="#" target=_parent>网络营销</A> </LI> 
            <LI><A href="#" target=_parent>网络营销</A> </LI></UL> 
        <script >

function mmenuURL()//主导航、二级导航显示函数
{
var thisURL = document.URL;
tmpUPage = thisURL.split( "/" );  
thisUPage_s = tmpUPage[ tmpUPage.length-2 ]; 
thisUPage_s= thisUPage_s.toLowerCase();//小写
//thisUPage=thisUPage.substring(0,4)

if(thisUPage_s=="test.hichina.com"||thisUPage_s=="www.net.cn"||thisUPage_s=="www.hichina.com")
		{
			getObject("mm1").className="menuhover"
			getObject("mb1").className = "";
		}
		else if(thisUPage_s=="domain")
		{
			getObject("mm2").className="menuhover"
			getObject("mb2").className = "";
		}
		else if(thisUPage_s=="hosting")
		{
			getObject("mm3").className="menuhover"
			getObject("mb3").className = "";
		}	
		else if(thisUPage_s=="mail")
		{
			getObject("mm4").className="menuhover"
			getObject("mb4").className = "";
		}
		else if(thisUPage_s=="solutions"||thisUPage_s=="site"){
			getObject("mm5").className="menuhover"
			getObject("mb5").className = "";
		}
		else if(thisUPage_s=="promotion"){
			getObject("mm6").className="menuhover"
			getObject("mb6").className = "";
		}
		else if(thisUPage_s=="trade"||thisUPage_s=="phonetic"||thisUPage_s=="switchboard"||thisUPage_s=="note"){
			getObject("mm7").className="menuhover"
			getObject("mb7").className = "";
		}
		else if(thisUPage_s=="benefit"){
			getObject("mm8").className="menuhover"
			getObject("mb8").className = "";
		}
		else if(thisUPage_s=="userlogon"||thisUPage_s=="domain_service"||thisUPage_s=="hosting_service"||thisUPage_s=="mail_service"||thisUPage_s=="Payed"||thisUPage_s=="unPayed"||thisUPage_s=="Invoice"||thisUPage_s=="Finance"||thisUPage_s=="RegInfoModify"){
			getObject("mm9").className="menuhover"
			getObject("mb9").className = "";
		}
		else
		{
			getObject("mm1").className="";
			getObject("mb1").className = "";
		}
}

window.load=mmenuURL()

</script>
        </DIV> 
    </DIV>
</DIV>
</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行