JAVASCRIPT +HTML 写的一个菜单和大家分享一下

<!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" + 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>

解决方案 »

  1.   

    谢谢你的好意，但是，希望你分享代码的时候先做下测试，上面的代码考出来试试，不能用啊。用html code！
      

  2.   


    <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>
    <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:hiddenmenuul
    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:displaymenuul
    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:hiddenmenudiv
    //设置当前活动的
    currentPindex=pindex;
    currentCindex=cindex;varstrPindex="p"+pindex;
    varstrCindex=strPindex+"_"+cindex;
    if(pindex>0){
    document.getElementById(strPindex+"_title").className="menuHover";
    //todo:expandmenudiv
    document.getElementById("menuList"+pindex).style.display="";
    }if(cindex>0){
    document.getElementById(strCindex).className="active";
    }
    }
    </script>
    <div id="toolsChannel">
    <div class="menu">
    <div class="t">
    <div class="L"></div>
    <div class="R"></div>
    </div><ul class="c">
    <!--
    每个<liid="P菜单编号"></li>间放一个菜单
    菜单名用<aid="p菜单编号_title"href="#"onclick="ListPMenu(菜单编号);"title=""></a>
    用<ul>
    <liid="p菜单编号_menu编号"><ahref="#"onclick="ClickCMenu(menu编号);"></li>
    </ul>
    来写menu
    //-->
    <li id="p1">
    <a id="p1_title" href="#" onclick="ListPMenu(1);" title="menu1">menu1</a>
    <ul class="menuList" id="menuList1" style="display:none"><li id="p1_1"><a href="#"onclick="ClickCMenu(1);"title="menu1">menu</a></li>
    <li id="p1_3"><a href="#"onclick="ClickCMenu(3);"title="menu">menu</a></li>
    <li id="p1_4"><a href="#"onclick="ClickCMenu(4);"title="menu">menu</a></li>
    <li id="p1_5"><a href="#"onclick="ClickCMenu(5);"title="menu">menu</a></li>
    <li id="p1_6"><a href="#"onclick="ClickCMenu(6);"title="menu">menu</a></li>
    <li id="p1_7"><a href="#"onclick="ClickCMenu(7);"title="menu">computer</a></li>
    <li id="p1_8"><a href="#"onclick="ClickCMenu(8);"title="menu">menu</a></li>
    <li id="p1_9"><a href="#"onclick="ClickCMenu(9);"title="menu">menu</a></li>
    <li id="p1_10"><a href="#"onclick="ClickCMenu(10);"title="menu">menu</a></li>
    <li id="p1_11"><a href="#"onclick="ClickCMenu(11);"title="menu">menu</a></li>
    </ul>
    </li>
    <li id="p2">
    <a href="#" id="p2_title" title="menu2" onclick="ListPMenu(2);">menu2</a>
    <ul class="menuList"id="menuList2"style="display:none">
    <li id="p2_1"><a href="#"onclick="ClickCMenu(1);"title="menu">menu</a></li>
    <li id="p2_2"><a href="#"onclick="ClickCMenu(2);"title="menu">menu</a></li>
    <li id="p2_3"><a href="#"onclick="ClickCMenu(3);"title="menu">menu</a></li>
    <li id="p2_4"><a href="#"onclick="ClickCMenu(4);"title="menu">menu</a></li>
    <li id="p2_5"><a href="#"onclick="ClickCMenu(5);"title="menu">menu</a></li>
    <li id="p2_6"><a href="#"onclick="ClickCMenu(6);"title="menu">menu</a></li>
    <li id="p2_7"><a href="#"onclick="ClickCMenu(7);"title="menu">menu</a></li>
    <li id="p2_8"><a href="#"onclick="ClickCMenu(8);"title="menu">menu</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </body>
    </html>
      

  3.   

    我测试过的啊,很好用的啊这个是郊果,而且,现在的JAVASCRIPT是不用写到前面的,写到页面下面就可以了,没问题的.我只不过没把css样式写上去而已你可以自定义样式
      

  4.   

    我觉得JS写得不够简化，换个思路会简单很多，就喜欢简化的JS代码。
      

  5.   

    #toolsChannel .menu { float:left; width:220px; margin:1px; }
    #toolsChannel .menu .t { background:url(../images/toolsMenuBg.jpg) repeat-x; height:35px; margin-bottom:1px; }
    #toolsChannel .menu .t .L { background:url(../images/toolsMenuT1.jpg) no-repeat; height:20px; width:121px; margin:6px 0 9px; }
    #toolsChannel .menu .t .R
    #toolsChannel .menu .c { overflow:hidden; width:100%; }
    #toolsChannel .menu .c li { float:left; width:100%; }
    #toolsChannel .menu .c a{ display:block; width:99%; background:#DCEAF5 url(../images/toolMenuIcon1.gif) left no-repeat; padding:5px 0; border:1px solid #EAF3F8; color:#4A6AA3; text-indent:22px; }
    #toolsChannel .menu .c a:hover{ display:block; width:99%; background:#C2DCED url(../images/toolMenuIcon1.gif) left no-repeat; padding:5px 0; border:1px solid #EAF3F8; text-decoration:none; text-indent:22px; }
    #toolsChannel .menu .c a.menuHover, #toolsChannel .menu .c a.menuHover:hover { display:block; width:100%; background:#F3EBC6 url(../images/toolMenuIcon2.jpg) left no-repeat; border:0; padding:5px 0; border-bottom:1px solid #fff; text-indent:24px; color:#E56C59; font-weight:bold; }
    #toolsChannel .menu .c .menuList{ background:#FBFBF3; width:100%; overflow:hidden; padding:5px 0; }
    #toolsChannel .menu .c .menuList a { display:block; width:100%; background:none; border:0; text-indent:25px; color:#666; padding:5px 0; }
    #toolsChannel .menu .c .menuList a:hover { display:block; width:100%; background:#F5F1E5 url(../images/toolMenuIcon3.jpg) left no-repeat; text-indent:30px; color:#EB4422; padding:5px 0; text-decoration:none; border:0; }
    #toolsChannel .menu .c .menuList .active { display:block; width:100%; background:#F5F1E5 url(../images/toolMenuIcon3.jpg) left no-repeat; text-indent:30px; color:#EB4422; padding:5px 0; text-decoration:none; border:0; }这个是上面用到的CSS
    是的,这个写得很麻烦,是为了一些特殊需要写的,比如,我外部连接过来,显示某一子菜单下的内容,这样就用initCurrentMenu(pindex,cindex)这个函数来做菜单形态的初始化会方便得多
      

  6.   

    呵呵，恭喜楼主，JF我刚写的一个控件：http://www.blog.163.com/feb-/blog/static/16577892007102911354841/
      

  7.   

    这个菜单写的不错。发现一个小问题，也许是BUG还是我这里的问题。当点击父菜单打开子菜单后，发现无法再通过点击父菜单来关闭（隐藏）子菜单~~~
      

  8.   

    http://www.stdingan.com:8080/js/popMenu.htm一个右键菜单，也和大家分享一下~~~：）