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 相关文章推荐
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
原生JS轮播图插件
Feb 09 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
原生js实现轮播图特效
May 04 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 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计算两个路径的相对路径
2013/06/14 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
pytorch 修改预训练model实例
2020/01/18 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
解释一下Windows的消息机制
2014/01/30 面试题
JAVA高级程序员面试题
2013/09/06 面试题
医院反腐倡廉演讲稿
2014/09/16 职场文书
同学会邀请函模板
2015/01/30 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
Python中使用ipython的详细教程
2021/06/22 Python