[json]js 二级横向滑动导航菜单效果代码

更新时间：2018-01-08 来源：导航菜单手机版 字体：大中小

【www.bbyears.com--导航菜单】

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

<!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 name="keywords" content="HTML+CSS导航菜单" />

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<style type=text/css>
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;
	HEIGHT: 20px;
	text-decoration: none;
}
#mainmenu_top { 
	width:100%;
	HEIGHT: 28px; 
	display:block;
	overflow:hidden;
}
#mainmenu_top UL LI {FLOAT: left}
#mainmenu_top UL LI A {
 	WIDTH: 81px;
	height:auto;
	DISPLAY: block;
	COLOR: #666666; 
	TEXT-ALIGN: center; 
	FONT-WEIGHT: bold; 
	BACKGROUND: url(mainmenu_h.gif) no-repeat; 
}
#mainmenu_bottom {
	width:100%;
	height:32px;
	line-height:32px;
	display:block;
	overflow:hidden;
	BACKGROUND: url(mainmenu_bg.jpg) repeat-x
}
#mainmenu_bottom .mainmenu_rbg {
	HEIGHT: 32px;
	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; 
	HEIGHT: 32px;
}
#mainmenu_bottom UL LI.se {
	FLOAT: left; 
	MARGIN-LEFT: 7px; 
	HEIGHT: 32px;
	PADDING-LEFT: 8px; 
	BACKGROUND: url(menulink_bg_l.gif) no-repeat; 
}
#mainmenu_bottom UL LI A {
	COLOR: #fff; 
	LINE-HEIGHT: 32px;
	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-HEIGHT: 32px;
	PADDING-RIGHT: 18px; 
	DISPLAY: block; 
	BACKGROUND: url(menulink_bg_r.gif) no-repeat right 50%; 
}
</style>

网站首页  
        JS代码  
        电子商务  
        免费模板  
        建站技巧  
        CSS技巧  
        CSS导航菜单  
        <LI style="DISPLAY: none">网络营销  
        <a href="http://www.bbyears.com/clist-17-1.html" target="_blank" class="keylink">SEO优化</a> 
     

     
    
        
         
            <UL class=hide id=mb1> 
            免费模板-网页模板下载  
            网站公告：免费模板征集友情链接  
		 
            
            <UL class=hide id=mb2> 
            <LI style="DISPLAY: none">免费模板  
            免费模板  
            免费模板  
            免费模板  
            免费模板  
            <a href="http://www.bbyears.com/clist-18-1.html" target="_blank" class="keylink">网页特效</a>  
            
            <UL class=hide id=mb3> 
            <LI style="DISPLAY: none">免费模板  
            <LI style="MARGIN-LEFT: 7px">免费模板  
            网络营销  
            网络营销  
            网络营销  
            网络营销  
            网络营销  
            <a href="http://www.bbyears.com/clist-18-1.html" target="_blank" class="keylink">网页特效</a>  
            
            <UL class=hide id=mb4> 
            <LI style="DISPLAY: none; MARGIN-LEFT: 80px">免费模板  
            <LI style="MARGIN-LEFT: 80px">网页特效  
            网络营销  
            网络营销  
            
            <UL class=hide id=mb5> 
            <LI style="DISPLAY: none">免费模板  
            <LI style="MARGIN-LEFT: 80px">服务器租用首页  
            网络营销  
            网络营销  
            超级机房  
            免费模板  
            
            <UL class=hide id=mb6> 
            <LI style="DISPLAY: none">免费模板  
            <LI style="MARGIN-LEFT: 160px">免费模板  
            免费模板  
            免费模板  
            <UL class=hide id=mb7> 
            
            <LI style="DISPLAY: none">免费模板  
            <LI style="MARGIN-LEFT: 180px">免费模板  
            免费模板  
            个人建站  
            门户建站  
            
            <UL class=hide id=mb8 style="DISPLAY: none"> 
            <LI style="MARGIN-LEFT: 270px">免费模板  
            网络营销  
            网络营销  
            
            <UL class=hide id=mb9> 
            <LI style="MARGIN-LEFT: 180px">免费模板  
            网络营销  
            网络营销  
            网络营销  
            网络营销  
        <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>

</body>
</html>

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

本文来源：http://www.bbyears.com/wangyetexiao/38361.html

链接：http://www.bbyears.com/wangyetexiao/38361.html
[json]js 二级横向滑动导航菜单效果代码(转载时请注明本文出处及链接)

猜你感兴趣

[三星i9100如何在手机壳]三星I9100如何在手机和SIM卡之间复制联系人 2018-01-08
php判断一个字符串是否是回文字符串|PHP判断一个字符串是否是回文字符串 2018-01-08
[phpstudy]PHP simplexml使用方法详解 2018-01-08
【javascript学习指南】JavaScript获取浏览器高度和宽度值兼容所有浏览器 2018-01-08
[三星i9100 galaxy s2]三星I9100如何使用手机中的视频播放器 2018-01-08
【利用word文档】利用WordPress Backup to Dropbox插件自动备份wordpress 2018-01-08
【phpstudy】php simpleXML添加CDATA格式数据 2018-01-08
【三星i9100 galaxy s2】三星I9100如何设置屏幕图案锁? 2018-01-08
【三星i9100手机报价】三星I9100手机中的文本转语音功能及如何使用 2018-01-08
【三星i9100如何在手机壳】三星I9100如何在手机的电子邮件中添加附件并发送 2018-01-08

本类排行

本类最新

更多>>

[json]js 二级横向滑动导航菜单效果代码

猜你感兴趣

热门标签

本类排行

本类最新