仿QQ菜单----三级菜单

最新推荐文章于 2021-09-10 11:46:14 发布
最新推荐文章于 2021-09-10 11:46:14 发布
阅读量882 收藏
点赞数
分类专栏： JS 文章标签： qq javascript class div function stylesheet

 <!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="style2.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
var number=2;
function LMYC(obj) {
var lbmc
var treePic
    for (i=1;i<=number;i++) {
        lbmc = document.getElementById('LM' + i);
        treePic = document.getElementById('treePic'+i);
        treePic.className = 'lmenub';
        lbmc.style.display = 'none';
    }
}
 
function ShowFLT(i) {
    lbmc = document.getElementById('LM' + i);
    treePic = document.getElementById('treePic' + i)
    if (lbmc.style.display == 'none') {
        LMYC();
        treePic.className = 'lmenua';
        lbmc.style.display = '';
    }
    else {
        treePic.className = 'lmenub';
        lbmc.style.display = 'none';
    }
 
}
var n=4;
function LMYCB(obj) {
var lbmcb
var treePicb
    for (i=1;i<=n;i++) {
        lbmcb = document.getElementById('LMb' + i);
        treePicb = document.getElementById('treePicb'+i);
        treePicb.className = 'lmenud';
        lbmcb.style.display = 'none';
    }
}
 
function ShowFLTb(i) {
    lbmcb = document.getElementById('LMb' + i);
    treePicb = document.getElementById('treePicb' + i)
    if (lbmcb.style.display == 'none') {
        LMYCB();
        treePicb.className = 'lmenuc';
        lbmcb.style.display = '';
    }
    else {
        treePicb.className = 'lmenud';
        lbmcb.style.display = 'none';
    }
 
}
 function checkTdBg(obj){
    var obj_td = document.getElementsByTagName('span');
    for( var int_i = 0 ; int_i < obj_td.length ; int_i ++ ){
     if( obj_td[int_i] == obj ){
      obj_td[int_i].className = 'active';
     }
     else{
      obj_td[int_i].className = '';
     }
    }
   }
</script>
<style>
a{color:#333; text-decoration:none;}
a:hover{color:#FF0033;}
body{font-family: "宋体";font-size:12px; margin:0; padding:0;}
ul{list-style-type:none; margin:0; padding:0;}
li{margin:0; padding:0;}
.leftmenu{background:#EEF2FB;height:auto;margin:0 auto; width:182px;border:1px solid #73C2FF;}
.lmenub{background:url(http://bbs.blueidea.com/attachment.php?aid=117261&k=d6565eadc3b2be5a78f560c9e7f49581&t=1240970983&noupdate=yes)  no-repeat left;height:25px; line-height:25px;color:#4B6486; font-size:14px; font-weight:700;text-align:left; text-indent:19px; cursor:pointer;}
.lmenua{background:url(http://bbs.blueidea.com/attachment.php?aid=117262&k=9981f86f0f8e995aa7ff79bc5586bd81&t=1240970983&noupdate=yes) no-repeat;17px;height:25px; line-height:25px;color:#4B6486; font-size:14px; font-weight:700;text-align:left; text-indent:19px; cursor:pointer;}
.lmenuc{border-bottom:1px solid #A1B7CE; background:url(http://bbs.blueidea.com/attachment.php?aid=117260&k=bd3321ea3c1c02ff5570951500e7dc5e&t=1240970983&noupdate=yes) repeat-x left;font-size:12px;height:22px;line-height:22px;cursor:pointer; text-indent:20px; color:#222; font-weight:700;}
.lmenud{font-size:12px;height:22px;line-height:22px;background:#E5F5FF;text-indent:10px;border-top: 1px solid #fff;border-bottom: 1px solid #A9DAFF; font-weight:normal;cursor:pointer; text-indent:20px;}
.pclist{height:200px; overflow-y:scroll; background:#fff; width:164px; padding:5px 2px 5px 17px;}
.pclist li{background:url(http://bbs.blueidea.com/attachment.php?aid=117259&k=1a1e02d41c7c0fa55788ba52cdf7e05b&t=1240970983&noupdate=yes) no-repeat 0 5px;height:22px; line-height:22px; font-size:12px; padding-left:17px;}
.pclist .active{background:#FFFFCC; height:15px; border:1px solid #CEB70D; padding:1px 3px;}
</style>
</head>
<body style="background:#EEF2FB;">
  <div class="leftmenu">
    <div class="lmenua" id="treePic1" onClick="javascript:ShowFLT(1)">一级菜单A</div>
 <div id="LM1" >
    <div class="lmenuc" id="treePicb1" onClick="javascript:ShowFLTb(1)">文管产品</div>
        <div id="LMb1" class="pclist ">
      <ul>
     <li><span οnclick='checkTdBg(this);' class="active"><a href="#">SCP1A</a></span></li>
              <li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
     <li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
              <li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
     <li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
      <li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
              <li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
     <li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
              <li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
     <li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
      <li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
              <li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
     <li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
              <li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
     <li><span οnclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
   </ul>
      </div>
     <div class="lmenud" id="treePicb2" onClick="javascript:ShowFLTb(2)">未分组</div>
   <div id="LMb2" class="pclist" style="display:none;">
      <ul>
    <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
   </ul>
      </div>
 </div>
   <div class="lmenub" id="treePic2" onClick="javascript:ShowFLT(2)">一级菜单B</div>
   <div id="LM2" style="display:none;">
     <div class="lmenud" id="treePicb3" onClick="javascript:ShowFLTb(3)">桌面文具</div>
    <div id="LMb3" class="pclist" style="display:none;">
      <ul>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
   </ul>
         </div>
  <div class="lmenud" id="treePicb4" onClick="javascript:ShowFLTb(4)">文管产品</div>
   <div id="LMb4" class="pclist" style="display:none;">
      <ul>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span οnclick='checkTdBg(this);'>SCP1A</span></li>
   </ul>
          </div>
   </div>
  
</div>
</body>
</html>

jefflam
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿QQ导航菜单_导航菜单_C#_
09-29
.net C# 仿 QQ 导航菜单 示例源代码 下载。
仿QQ导航菜单
09-23 2728
仿QQ导航菜单 仿QQ导航菜单.titleStyle{background-color:#008800;color:#ffffff;border-top:1px solid #FFFFFF;font-size:9pt;cursor:hand;}.contentStyle{background-color:#eeffee;color:blue;font-size:9pt;} a{color:bl
VB导航菜单 仿QQ菜单
03-15
比较不借的一个控件，用它可以制作仿QQ垂直折叠菜单一样的菜单，而且它还具有属性设置菜单，使用起来非常方便。
仿QQ侧滑菜单
DennisJu的专栏
10-19 694
仿QQ侧滑菜单 前言 Google官方已推出DrawerLayout和NavigationView作为MD设计的侧边栏，效果简洁大方，但是国内的app标准参差不齐，众口难调才不管你什么官方的呢，我开心就好，但基本也是遵循这大企业的路子走的，所以今天就写一个仿照QQ侧滑的练练手吧，因为不想引入其他太多的MD内容，所以还是用的基本的方法去写，这样更纯粹一点。 效果分析 侧滑是一
JS实现仿QQ效果的三级竖向菜单
11-25
为了实现三级菜单的效果，你可以在这个基础上扩展`Switchmenu()`函数，增加对三级菜单的处理。当用户点击二级菜单项时，可以触发另一个类似的函数，用于显示或隐藏三级菜单。这通常涉及到递归或循环遍历三级菜单的子...
swift-QDrawerController实现类似QQ抽屉样式左右侧滑菜单
08-15
在Swift中，实现这样的抽屉样式侧滑菜单，可以借助第三方库，如`QDrawerController`。 `QDrawerController`是一个基于Swift的库，专门用于创建类似QQ的抽屉式侧滑菜单效果。这个库提供了灵活的配置选项，包括菜单的...
Android仿QQ分组实现二级菜单展示
08-25
Android 仿 QQ 分组实现二级菜单展示 一、概述 Android 仿 QQ 分组实现二级菜单展示是一种常见的 UI 设计模式，旨在提供一个直观、简洁的菜单展示方式。在这篇文章中，我们将详细介绍 Android 仿 QQ 分组实现二级...
仿QQ右划菜单
08-14
模仿QQ右划菜单,向右划动出现菜单，主界面缩小，菜单界面放大
漂亮的JavaScript仿QQ多级折叠菜单
12-31
漂亮的JavaScript仿QQ多级折叠菜单。
ios-仿QQ下拉菜单.zip
07-11
昨天看到一位仁兄发了个这个 小弟跟着做了做 又整理了一下 跟大家分享一下 （第一次发 希望那位仁兄不要介意哈）
仿QQ菜单 html5,JS实现仿QQ效果的三级竖向菜单
weixin_36293680的博客
07-06 164
本文实例讲述了JS实现仿QQ效果的三级竖向菜单。分享给大家供大家参考。具体如下：这是一款仿QQ的三级菜单，竖向三级，两级的比较多见，三级的不多哦，不过本菜单三级菜单没有美化，你需要自己再美化一下。运行效果截图如下：在线演示地址如下：具体代码如下：仿QQ的菜单，三级竖向function Switchmenu(obj){if(document.getElementById){var el = docu...
仿QQ侧拉菜单笔记
JUST DO
09-23 2128
仿QQ侧拉菜单笔记今天模仿视频上的教程一步一步完成一个类似QQ侧滑菜单的一个demo再次留下笔记，以加强记忆。同时希望看到的各位多加批评多提建议（另外第一次用md排版，不好的话不要见怪)！ 应用场景 ---扩展主面板内容 ---炫酷菜单展示 实施步骤 ---分析QQ侧滑是有几部分构成 ---分析每一部分都有什么功能与动画效果 ---分析完后就可以开始敲代码了 …………………………more……………
仿QQ5.0菜单的实现及分析
kenzo0的博客
01-30 535
在慕课网上看了鸿洋扣扣5.0菜单的视频，在这里写下新的也顺便梳理一下里面涉及到的知识点。不得不佩服大神的深度，讲的非常好。一、普通侧滑菜单的实定义出menu的布局文件。<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
教你如何创建类似QQ的android弹出菜单
weixin_33763244的博客
07-18 65
热心推荐： Android  ListView两种长按弹出菜单方式 popupwindow实现弹出菜单效果 Android人才招聘——最新招聘 大家可能看到 android 的自带的系统菜单比较难看,如图:   很多应用都自己定义了系统菜单, QQ游览器 手机QQ 我今天做的就是类似手机QQ的菜单,效果图如下: 这是我用PopupWindow重写一个菜单 ...
仿QQ多级折叠、展开菜单，三级下拉导航
07-19 152
仿QQ多级折叠、展开菜单，三级下拉导航 仿QQ面板风格的多级折叠、展开菜单，三级下拉导航，JavaScript+CSS共同结晶的结果，推荐给大家，点击“运行”可查看效果。 http://www.ij2ee.com/ http://www.gbsou.com/ ...
javaScript基础
qq_44333590的博客
03-09 504
ECMAScript 引入js的方式 内部方式 <script> document.getElementById("btn").onclick=function () { alert("点我干嘛？"); } + 外部方式 <script src="js/my.js"></script> 输入输出语句 输入框 prompt(“提示内容”); 弹出警告框 alert(“提示内容”); 控制台输出 console.log(“显示内容”
android_基础_实现仿qq侧滑菜单
写bug的蚊子的博客
09-10 749
Material Design 系列之 DrawerLayout + NavigationView 开发详解 原文 原创 Jaynm [码农专栏](javascript:void(0)???? 前言 DrawerLayout 是 Support Library 包中实现了侧滑菜单效果的控件，可以说 DrawerLayout 是因为第三方控件如 MenuDrawer 等的出现之后，google 借鉴而出现的产物。DrawerLayout 分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（Drawe
普洛菲斯PRO-FACE入门手册：工程建立与画面编辑详解
PRO-Face用户手册是一份针对入门级人员设计的实用指南，由普洛菲斯国际贸易（上海）有限公司编撰，主要介绍了普洛菲斯公司的GP-PRO/PBⅢ for Windows软件的基本操作和应用基础。该手册详细涵盖了工程建立、画面编辑...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值