js+
css下拉
导航菜单
<!DOCTYPE
html PUBLIC "-//W3C//DTD X
HTML 1.0 Transitional//EN" "http://www.w3.org/TR/x
html1/DTD/x
html1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/x
html">
<head>
<meta http-equiv="Content-Type" content="text/
html; charset=gb2312" />
<title>首页 - 铁煤集团协同办公平台</title>
<link href="style/left.
css" rel="stylesheet" type="text/
css" />
</head>
<body id="newskin">
<div class="contain">
<div class="c_top">
<script language=
javascript>
var MyBlogName = "netoe";
function logonout()
{
document.getElementById("a_logon").href="../../utility.tool.hexun.com/quit.aspx@gourl="+document.location.href;
}
</script>
<script language=
javascript>
var myblogName="netoe";
var homeDiv=5;
function ShowIndexDiv(index)
{
for(var i=1;i<= homeDiv;i++)
{
var e = document.getElementById("indexDiv_"+ i);
if( e == null)
continue;
if( i == index)
{
e.className="topnew_on";
}
else
{
e.className="topnew_out";
}
}
}
var indexLoc=document.location.href.toLowerCase();
if(indexLoc.indexOf("admin_index")>0)
{
ShowIndexDiv(1);
}
if(indexLoc.indexOf("admin_userfocus")>0||indexLoc.indexOf("admin_mefocus")>0||indexLoc.indexOf("admin_focusme")>0||indexLoc.indexOf("admin_focusmore")>0)
{
ShowIndexDiv(2);
}
if(indexLoc.indexOf("admin_myfriends1")>0)
{
ShowIndexDiv(3);
}
if(indexLoc.indexOf("admin_relatecircle")>0||indexLoc.indexOf("admin_mycircle1")>0)
{
ShowIndexDiv(4);
}
if(indexLoc.indexOf("admin_window")>0||indexLoc.indexOf("admin_window")>0)
{
ShowIndexDiv(5);
}
/* //lhj
*/
</script>
</div>
<div class="c_left">
<!-- 【左侧:开始】 -->
<script language="
javascript">
<!--
var DIV_COUNT = 12;
var PostBlogUrl = "../../post.blog.hexun.com/newpost.aspx";
function ControlDiv(index)
{
for(var i=1;i<= DIV_COUNT;i++)
{
var e = document.getElementById("dv"+ i);
var ev = document.getElementById("dvShow"+ i);
if( e == null || ev == null )
continue;
if( i == index)
{
if(e.className=="left2_on")
{
e.className="left2_out";
}
else{
e.className="left2_on";
}
}
else
{
e.className="left2_out";
ev.style.display="none";
}
}
}
function showdv(index)
{
if(document.getElementById("dvShow"+index).style.display == "none")
{
document.getElementById("dvShow"+index).style.display = "";
document.getElementById("dv"+index).className="left2_out";
}
else
{
document.getElementById("dvShow"+index).style.display = "none";
document.getElementById("dv"+index).className="left2_on";
}
ControlDiv(index);
}
function SpaceClass(div)
{
document.getElementById("divset" + div).className="left2_break_1";
}
-->
</script>
<div class="left">
<div class="left2">
<a href="
javascript:showdv('1')"><div class="left2_out" id="dv1" style="cursor:hand;">
个人设置</div></a>
<div class="left2_break" style="display: none" id="dvShow1">
<div class="left2_break_2"
id="divset7">
<a href="admin_pwdmodify.aspx">修改密码</a></div>
<div class="left2_break_2"
id="divset50">
<a href="admin_messageboard.aspx">留言板</a></div>
<div class="left2_break_2"
id="divset8">
<a href="Admin_Privacy.aspx">隐私设置</a></div>
</div>
<a href="
javascript:showdv('2')"><div class="left2_out" id="dv2" style="cursor:hand;">
闭环管理</div></a>
<div class="left2_break" style="display: none" id="dvShow2">
<div class="left2_break_2"
id="divset9">
<a href="admin_baseinfo.aspx">安全管理</a></div>
<div class="left2_break_2"
id="divset10">
<a href="admin_JobModify.aspx">质量管理</a></div>
</div>
<a href="
javascript:showdv('3')"><div class="left2_out" id="dv3" style="cursor:hand;">
C
菜单项</div></a>
<div class="left2_break" style="display: none" id="dvShow3">
<div class="left2_break_2"
id="divset29">
<a href="Admin_BlogArticleManage.aspx">C子
菜单1</a></div>
<div class="left2_break_2"
id="divset13">
<a href="Admin_selfcategory.aspx">自定义模块</a></div>
</div>
<a href="
javascript:showdv('4')"><div class="left2_out" id="dv4" style="cursor:hand;">
D
菜单项</div></a>
<div class="left2_break" style="display: none" id="dvShow4">
<div class="left2_break_2"
id="divset15">
<a href="Admin_BlogArticleManage.aspx">D子
菜单1</a></div>
</div>
<a href="
javascript:showdv('5')"><div class="left2_out" id="dv5" style="cursor:hand;">
E
菜单项</div></a>
<div class="left2_break" style="display: none" id="dvShow5">
<div class="left2_break_2"
id="divset1">
<a href="#">E子
菜单1</a></div>
</div>
<a href="
javascript:showdv('6')"><div class="left2_out" id="dv6" style="cursor:hand;">
F
菜单项</div></a>
<div class="left2_break" style="display: none" id="dvShow6">
<div class="left2_break_2"
id="divset2">
<a href="#">F子
菜单1</a></div>
</div>
<a href="
javascript:showdv('7')"><div class="left2_out" id="dv7" style="cursor:hand;">
G
菜单项</div></a>
<div class="left2_break" style="display: none" id="dvShow7">
<div class="left2_break_2"
id="divset9">
<a href="#">G子
菜单1</a></div>
<div class="left2_break_2"
id="divset48">
<a href="Admin_BlogTagShow.aspx">标签显示</a></div>
</div>
<a href="
javascript:showdv('8')"><div class="left2_out" id="dv8" style="cursor:hand;">
H
菜单项</div></a>
<div class="left2_break" style="display: none" id="dvShow8">
<div class="left2_break_2" id="divset32">
<a href="#">H子
菜单1</a>
</div>
<div class="left2_break_2"
id="divset49">
<a href="admin_ManageVideo.aspx">视频管理</a></div>
<div class="left2_break_2"
id="divset35">
<a href="admin_ManageVidSpe.aspx">专辑管理</a></div>
</div>
</div>
</div>
</body>
</
html>
本教程介绍了如何使用HTML、CSS和JavaScript创建侧边栏导航菜单，以提升网站用户体验。通过添加必要的HTML标记，设计CSS样式，以及编写JavaScript代码来实现菜单的显示和隐藏，最终完成了一个功能齐全的侧边栏导航菜单。
最低0.47元/天 解锁文章
667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
