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 相关文章推荐
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
js类的静态属性和实例属性的理解
Oct 01 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
Javascript的this用法
Jan 16 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
用JS实现选项卡
Mar 23 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
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
wxPython框架类和面板类的使用实例
2014/09/28 Python
python使用htmllib分析网页内容的方法
2015/05/08 Python
Python删除空文件和空文件夹的方法
2015/07/14 Python
详解Django框架中的视图级缓存
2015/07/23 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
通过实例解析python and和or使用方法
2020/11/14 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
网站客服岗位职责
2014/04/05 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
六查六看心得体会
2014/10/14 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python
Windows7下FTP搭建图文教程
2022/08/05 Servers