前两天写的一个菜单和大家分享一下
2007-11-14 09:49
1141 查看
<!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>menu</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="toolsChannel">
<div class="menu">
<div class="t">
<div class="L"></div>
<div class="R"></div>
</div>
<ul class="c">
<!--
每个<li id="P菜单编号"></li>间放一个菜单
菜单名用<a id="p菜单编号_title" href="#" onclick="ListPMenu(菜单编号);" title=""></a>
用<ul>
<li id="p菜单编号_菜单项编号"><a href="#" onclick="ClickCMenu(菜单项编号);"></li>
</ul>
来写菜单项
//-->
<li id="p1">
<a id="p1_title" href="#" onclick="ListPMenu(1);" title="菜单一">菜单一</a>
<ul class="menuList" id="menuList1" style="display:none">
<li id="p1_1" ><a href="#" onclick="ClickCMenu(1);" title="菜单项1">菜单项</a></li>
<li id="p1_3"><a href="#" onclick="ClickCMenu(3);" title="菜单项">菜单项</a></li>
<li id="p1_4"><a href="#" onclick="ClickCMenu(4);" title="菜单项">菜单项</a></li>
<li id="p1_5"><a href="#" onclick="ClickCMenu(5);" title="菜单项">菜单项</a></li>
<li id="p1_6"><a href="#" onclick="ClickCMenu(6);" title="菜单项">菜单项</a></li>
<li id="p1_7"><a href="#" onclick="ClickCMenu(7);" title="菜单项">通知存款计算器</a></li>
<li id="p1_8"><a href="#" onclick="ClickCMenu(8);" title="菜单项">菜单项</a></li>
<li id="p1_9"><a href="#" onclick="ClickCMenu(9);" title="菜单项">菜单项</a></li>
<li id="p1_10"><a href="#" onclick="ClickCMenu(10);" title="菜单项">菜单项</a></li>
<li id="p1_11"><a href="#" onclick="ClickCMenu(11);" title="菜单项">菜单项</a></li>
</ul>
</li>
<li id="p2">
<a href="#" id="p2_title" title="菜单二" onclick="ListPMenu(2);">菜单二</a>
<ul class="menuList" id="menuList2" style="display:none">
<li id="p2_1"><a href="#" onclick="ClickCMenu(1);" title="菜单项">菜单项</a></li>
<li id="p2_2" ><a href="#" onclick="ClickCMenu(2);" title="菜单项">菜单项</a></li>
<li id="p2_3"><a href="#" onclick="ClickCMenu(3);" title="菜单项">菜单项</a></li>
<li id="p2_4"><a href="#" onclick="ClickCMenu(4);" title="菜单项">菜单项</a></li>
<li id="p2_5"><a href="#" onclick="ClickCMenu(5);" title="菜单项">菜单项</a></li>
<li id="p2_6"><a href="#" onclick="ClickCMenu(6);" title="菜单项">菜单项</a></li>
<li id="p2_7"><a href="#" onclick="ClickCMenu(7);" title="菜单项">菜单项</a></li>
<li id="p2_8"><a href="#" onclick="ClickCMenu(8);" title="菜单项">菜单项</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
var currentPindex = 0;
var currentCindex = 0;
//子菜单点击操作
function ClickCMenu(cindex){
//取消以前子菜单的激活状态
if( currentPindex > 0 && currentCindex > 0){
document.getElementById("p" + currentPindex + "_" + currentCindex ).className = "";
}
//激活当前点击菜单
currentCindex = cindex;
document.getElementById("p" + currentPindex + "_" + currentCindex ).className = "active";
}
//展开父菜单操作
function ListPMenu(pindex){
//当前活动的父菜单样式是menuHover
//关闭以前展开的父菜单
if(currentPindex > 0 && currentPindex != pindex){
document.getElementById("p" + currentPindex + "_title" ).className = "";
//todo:hidden menu ul
document.getElementById( "menuList" + currentPindex ).style.display = "none";
}
if(currentCindex > 0 && currentPindex != pindex ){
document.getElementById("p" + currentPindex + "_" + currentCindex ).className = "";
}
//设置当前活动的父菜单
currentPindex = pindex;
currentCindex = 0;//当前没有激活的子菜单
document.getElementById( "p" + pindex + "_title" ).className = "menuHover";
//todo:display menu ul
document.getElementById( "menuList" + pindex ).style.display = "";
}
//菜单初始
function initCurrentMenu(pindex,cindex){
//关闭以前
if ( currentPindex > 0 ){
document.getElementById( "p" + currentPindex ).className ="";
}
if ( currentCindex > 0 ){
document.getElementById( "p" + currentPindex + "_" + currentCindex ).className = "";
}
//todo: hidden menu div
//设置当前活动的
currentPindex = pindex;
currentCindex = cindex;
var strPindex = "p" +
9049
pindex;
var strCindex = strPindex + "_" + cindex;
if(pindex > 0){
document.getElementById( strPindex+"_title" ).className ="menuHover";
//todo: expand menu div
document.getElementById("menuList" + pindex).style.display = "";
}
if(cindex>0){
document.getElementById( strCindex ).className = "active";
}
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="toolsChannel">
<div class="menu">
<div class="t">
<div class="L"></div>
<div class="R"></div>
</div>
<ul class="c">
<!--
每个<li id="P菜单编号"></li>间放一个菜单
菜单名用<a id="p菜单编号_title" href="#" onclick="ListPMenu(菜单编号);" title=""></a>
用<ul>
<li id="p菜单编号_菜单项编号"><a href="#" onclick="ClickCMenu(菜单项编号);"></li>
</ul>
来写菜单项
//-->
<li id="p1">
<a id="p1_title" href="#" onclick="ListPMenu(1);" title="菜单一">菜单一</a>
<ul class="menuList" id="menuList1" style="display:none">
<li id="p1_1" ><a href="#" onclick="ClickCMenu(1);" title="菜单项1">菜单项</a></li>
<li id="p1_3"><a href="#" onclick="ClickCMenu(3);" title="菜单项">菜单项</a></li>
<li id="p1_4"><a href="#" onclick="ClickCMenu(4);" title="菜单项">菜单项</a></li>
<li id="p1_5"><a href="#" onclick="ClickCMenu(5);" title="菜单项">菜单项</a></li>
<li id="p1_6"><a href="#" onclick="ClickCMenu(6);" title="菜单项">菜单项</a></li>
<li id="p1_7"><a href="#" onclick="ClickCMenu(7);" title="菜单项">通知存款计算器</a></li>
<li id="p1_8"><a href="#" onclick="ClickCMenu(8);" title="菜单项">菜单项</a></li>
<li id="p1_9"><a href="#" onclick="ClickCMenu(9);" title="菜单项">菜单项</a></li>
<li id="p1_10"><a href="#" onclick="ClickCMenu(10);" title="菜单项">菜单项</a></li>
<li id="p1_11"><a href="#" onclick="ClickCMenu(11);" title="菜单项">菜单项</a></li>
</ul>
</li>
<li id="p2">
<a href="#" id="p2_title" title="菜单二" onclick="ListPMenu(2);">菜单二</a>
<ul class="menuList" id="menuList2" style="display:none">
<li id="p2_1"><a href="#" onclick="ClickCMenu(1);" title="菜单项">菜单项</a></li>
<li id="p2_2" ><a href="#" onclick="ClickCMenu(2);" title="菜单项">菜单项</a></li>
<li id="p2_3"><a href="#" onclick="ClickCMenu(3);" title="菜单项">菜单项</a></li>
<li id="p2_4"><a href="#" onclick="ClickCMenu(4);" title="菜单项">菜单项</a></li>
<li id="p2_5"><a href="#" onclick="ClickCMenu(5);" title="菜单项">菜单项</a></li>
<li id="p2_6"><a href="#" onclick="ClickCMenu(6);" title="菜单项">菜单项</a></li>
<li id="p2_7"><a href="#" onclick="ClickCMenu(7);" title="菜单项">菜单项</a></li>
<li id="p2_8"><a href="#" onclick="ClickCMenu(8);" title="菜单项">菜单项</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
var currentPindex = 0;
var currentCindex = 0;
//子菜单点击操作
function ClickCMenu(cindex){
//取消以前子菜单的激活状态
if( currentPindex > 0 && currentCindex > 0){
document.getElementById("p" + currentPindex + "_" + currentCindex ).className = "";
}
//激活当前点击菜单
currentCindex = cindex;
document.getElementById("p" + currentPindex + "_" + currentCindex ).className = "active";
}
//展开父菜单操作
function ListPMenu(pindex){
//当前活动的父菜单样式是menuHover
//关闭以前展开的父菜单
if(currentPindex > 0 && currentPindex != pindex){
document.getElementById("p" + currentPindex + "_title" ).className = "";
//todo:hidden menu ul
document.getElementById( "menuList" + currentPindex ).style.display = "none";
}
if(currentCindex > 0 && currentPindex != pindex ){
document.getElementById("p" + currentPindex + "_" + currentCindex ).className = "";
}
//设置当前活动的父菜单
currentPindex = pindex;
currentCindex = 0;//当前没有激活的子菜单
document.getElementById( "p" + pindex + "_title" ).className = "menuHover";
//todo:display menu ul
document.getElementById( "menuList" + pindex ).style.display = "";
}
//菜单初始
function initCurrentMenu(pindex,cindex){
//关闭以前
if ( currentPindex > 0 ){
document.getElementById( "p" + currentPindex ).className ="";
}
if ( currentCindex > 0 ){
document.getElementById( "p" + currentPindex + "_" + currentCindex ).className = "";
}
//todo: hidden menu div
//设置当前活动的
currentPindex = pindex;
currentCindex = cindex;
var strPindex = "p" +
9049
pindex;
var strCindex = strPindex + "_" + cindex;
if(pindex > 0){
document.getElementById( strPindex+"_title" ).className ="menuHover";
//todo: expand menu div
document.getElementById("menuList" + pindex).style.display = "";
}
if(cindex>0){
document.getElementById( strCindex ).className = "active";
}
}
</script>
</body>
</html>
相关文章推荐
- 前两天写了一个ini文件解析类,感觉还不错,和大家分享一下:)
- 如何备考CCIE/HCIE,一个源自于美帝学员的问题,我会在下午的直播分享会上为大家分享一下经验
- 太感动了,转载他人让大家也分享 一个妓女死了,学校为她降半旗!(无比崇敬)---希望朋友能转载一下!
- 一个各学校就业分析、各公司待遇和发展前景的好网站,跟大家分享一下
- 写了一个ES6(ES2015)模块可用的xml2json插件,给大家分享一下
- 从网上找到一个清晰CSS视频教程和大家分享一下
- 一次偶然机遇找到一个不错的关于Android实现加载gif动画的实例,写一下分享个大家。
- 一个不错的Silverlight展示网站反编译后的源码和大家分享一下(http://www.microsoft.com/taiwan/student/Good.htm),很简单的
- 一个小公司老板的日常管理[朋友发来的,给大家分享一下]
- 今天写了一个webservice的loadrunner脚步和大家分享一下
- 朋友今天问我一个面试题,我看了看,给大家分享一下
- 到网上收集了一个“高大上”的CSS3登入表单和大家分享一下
- 遇到的一个问题和大家分享一下
- 一个小公司老板的日常管理[朋友发来的,给大家分享一下]
- 发现一篇不错的博文,和大家分享一下,为有志成为一名优秀前端工程师的童鞋们提供一个
- 朋友今天问我一个面试题,我看了看,给大家分享一下
- 一个自己编写的象棋程序,可实现走棋谱(如炮二平五),工程完成度%96,跟大家分享一下,下一步要做残局,欢迎交流
- 今天堂哥给我介绍了一个很好的博客,给大家分享一下
- 最近发现一个很好的G站,99wg站,和大家分享一下的了
- 一个小公司老板的日常管理[朋友发来的,给大家分享一下]