JS+CSS实现类似QQ好友及黑名单效果的树型菜单


Posted in Javascript onSeptember 22, 2015

本文实例讲述了JS+CSS实现类似QQ好友及黑名单效果的树型菜单。分享给大家供大家参考。具体如下:

今天介绍的这个菜单堪称极品啊,不过里面的有些图标丢失了,路径还留在那,真想使用的朋友自己制作两个折叠菜单的图标按路径传上去就行了,这个菜单是模仿QQ面板的菜单功能,很多朋友还是很喜欢这种功能的,没想到用这么少的JS代码也可实现 ,值得代签哦。

运行效果截图如下:

JS+CSS实现类似QQ好友及黑名单效果的树型菜单

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>QQ好友/黑名单的树型菜单</TITLE>
</HEAD>
<BODY>
<script>
if (!document.getElementById)
 document.getElementById = function() { return null; }
function initializeMenu(menuId, actuatorId) {
 var menu = document.getElementById(menuId);
 var actuator = document.getElementById(actuatorId);
 if (menu == null || actuator == null) return;
 actuator.parentNode.style.backgroundImage = "url()";
 actuator.onclick = function() {
  var display = menu.style.display;
  this.parentNode.style.backgroundImage =
   (display == "block") ? "url()" : "url()";
  menu.style.display = (display == "block") ? "none" : "block";
  return false;
 }
}
 window.onload = function() {
   initializeMenu("productsMenu", "productsActuator");
   initializeMenu("newPhonesMenu", "newPhonesActuator");
   initializeMenu("compareMenu", "compareActuator");
  }
</script>
<style>
body {
 font-family: verdana, helvetica, arial, sans-serif;
}
#mainMenu {
 background-color: #EEE;
 border: 1px solid #CCC;
 color: #000;
 width: 203px;
}
#menuList {
 margin: 0px;
 padding: 10px 0px 10px 15px;
}
li.menubar {
 background: url() no-repeat 0em 0.3em;
 font-size: 12px;
 line-height: 1.5em;
 list-style: none outside;
}
.menu, .submenu {
 display: none;
 margin-left: 15px;
 padding: 0px;
}
.menu li, .submenu li {
 background: url() no-repeat 0em 0.3em;
 list-style: none outside;
}
a.actuator {
 background-color: transparent;
 color: #000;
 font-size: 12px;
 padding-left: 15px;
 text-decoration: none;
}
a.actuator:hover {
 text-decoration: underline;
}
.menu li a, .submenu li a {
 background-color: transparent;
 color: #000;
 font-size: 12px;
 padding-left: 15px;
 text-decoration: none;
}
.menu li a:hover, submenu li a:hover {
 text-decoration: underline;
}
span.key {
 text-decoration: underline;
}
</style>
</head>
<body>
<div id="mainMenu">
  <ul id="menuList">
  <li class="menubar">
   <a href="#" id="productsActuator" class="actuator">图秀地带收藏夹</a>
   <ul id="productsMenu" class="menu">
   <li>
    <a href="#" id="newPhonesActuator" class="actuator">我的好友</a>
    <ul id="newPhonesMenu" class="submenu">
    <li><a href="#">张三[10000001]</a></li>
    <li><a href="#">李四[10000002]</a></li>
    <li><a href="#">张三[10000001]</a></li>
    <li><a href="#">李四[10000002]</a></li>
    </ul>
   </li>
   <li>
    <a href="#" id="compareActuator" class="actuator">陌生人</a>
    <ul id="compareMenu" class="submenu">
    <li><a href="#">张三[10000001]</a></li>
    <li><a href="#">李四[10000002]</a></li>
    <li><a href="#">张三[10000001]</a></li>
    <li><a href="#">李四[10000002]</a></li>
    </ul>
   </li>
   </ul>
  </li>
  </ul>
 </div>
 </body>
</BODY>
</HTML>

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

Javascript 相关文章推荐
Javascript浅谈之this
Dec 17 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
JS实现商品筛选功能
Aug 19 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 #Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 #Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 #Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 #Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 #Javascript
Java Mybatis框架入门基础教程
Sep 21 #Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 #Javascript
You might like
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
Javascript的一种模块模式
2008/03/22 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
vue实现购物车小案例
2019/09/27 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
python根据路径导入模块的方法
2014/09/30 Python
python实现挑选出来100以内的质数
2015/03/24 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
详解python破解zip文件密码的方法
2020/01/13 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
python反扒机制的5种解决方法
2021/02/06 Python
Java面试题及答案
2012/09/08 面试题
机械电子工程毕业生自荐信
2013/11/23 职场文书
培训心得体会
2013/12/29 职场文书
2014年自我评价
2014/01/04 职场文书
高二学生评语大全
2014/04/25 职场文书
丧事主持词
2015/07/02 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
TensorFlow的自动求导原理分析
2021/05/26 Python