脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS+CSS实现类似QQ好友及黑名单效果的树型菜单

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

 更新时间：2015年09月22日 10:23:48   作者：企鹅  
这篇文章主要介绍了JS+CSS实现类似QQ好友及黑名单效果的树型菜单,涉及JavaScript结合鼠标事件针对页面元素CSS样式的动态操作技巧,非常简单实用,需要的朋友可以参考下

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-qq-hy-hmd-style-menu-codes/

具体代码如下：

<!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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 微信小程序之左右布局的实现代码

    微信小程序之左右布局的实现代码

    这篇文章主要介绍了微信小程序之左右布局的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 深入浅析JS的数组遍历方法(推荐)

    深入浅析JS的数组遍历方法(推荐)

    这篇文章主要介绍了深入浅析JS的数组遍历方法(推荐)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • JS中的算法与数据结构之队列(Queue)实例详解

    JS中的算法与数据结构之队列(Queue)实例详解

    这篇文章主要介绍了JS中的算法与数据结构之队列(Queue),结合实例形式详细分析了javascript中队列的概念、原理、定义及常见操作技巧,需要的朋友可以参考下
    2019-08-08
  • JavaScript通过元素的ID和name设置样式

    JavaScript通过元素的ID和name设置样式

    这篇文章主要介绍了JavaScript通过元素的ID和name设置其样式，下面有个不错的示例，感兴趣的朋友可以测试下
    2014-07-07
  • 微信小程序多文件上传 Tdesign及导入失败问题

    微信小程序多文件上传 Tdesign及导入失败问题

    小程序文件上传还是有点麻烦的,其实主要还是小程序对的接口有诸多的不便,比如说,文件不能批量提交,只能一个个的提交,小程序的上传需要专门的接口,这篇文章主要介绍了微信小程序多文件上传 Tdesign及导入失败问题,需要的朋友可以参考下
    2023-11-11
  • Boostrap入门准备之border box

    Boostrap入门准备之border box

    之前在学习Bootstrap的过程中，遇到各种奇葩的坑，如果在学习bootstrap之前，准备工作先做好，就可以或多或少的避开一些坑。下面小编开始给大家介绍border-box这个属性的知识。感兴趣的朋友一起学习吧
    2016-05-05
  • JavaScript实现鼠标点击后层展开效果的方法

    JavaScript实现鼠标点击后层展开效果的方法

    这篇文章主要介绍了JavaScript实现鼠标点击后层展开效果的方法,可实现点击文字缓慢展开层的效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-05-05
  • 10个很少使用的JavaScript Console方法分享

    10个很少使用的JavaScript Console方法分享

    你一定听说过 console.log() ,而且可能一直在使用它,在本文中,我们将探讨一些最有用的控制台方法,以及它们在数据可视化、调试等方面的用途,感兴趣的小伙伴可以学习一下
    2023-09-09
  • JavaScript仿微博输入框效果(案例分析)

    JavaScript仿微博输入框效果(案例分析)

    这篇文章给大家分享一个小的JavaScript的案例，就是模仿微博输入框的效果，非常不错，对微博输入框效果感兴趣的朋友通过本文学习吧
    2016-12-12
  • JavaScript设计模式之职责链模式应用示例

    JavaScript设计模式之职责链模式应用示例

    这篇文章主要介绍了JavaScript设计模式之职责链模式,结合实例形式分析了javascript责任链模式的概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-08-08

最新评论