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程序设计有所帮助。

Javascript 相关文章推荐
javascript闭包的理解和实例
Aug 12 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
javascript this详细介绍
Sep 19 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
OpenLayers加载缩放控件使用方法详解
Sep 25 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
You might like
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
非常实用的php验证码类
2016/05/15 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
Python实现多行注释的另类方法
2014/08/22 Python
python如何查看系统网络流量的信息
2016/09/12 Python
python机器学习之神经网络(二)
2017/12/20 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
餐饮加盟计划书
2014/01/10 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
离婚上诉状范文
2015/05/23 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python