Heim > Artikel > Web-Frontend > JS CSS implementiert ein Baummenü ähnlich den QQ-Freunden und blacklist effects_javascript-Fähigkeiten

JS CSS implementiert ein Baummenü ähnlich den QQ-Freunden und blacklist effects_javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:38:231137Durchsuche

Das Beispiel in diesem Artikel beschreibt die JS-CSS-Implementierung eines Baummenüs mit ähnlichen Effekten wie QQ-Freunde und Blacklists. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Das heute vorgestellte Menü ist das Beste, aber einige der Symbole fehlen und die Pfade sind noch vorhanden. Freunde, die es wirklich verwenden möchten, können einfach zwei Klappmenüsymbole erstellen und sie entsprechend den Pfaden hochladen Es imitiert die Menüfunktion des QQ-Panels. Ich hätte nicht erwartet, dass es sich lohnt, sich anzumelden.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt:

<!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") &#63; "url()" : "url()";
  menu.style.display = (display == "block") &#63; "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>

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js implementiert Code_Javascript-Fähigkeiten mit unendlichem BaumnavigationslisteneffektNächster Artikel：js implementiert Code_Javascript-Fähigkeiten mit unendlichem Baumnavigationslisteneffekt

In Verbindung stehende Artikel

Mehr sehen