JS+CSS类似QQ好友/黑名单的树型菜单

2024-09-05 12:20:37

字体：大中小

来源：转载

供稿：网友

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>QQ好友/黑名单的树型菜单-www.vevb.com </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">          图秀地带收藏夹          <ul id="productsMenu" class="menu">            <li>              我的好友              <ul id="newPhonesMenu" class="submenu">                <li>张三[10000001]</li>                <li>李四[10000002]</li>                <li>张三[10000001]</li>                <li>李四[10000002]</li>              </ul>            </li>            <li>              陌生人              <ul id="compareMenu" class="submenu">                <li>张三[10000001]</li>                <li>李四[10000002]</li>                <li>张三[10000001]</li>                <li>李四[10000002]</li>              </ul>            </li>          </ul>        </li>      </ul>    </div>  </body></BODY></HTML>

上一篇：纯CSS两级下拉菜单

下一篇：JavaScript 递增、递减运算符实例