防刷新二级菜单Div+CSS+JS代码-网页特效-懒人建站

防刷新二级菜单Div+CSS+JS代码

防刷新二级菜单Div+CSS+JS代码 GetMenuID(); menuFix(); 这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>防刷新二级菜单Div+CSS+JS代码_懒人建站</title>
<meta name="keywords" content="JS广告代码，CSS导航菜单，FLSH焦点图片代码" />
<meta name="description" content="懒人建站为您提供-JS广告代码，CSS导航菜单，FLSH焦点图片代码和网页特效代码" />
<style type="text/css"> 
<!-- 
*{margin:0;padding:0;border:0;} 
body { 
    font-family: arial, 宋体, serif; 
    font-size:12px; 
} 
#nav { 
    width:180px; 
    line-height: 24px;  
    list-style-type: none; 
    text-align:left; 
    /*定义整个ul菜单的行高和背景色*/ 
}

/*==================一级目录===================*/ 
#nav a { 
    width: 160px;  
    display: block; 
    padding-left:20px; 
    /*Width(一定要)，否则下面的Li会变形*/ 
}

#nav li { 
    background:#CCC; /*一级目录的背景色*/ 
    border-bottom:#FFF 1px solid; /*下面的一条白边*/ 
    float:left; 
    /*float：left,本不应该设置，但由于在Firefox不能正常显示 
    继承Nav的width,限制宽度，li自动向下延伸*/ 
}

#nav li a:hover{ 
    background:#CC0000;    /*一级目录onMouseOver显示的背景色*/ 
}

#nav a:link  { 
    color:#666; text-decoration:none; 
} 
#nav a:visited  { 
    color:#666;text-decoration:none; 
} 
#nav a:hover  { 
    color:#FFF;text-decoration:none;font-weight:bold; 
}

/*==================二级目录===================*/ 
#nav li ul { 
    list-style:none; 
    text-align:left; 
} 
#nav li ul li{     
    background: #EBEBEB; /*二级目录的背景色*/ 
}

#nav li ul a{ 
         padding-left:20px; 
         width:160px; 
    /* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/ 
}

/*下面是二级目录的链接样式*/

#nav li ul a:link  { 
    color:#666; text-decoration:none; 
} 
#nav li ul a:visited  { 
    color:#666;text-decoration:none; 
} 
#nav li ul a:hover { 
    color:#F3F3F3; 
    text-decoration:none; 
    font-weight:normal; 
    background:#CC0000; 
    /* 二级onmouseover的字体颜色、背景色*/ 
}

/*==============================*/ 
#nav li:hover ul { 
    left: auto; 
} 
#nav li.sfhover ul { 
    left: auto; 
} 
#content { 
    clear: left;  
} 
#nav ul.collapsed { 
    display: none; 
} 
-->

#PARENT{ 
    width:300px; 
    padding-left:20px; 
} 
</style> 
</head>

<body> 
<div id="PARENT"> 
<ul id="nav"> 
<li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">懒人建站</a> 
    <ul id="ChildMenu1" class="collapsed"> 
    <li><a href="http://www.51xuediannao.com/js/" target="_blank">JS广告代码</a></li> 
    <li><a href="http://www.51xuediannao.com/js/nav" target="_blank">导航菜单</a></li> 
    <li><a href="http://www.51xuediannao.com/JS/Slide/" target="_blank">FLASH焦点图片</a></li> 
    <li><a href="http://www.51xuediannao.com/JS/AD/" target="_blank">JS网页特效</a></li> 
    </ul> 
</li> 
<li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">建站技巧</a> 
    <ul id="ChildMenu2" class="collapsed"> 
    <li><a href="http://www.51xuediannao.com/jiqiao/html/" target="_blank">HTML技巧</a></li> 
    <li><a href="http://www.51xuediannao.com/jiqiao/css/" target="_blank">CSS技巧</a></li> 
    <li><a href="http://www.51xuediannao.com/jiqiao/cms/" target="_blank">CMS建站技巧</a></li> 
    <li><a href="http://www.51xuediannao.com/jiqiao/qita/" target="_blank">其他技巧</a></li> 
    </ul> 
</li> 
<li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">欣赏借鉴</a> 
    <ul id="ChildMenu3" class="collapsed"> 
    <li><a href="http://www.51xuediannao.com/show/qiye/" target="_blank">企业类网站</a></li> 
    <li><a href="http://www.51xuediannao.com/show/hangye/" target="_blank">行业网站</a></li> 
    <li><a href="http://www.51xuediannao.com/show/blog/" target="_blank">BLOG网站</a></li> 
    <li><a href="http://www.51xuediannao.com/show//shop/" target="_blank">商城类网站</a></li> 
    </ul> 
</li> 
<li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">网站管理</a> 
    <ul id="ChildMenu4" class="collapsed"> 
    <li><a href="http://51xuediannao.com" target="_blank">懒人建站</a></li> 
    </ul> 
</li> 
</ul> 
</div>

<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理</a> </span><br>
<a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a><br /><br/>
<span>我们为您提供-JS代码，网页图标，网页欣赏模板，SEO优化和各种建站技巧；</span><br />
<span>懒人建站只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</div>
</body> 
</html> 
<script type=text/javascript><!-- 
var LastLeftID = "";

function DoMenu(emid) 
{ 
    var obj = document.getElementById(emid);     
    obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded"); 
    if((LastLeftID!="")&&(emid!=LastLeftID))    //关闭上一个Menu 
    { 
        document.getElementById(LastLeftID).className = "collapsed"; 
    } 
    LastLeftID = emid; 
}

function GetMenuID() 
{

var MenuID=""; 
    var _paramStr = new String(window.location.href);

GetMenuID();    //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果 
menuFix(); 
--></script>

代码说明:

防刷新二级菜单Div+CSS+JS代码

说明：
GetMenuID(); menuFix(); 这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果。

TAG标签

弹出层 jQuery 图片展示下拉菜单左右滚动选项卡二级导航 jQuery弹出层

来源：懒人建站|发布人：懒人建站|2009-11-08|热度：次|收藏|报错

相关文章 JS实现flash效果的竖向折叠二级菜单(HTML+CSS+JS)