首页
所有分类
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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
js 走马灯简单实例
Nov 21 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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
openGauss(1) pdf(1) Eclipse(1) 变量提升(1) 弹窗(1) 太阳码(1) JDBC(3) ant design(2) 延时任务(1) cypress(1)
You might like
PHP：风雨欲来 路在何方?
2006/10/09 PHP
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
微信小程序 侧滑删除（左滑删除）
2017/05/23 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Django ModelForm操作及验证方式
2020/03/30 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
Python通过文本和图片生成词云图
2020/05/21 Python
为什么会有内存对齐
2016/10/10 面试题
精彩的大学生自我评价
2013/11/17 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
平面设计专业求职信
2014/08/09 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
大学生党员暑假实践（活动总结）
2019/08/21 职场文书
关于食品安全的演讲稿范文（三篇）
2019/10/21 职场文书
Mysql数据库命令大全
2021/05/26 MySQL