首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现仿QQ效果的三级竖向菜单

Posted in Javascript onSeptember 25, 2015

本文实例讲述了JS实现仿QQ效果的三级竖向菜单。分享给大家供大家参考。具体如下：

这是一款仿QQ的三级菜单，竖向三级，两级的比较多见，三级的不多哦，不过本菜单三级菜单没有美化，你需要自己再美化一下。

运行效果截图如下：

JS实现仿QQ效果的三级竖向菜单

在线演示地址如下：

具体代码如下：

<html>
<head>
<title>仿QQ的菜单，三级竖向</title>
<script language="javascript">
function Switchmenu(obj){
if(document.getElementById){
var el = document.getElementById("menu_"+obj);
var ar = document.getElementById("menu").getElementsByTagName("ul"); 
if(el.style.display != "block"){ 
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu")
ar[i].style.display = "none";
document.getElementById("menu"+(i+1)).className="menutbg_1 cursor"
}
el.style.display = "block";
document.getElementById("menu"+obj).className="menutbg_2 cursor"
}else{
el.style.display = "none";
document.getElementById("menu"+obj).className="menutbg_1 cursor"
}
}
}
</script>
<script language="javascript" id="clientEventHandlersJS">
<!--
var number=6;
function LMYC() {
var lbmc;
 for (i=1;i<=number;i++) {
 lbmc = eval('LM' + i);
 lbmc.style.display = 'none';
 }
}
function ShowFLT(i) {
 lbmc = eval('LM' + i);
 //treePic = eval('treePic' + i)
 if (lbmc.style.display == 'none') {
 LMYC();
 //treePic.src = 'images/nofile.gif';
 lbmc.style.display = '';
 }
 else {
 //treePic.src = 'images/file.gif';
 lbmc.style.display = 'none';
 }
}
//-->
 </script>
 <style type="text/css">
 <!--
 body{font-size:12px; margin:0; padding:0;}
 ul{list-style-type:none; margin:0; padding:0;}
 li{margin:0; padding:0;}
 #menu{background:#fff; width:182px; height:auto;margin:0 auto; border:1px solid #73C2FF;}
 .cursor{cursor:pointer;}
 .submenu{display: none;}
 .menutbg_1{background:url(images/m1.gif) no-repeat left; width:182px; height:25px; line-height:25px; color:#4B6486; font-size:14px; font-weight:700;text-align:left; text-indent:19px;}
 .menutbg_2{background:url(images/m1.gif) no-repeat left; width:182px; height:25px; line-height:25px; color:#4B6486; font-size:14px; font-weight:700; text-align:left;text-indent:19px;}
.mbox{background:#73C2FF;height:auto;}
.mt1{font-size:14px;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;}
 .TxtList{height:200px; overflow-y:scroll; background:#fff;}
 .mt3{height:22px; line-height:22px; text-indent:33px; color:#333; font-size:12px; no-repeat 20px 5px;}
</style>
-->
</style>
</head>
<body>
 <div id="menu">
  <div id="menu1" class="menutbg_1 cursor" onclick="Switchmenu('1')">一级菜单A</div>
  <ul id="menu_1" class="submenu">
<table cellspacing="0" cellpadding="0" width="100%" border="0" class="mbox">
  <tr>
   <td class="mt1"><a onclick="javascript:ShowFLT(1)" href="javascript:void(null)" style="text-decoration:none; color:#333;"> 文管产品</a> </td>
  </tr>
  <tr id="LM1" style="DISPLAY: none">
   <td><div class="TxtList">
   <div class="mt3"><a href="#">123213</a></div>
      <div class="mt3"><a href="#">123213</a></div>
      <div class="mt3"><a href="#">123213</a></div>
      <div class="mt3"><a href="3">123213</a></div>
   </div></td>
  </tr>
  <tr>
   <td class="mt1"><a onclick="javascript:ShowFLT(2)" href="javascript:void(null)" style="text-decoration:none; color:#333;"> 桌面文具</a> </td>
  </tr>
  <tr id="LM2" style="DISPLAY: none">
   <td><div class="TxtList">
   <div class="mt3"><a href="#">123213</a></div>
      <div class="mt3"><a href="#">123213</a></div>
      <div class="mt3"><a href="3">123213</a></div>
</div></td>
  </tr>
  </table>
  </ul>
  <div id="menu2" class="menutbg_1 cursor" onclick="Switchmenu('2')">一级菜单B</div>
  <ul id="menu_2" class="submenu">
  <table cellspacing="0" cellpadding="0" width="100%" border="0" class="mbox">
  <tr>
   <td class="mt1"><a onclick="javascript:ShowFLT(3)" href="javascript:void(null)" style="text-decoration:none; color:#333;"> 文管产品</a> </td>
  </tr>
  <tr id="LM3" style="DISPLAY: none">
   <td><div class="TxtList">
<div class="mt3"><a href="#">123213</a></div>
      <div class="mt3"><a href="3">123213</a></div>
      <div class="mt3"><a href="3">123213</a></div>
      <div class="mt3"><a href="#">123213</a></div>
</div></td>
  </tr>
  <tr>
   <td class="mt1"><a onclick="javascript:ShowFLT(4)" href="javascript:void(null)" style="text-decoration:none; color:#333;"> 桌面文具</a> </td>
  </tr>
  <tr id="LM4" style="DISPLAY: none">
   <td><div class="TxtList">
<div class="mt3"><a href="#">123213</a></div>
      <div class="mt3"><a href="#">123213</a></div>
      <div class="mt3"><a href="#">123213</a></div>
      <div class="mt3"><a href="3">123213</a></div>
</div></td>
  </tr>
  </table>
  </ul>
  <div id="menu3" class="menutbg_1 cursor" onclick="Switchmenu('3')">一级菜单C</div>
  <ul id="menu_3" class="submenu">
       <table cellspacing="0" cellpadding="0" width="100%" border="0" class="mbox">
  <tr>
   <td class="mt1"><a onclick="javascript:ShowFLT(5)" href="javascript:void(null)" style="text-decoration:none; color:#333;"> 文管产品</a> </td>
  </tr>
  <tr id="LM5" style="DISPLAY: none">
   <td><div class="TxtList">
<div class="mt3"><a href="#">123213</a></div>
      <div class="mt3"><a href="#">123213</a></div>
      <div class="mt3"><a href="#">123213</a></div>
      <div class="mt3"><a href="3">123213</a></div>
</div></td>
  </tr>
  <tr>
   <td class="mt1"><a onclick="javascript:ShowFLT(6)" href="javascript:void(null)" style="text-decoration:none; color:#333;"> 桌面文具</a> </td>
  </tr>
  <tr id="LM6" style="DISPLAY: none">
   <td><div class="TxtList">
<div class="mt3"><a href="#">123213</a></div>
      <div class="mt3"><a href="#">123213</a></div>
      <div class="mt3"><a href="#">123213</a></div>
</div></td>
  </tr>
  </table>
  </ul>
 </div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

JS实现仿QQ效果的三级竖向菜单

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 #Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 #Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 #Javascript
10个很棒的jQuery代码片段
Sep 24 #Javascript
JS模拟实现Select效果代码
Sep 24 #Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 #Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 #Javascript
网页解析(1) 循环(3) translation(2) 查找算法(1) 装饰器(1) 读取(1) decorator(1) bs4(1) 分块(1) 二维数组(2)
You might like
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
php把数据表导出为Excel表的最简单、最快的方法（不用插件）
2014/05/10 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
js判断是否是手机页面
2017/03/17 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
用Python编程实现语音控制电脑
2014/04/01 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
Python cookbook（数据结构与算法）在字典中将键映射到多个值上的方法
2018/02/18 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
pytorch之添加BN的实现
2020/01/06 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
公务员转正鉴定材料
2014/02/11 职场文书
死亡证明书样本说明
2014/10/18 职场文书