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 tips提示框组件实现代码
Nov 19 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 Javascript
解决vue scoped html样式无效的问题
Oct 24 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
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
php自动加载代码实例详解
2021/02/26 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
JS实现多选框的操作
2020/06/24 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
python构建指数平滑预测模型示例
2019/11/21 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
浅析python标准库中的glob
2020/03/13 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
区域总监的岗位职责
2013/11/21 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
Node.js实现断点续传
2021/06/23 Javascript
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL