前两天写的一个菜单和大家分享一下

于 2007-11-14 09:49:00 发布
阅读量318 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： class menu stylesheet div function xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/boy_lzj/article/details/1883707
本文介绍了一个基于HTML的菜单设计案例，详细展示了如何使用HTML、CSS和JavaScript实现菜单的交互效果，包括菜单项的展开与收起、高亮显示等功能。

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

boy_lzj
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值