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

最新推荐文章于 2024-08-17 21:31:15 发布
最新推荐文章于 2024-08-17 21:31:15 发布
阅读量289 收藏 1
点赞数
文章标签： class menu stylesheet div function xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boy_lzj/article/details/1883707
版权

<!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="#" οnclick="ListPMenu(菜单编号);" title=""></a>
        用<ul>
         <li id="p菜单编号_菜单项编号"><a href="#" οnclick="ClickCMenu(菜单项编号);"></li>
        </ul>
        来写菜单项
    //-->
  <li id="p1">
   <a id="p1_title"  href="#"   οnclick="ListPMenu(1);" title="菜单一">菜单一</a>
   <ul class="menuList" id="menuList1" style="display:none">

    <li  id="p1_1" ><a  href="#"  οnclick="ClickCMenu(1);" title="菜单项1">菜单项</a></li>
    <li  id="p1_3"><a  href="#"  οnclick="ClickCMenu(3);" title="菜单项">菜单项</a></li>
    <li  id="p1_4"><a  href="#"   οnclick="ClickCMenu(4);" title="菜单项">菜单项</a></li>
    <li  id="p1_5"><a  href="#"  οnclick="ClickCMenu(5);" title="菜单项">菜单项</a></li>
    <li  id="p1_6"><a  href="#"  οnclick="ClickCMenu(6);" title="菜单项">菜单项</a></li>
    <li  id="p1_7"><a  href="#"  οnclick="ClickCMenu(7);" title="菜单项">通知存款计算器</a></li>
          <li  id="p1_8"><a  href="#"  οnclick="ClickCMenu(8);" title="菜单项">菜单项</a></li>
          <li  id="p1_9"><a  href="#"  οnclick="ClickCMenu(9);" title="菜单项">菜单项</a></li>
          <li  id="p1_10"><a  href="#"  οnclick="ClickCMenu(10);" title="菜单项">菜单项</a></li>
          <li  id="p1_11"><a  href="#"  οnclick="ClickCMenu(11);" title="菜单项">菜单项</a></li>
   </ul>
  </li>
  <li id="p2">
      <a href="#" id="p2_title" title="菜单二" οnclick="ListPMenu(2);">菜单二</a>
      <ul class="menuList" id="menuList2" style="display:none">
    <li  id="p2_1"><a href="#"  οnclick="ClickCMenu(1);" title="菜单项">菜单项</a></li>
    <li id="p2_2" ><a href="#"  οnclick="ClickCMenu(2);" title="菜单项">菜单项</a></li>
    <li id="p2_3"><a href="#"  οnclick="ClickCMenu(3);"  title="菜单项">菜单项</a></li>
    <li id="p2_4"><a href="#"  οnclick="ClickCMenu(4);" title="菜单项">菜单项</a></li>
    <li id="p2_5"><a  href="#"  οnclick="ClickCMenu(5);" title="菜单项">菜单项</a></li>
    <li id="p2_6"><a href="#"  οnclick="ClickCMenu(6);" title="菜单项">菜单项</a></li>
    <li id="p2_7"><a  href="#"  οnclick="ClickCMenu(7);" title="菜单项">菜单项</a></li>
    <li id="p2_8"><a  href="#"  οnclick="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
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VC++常用功能开发汇总
dvlinker的技术专栏
04-19 12万+
VC++常用功能开发汇总
web app实现左右滑动控制菜单
04-01
描述中提到，这个实现过程花费了两天时间，说明可能涉及到较为复杂的代码逻辑和优化工作。开发者还分享了他在CSDN博客上的文章链接，供没有积分的读者获取更多信息，这表明他愿意与社区共享自己的学习成果和技术经验...
win10桌面图标和菜单栏不时的闪烁问题
热门推荐
TianXinCoord的博客
03-11 16万+
  前言：近来笔者发现电脑不时的电脑桌面和菜单栏会不停的闪烁，只能通过Ctrl + shift + ESC打开任务管理器来重启资源管理器，但是发现重启之后的一会儿好了，但是过一会儿又闪烁，后来琢磨好久，才发现是有软件在更改默认软件，造成资源管理器不断重启，所以桌面图标才不断闪烁，恢复系统默认软件后就好了，下面将方法分享给大家一，按win键就是键盘左下角Ctrl键右边的一个，然后选择设置按钮，如下如...
两台计算机如何连接一个网络打印机共享,打印机怎么连接2台电脑？两台或多台电脑连接共享打印机操作方法...
weixin_34505326的博客
06-21 1万+
我们平时在办公时，都是多台电脑共用一个打印机，这样不同的电脑就可以共享一台打印机，从而打印出自己所需要的文件，但是很多小伙伴都不懂得如何设置。那么两台或者多台电脑要使用同一台打印机，如何设置共享打印机呢？下面智能手机网分享一下共享打印机的设置步骤，赶紧来下面学习一下吧。打印机怎么连接2台电脑？打印机连接2台电脑前的准备工作：1、连接打印机的电脑我们称为第一台电脑(已经成功安装驱动，并可以打印)；2...
微信开发之两天快速开发一个自己的微信小程序
LVXIANGAN的专栏
01-19 4万+
一．写在前面 1.为什么要学小程序开发？     对于前端开发而言，微信小程序因为其简单快速、开发成本低、用户流量巨大等特点，也就成了前端开发工程师必会的一个技能。   2.先看看小程序效果 （1）欢迎页     （2）首页：轮播头图，天气，豆瓣电影正在热映     （3）全国城市切换页   （4
(转) 两天快速开发一个自己的微信小程序
学无止境! 无休无止!
04-22 7万+
转自  https://www.cnblogs.com/xuanbiyijue/p/7980010.html一．写在前面1.为什么要学小程序开发？    对于前端开发而言，微信小程序因为其简单快速、开发成本低、用户流量巨大等特点，也就成了前端开发工程师必会的一个技能。 2.先放上我做的小程序可以在微信小程序搜索“悬笔e绝”，或者用微信扫描下面的二维码哦   （1）欢迎页：这个logo是当年念大学给...
国庆节，一天开发一个小程序+Web系统。2.5K到手。【分享开发经验】【收藏起来】
程序员springmeng
10-06 3万+
自从成为自由职业后。我对假期一点没有感觉！ 甚至我忘了每天是几月几号！不装b的说，我真的体会不到节假日的那种快乐了！ 如果想出去逛街，我想出去爬山，我想去公园散心，我都会避开节假日！ 前天，有个粉丝朋友找小孟，开发了一个系统。基本上一天就干完了！ 通常我开发费时间较多的就是沟通需求。一旦需求确认好，开发真的很快。我有自己封装的框架。 插入1 当然前面，我也分享了很多的系统，也都开源了，大家拿去学习吧。 插文章1 下面介绍下开开发的这个系统： 一，系统开发介绍 本社区菜站服务平台系统由两部
如何优雅解决若依二级菜单名字过长问题：若依（RuoYi）菜单字体大小，菜单长度修改攻略
猫头虎：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作：Libin9iOak，共赴知识与乐趣的探索之旅！
01-22 1985
在使用若依框架过程中，经常遇到菜单名称太长导致显示不全的问题。本文详细介绍两种有效的解决策略，包括如何增加菜单列宽和使用文本框动态显示标签名称。本文适合对前端布局优化感兴趣的开发者，无论是初学者还是经验丰富的大佬。掌握这些技巧后，你将能够优化菜单展示，提升用户体验。关键词：若依框架、菜单展示优化、前端开发、界面布局、CSS。处理菜单名称过长的问题是提升用户体验的一个细节，但非常关键。希望本文介绍的两种方法能帮助你优化若依框架的菜单展示。如果你对本文内容有任何疑问，欢迎点击下方名片，了解更多详细信息！
(html)wx.hideMenuItems 这个方法，隐藏微信功能按钮方法，是否可以用？(设置修改微信分享的菜单)
snow_love_xia的博客
08-22 2万+
今天分享一个简单的问题，现在微信分享盛行，微信分享已经成为了一种很好的宣传销售渠道，自然，产品对于分享的要求也就高了，这两天正好参与这块的开发，分享一下几个小的细节总结吧！ 1.分享文案的传递：对于不同的用户，我们有专门的定制的分享文案 对于文案传递就成了一个问题，因为是不同分享文案的传递，其实就是一个变量，那么这个问题变成了变量的传递，这样是不是就解决了 ...
如何从零开始写一个操作系统？
uunubt的专栏
08-20 3万+
首页 发现 等你来答 ​ 登录加入知乎 如何从零开始写一个简单的操作系统？ 关注问题 写回答 操作系统 编程学习 如何从零开始写一个简单的操作系统？ 看了这个：从零开始写一个简单的操作系统 求指教。 关注者 4,787 被浏览 352,884 关注问题 写回答 ​邀请回答 ​3 条评论 ​分享 ​ 37 个回答 默认排序​ 知乎用户 751 人赞...
手把手教你写一个Matlab App（一）
qq_44571245的博客
04-01 2万+
手把手教你实现一个Matlab App！关注博主，带你入坑Matlab App Designer！
卡巴斯基应急救援磁盘18.0镜像
02-28
官网下载了两天才下载好，先载免费分享给大家：（下转自 卡巴斯基官方博客，侵删） 我们都知道有一句话叫做”防范于未然”。但是，我们往往面临的情况是采取预防措施已为时已晚。人们常常到计算机已无法启动时，才会...
PinPKM-V201525（官网发布的最后一个免费无使用限制版本）
11-08
增加一个知识点可以链接多个文件，且文件类型不受限制 和相应的右键菜单 批量导入：增加全部格式和指定格式的文件类型支持，及允许指定默认的分类 增加数据库的选项卡快速选择（分类树左侧） 知识点：增加关闭时，...
如何算相恋1000天 用win7.docx
09-27
标题中的“如何算相恋1000天 用win7.docx”指的是利用Windows 7操作系统中的计算器功能来计算两个日期之间的天数差异，以此确定恋爱1000天的纪念日。描述中提到作者在使用Win7的过程中，发现了这个实用的功能，并...
火线100天广西专版2016中考英语总复习第一部分第六课时八上Units3_4试题
08-19
【火线100天广西专版2016中考英语总复习】是针对广西地区中学生进行的一次全面的英语复习课程，尤其注重对初中阶段知识的巩固。本复习资料集中在八年级上学期的Units 3～4，主题为“周围环境”。以下是这部分内容...
Java 图片转PDF的开源库
小湘西的博客
08-17 405
Flying Saucer 是一个用于将 XHTML 和 CSS 渲染为 PDF 的库。Apache PDFBox 是一个开源库，用于创建和操作 PDF 文档。如果使用 Maven，可以在。
java项目的实战练习
08-21
java项目实战练习
毕业设计，基于SpringBoot+Vue+MySQL开发的体育馆管理系统，源码+数据库+毕业论文+视频演示
08-21
毕业设计，基于SpringBoot+Vue+MySQL开发的体育馆管理系统，源码+数据库+毕业论文+视频演示 现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本体育馆管理系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。此体育馆管理系统利用当下成熟完善的SpringBoot框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的Mysql数据库进行程序开发。实现了用户在线选择试题并完成答题，在线查看考核分数。管理员管理收货地址管理、购物车管理、场地管理、场地订单管理、字典管理、赛事管理、赛事收藏管理、赛事评价管理、赛事订单管理、商品管理、商品收藏管理、商品评价管理、商品订单管理、用户管理、管理员管理等功能。体育馆管理系统的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时，也实现了数据信息的整体化，规范化与自动化。 关键词：体育馆管理系统；SpringBoot框架；Mysql；自动化
tomcat smartbi
最新发布
08-21
tomcat smartbi
Altium Designer官方教程：第一天入门与SchematicEditor基础
在《Altium Designer 三日通...通过第一天的学习，新用户将对Altium Designer有初步认识，并掌握基础操作，为后续两天的深入学习打下坚实基础。无论是电路设计新手还是希望提升技能的专业工程师，都可以从中受益良多。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值