JS模拟的QQ面板上的多级可展开的菜单

更新时间：2009年10月10日 00:29:23 作者：

JavaScript结合 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(/images/plus.gif)"; actuator.onclick = function() { var display = menu.style.display; this.parentNode.style.backgroundImage = (display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)"; 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="#">李四[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> </ul> </li> </ul> </li> </ul> </div> </body> </BODY> </HTML>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

爆炸式的JS圆形浮动菜单特效代码
爆炸式的JS圆形浮动菜单特效代码，点击主菜单后，子菜单会爆炸式展开，挺有意思的。
2010-03-03
javascript 三级下拉选择菜单Levels对象
javascript 三级下拉选择菜单Levels对象，非常的不错，大家可以参考下。
2009-07-07
js实现的非常棒的绿色下拉透明菜单
js实现的非常棒的绿色下拉透明菜单...
2007-03-03
CSS鼠标悬停菜单图片交换技术实现
这是一个使用了图片交换技术制作的CSS鼠标悬停菜单，也就是大家所说的鼠标经过换色，不过本例中的菜单并没有使用纯CSS来实现背景换色，这里将用一幅图片替换了背景色，因为主要是想让大家了解CSS对背景图片控制的技巧
2009-11-11
javascript实现的又一个不错的滑动导航效果
javascript实现的又一个不错的滑动导航效果...
2007-04-04
js仿淘宝的拼音检索特效代码
如果需要查询数据库,自己修改成ajax调用吧,效果会很好的.
2008-08-08
一个不错的动感导航菜单
一个不错的动感导航菜单...
2007-05-05
js右键菜单效果代码
js右键菜单效果代码...
2007-07-07
基于jquery的slideDown和slideUp做手风琴
slideDown和slideUp做手风琴菜单面板的代码，也就是大家常说的折叠/展开菜单，不少朋友都喜欢的风格，本代码兼容性好，简单易懂，便于修改，希望大家喜欢。
2011-02-02
javascript采用数组实现tab菜单切换效果
最近写了一个tab菜单,这个也算是web2.0的产物了,没什么技术含量,练练手而已.需要的朋友可以参考下
2012-12-12