本文介绍了一个包含多种交互效果的网页导航菜单实现方案。通过使用HTML、CSS和JavaScript技术，该菜单能够展示多层次的下拉子菜单，并且通过简单的点击操作来展开或折叠这些子菜单。此外，还提供了一些实用的代码片段，例如使用jQuery库来简化DOM操作。
<!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=utf-8" />
<title></title>
<link href="../../css/b_index.css" rel="stylesheet" type="text/css" />
<link href="../../css/a_index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../js/jquery1.9.js"></script>
<script type="text/javascript" src="../../js/base.js"></script>
<script type="text/javascript" src="../../js/dtree.js"></script>
<script type="text/javascript" src="../../js/sdmenu.js"></script>
</head>
<body class="body_bg_i">
<div class="CM_header">
<div class="CM_headTop"><a href="#;" class="logo"></a></div>
<div class="CM_nav">
<ul>
<li><a href="../../index.html"><span>工作台 </span></a></li>
<li class="current"><a href="baozhangManage.html"><span>报理</span></a></li>
<li><a href="../CountingManage/jitiManage.html"><span>计理</span></a></li>
</ul>
</div>
<div class="CM_nhelp">
<div class="topbar"><a href="#;"><b class="headicon icon4"></b> xx</a><a href="#">[退出]</a> <span>您好！</span> <span>2015</span> | <a href="#;" class="p10"><b class="headicon icon5"></b></a> | <a href="#;">？</a></div>
</div>
</div>
<div class="CM_main ">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_contain">
<tr>
<td valign="top" style="overflow: hidden; width:210px"><div class="left_con_i">
<ul class="left_nav bfe">
<li><a href="#;" class="nav_li"><span class="fl"><i class="i1"></i>工作台</span> <b class="triangle2"></b></a>
<ul class="left_nav_second">
<li class="bor_none"><a href="#;" class="nav_li_s"><span class="fl">待办</span></a></li>
</ul>
</li>
<li><a href="#;" class="nav_li"><span class="fl"><i class="i1"></i>新建</span> <b class="triangle2"></b></a>
<ul class="left_nav_second">
<li class="bor_none"><a href="#;" class="nav_li_s">应<b class="triangle4"></b></a>
<ul class="left_nav_subpage" style="display:none;">
<li class="curr"><a href="fillReimbursement.html" target="_blank">费1</a></li>
<li><a href="clxfhs_checksheet.html" target="_blank">2</a></li>
</ul>
</li>
<li class="bor_none"><a href="ysbz_checksheet.html" target="_blank" class="nav_li_s">收</a>
</li>
<li class="bor_none"><a href="#;" class="nav_li_s">总<b class="triangle4"></b></a>
<ul class="left_nav_subpage" style="display:none;">
<li><a href="zzty_checksheet.html" target="_blank">xx1</a></li>
<li><a href="zzszz_checksheet.html" target="_blank">xx2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div></td>
<td valign="top" width="15px;"><a href="#;" class="shrink_right"><span onclick="shrink(this)" title="缩放菜单">缩放菜单</span></a></td>
<td valign="top" >
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".nav_li").on("click",function(){
if(
$(this).next(".left_nav_second").css("display") == "none") {
$(this).next(".left_nav_second").css("display", "inline");
$(this).find("b").removeClass('triangle').addClass('triangle2');
} else {
$(this).next(".left_nav_second").css("display", "none");
$(this).find("b").removeClass('triangle2').addClass('triangle');
}
});
$(".nav_li_s").on("click",function(){
if(
$(this).next(".left_nav_subpage").css("display") == "none") {
$(this).next(".left_nav_subpage").css("display", "inline");
$(this).find("b").removeClass('triangle4').addClass('triangle5');
} else {
$(this).next(".left_nav_subpage").css("display", "none");
$(this).find("b").removeClass('triangle5').addClass('triangle4');
}
});
});
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="../../css/b_index.css" rel="stylesheet" type="text/css" />
<link href="../../css/a_index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../js/jquery1.9.js"></script>
<script type="text/javascript" src="../../js/base.js"></script>
<script type="text/javascript" src="../../js/dtree.js"></script>
<script type="text/javascript" src="../../js/sdmenu.js"></script>
</head>
<body class="body_bg_i">
<div class="CM_header">
<div class="CM_headTop"><a href="#;" class="logo"></a></div>
<div class="CM_nav">
<ul>
<li><a href="../../index.html"><span>工作台 </span></a></li>
<li class="current"><a href="baozhangManage.html"><span>报理</span></a></li>
<li><a href="../CountingManage/jitiManage.html"><span>计理</span></a></li>
</ul>
</div>
<div class="CM_nhelp">
<div class="topbar"><a href="#;"><b class="headicon icon4"></b> xx</a><a href="#">[退出]</a> <span>您好！</span> <span>2015</span> | <a href="#;" class="p10"><b class="headicon icon5"></b></a> | <a href="#;">？</a></div>
</div>
</div>
<div class="CM_main ">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_contain">
<tr>
<td valign="top" style="overflow: hidden; width:210px"><div class="left_con_i">
<ul class="left_nav bfe">
<li><a href="#;" class="nav_li"><span class="fl"><i class="i1"></i>工作台</span> <b class="triangle2"></b></a>
<ul class="left_nav_second">
<li class="bor_none"><a href="#;" class="nav_li_s"><span class="fl">待办</span></a></li>
</ul>
</li>
<li><a href="#;" class="nav_li"><span class="fl"><i class="i1"></i>新建</span> <b class="triangle2"></b></a>
<ul class="left_nav_second">
<li class="bor_none"><a href="#;" class="nav_li_s">应<b class="triangle4"></b></a>
<ul class="left_nav_subpage" style="display:none;">
<li class="curr"><a href="fillReimbursement.html" target="_blank">费1</a></li>
<li><a href="clxfhs_checksheet.html" target="_blank">2</a></li>
</ul>
</li>
<li class="bor_none"><a href="ysbz_checksheet.html" target="_blank" class="nav_li_s">收</a>
</li>
<li class="bor_none"><a href="#;" class="nav_li_s">总<b class="triangle4"></b></a>
<ul class="left_nav_subpage" style="display:none;">
<li><a href="zzty_checksheet.html" target="_blank">xx1</a></li>
<li><a href="zzszz_checksheet.html" target="_blank">xx2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div></td>
<td valign="top" width="15px;"><a href="#;" class="shrink_right"><span onclick="shrink(this)" title="缩放菜单">缩放菜单</span></a></td>
<td valign="top" >
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".nav_li").on("click",function(){
if(
$(this).next(".left_nav_second").css("display") == "none") {
$(this).next(".left_nav_second").css("display", "inline");
$(this).find("b").removeClass('triangle').addClass('triangle2');
} else {
$(this).next(".left_nav_second").css("display", "none");
$(this).find("b").removeClass('triangle2').addClass('triangle');
}
});
$(".nav_li_s").on("click",function(){
if(
$(this).next(".left_nav_subpage").css("display") == "none") {
$(this).next(".left_nav_subpage").css("display", "inline");
$(this).find("b").removeClass('triangle4').addClass('triangle5');
} else {
$(this).next(".left_nav_subpage").css("display", "none");
$(this).find("b").removeClass('triangle5').addClass('triangle4');
}
});
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
