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 面向对象全新理练之数据的封装
Dec 03 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
ES6的新特性概览
Mar 10 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
JavaScript 异步调用
Oct 25 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
微信支付如何实现内置浏览器的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中global和$GLOBALS[]的分析之一
2012/02/02 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
php可变长参数处理函数详解
2017/02/22 PHP
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
Python补齐字符串长度的实例
2018/11/15 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
颁奖典礼主持词
2014/03/25 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
标准发言稿结尾
2019/07/18 职场文书