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

2024-09-05 12:20:27

字体：大中小

来源：转载

供稿：网友

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()";    actuator.onclick = function() {        var display = menu.style.display;        this.parentNode.style.backgroundImage =            (display == "block") ? "url(/images/plus.gif)" : "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">          我有朋友圈          <ul id="productsMenu" class="menu">            <li>              我的好友              <ul id="newPhonesMenu" class="submenu">                <li>张三[10000001]</li>                <li>李四[10000002]</li>                <li>李四[10000002]</li>              </ul>            </li>            <li>              陌生人              <ul id="compareMenu" class="submenu">                <li>张三[10000001]</li>                <li>李四[10000002]</li>              </ul>            </li>          </ul>        </li>      </ul>    </div>  </body></BODY></HTML>

上一篇：JS+CSS但分类动态选择及移动功能

下一篇：纯CSS+XHTML打造简约下拉菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注