JS CSS implementiert ein Baummenü ähnlich den QQ-Freunden und blacklist effects_javascript-Fähigkeiten-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:38 PM

css js

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>

Nach dem Login kopieren

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

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wie lange dauert es, um Split Fiction zu schlagen?

1 Monate vor By DDD

R.E.P.O. Beste grafische Einstellungen

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

1 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7405

Java-Tutorial

1630

CakePHP-Tutorial

1358

Laravel-Tutorial

1268

PHP-Tutorial

1218

Related knowledge

Bedarf die Produktion von H5 -Seiten eine kontinuierliche Wartung? Apr 05, 2025 pm 11:27 PM

Die H5 -Seite muss aufgrund von Faktoren wie Code -Schwachstellen, Browserkompatibilität, Leistungsoptimierung, Sicherheitsaktualisierungen und Verbesserungen der Benutzererfahrung kontinuierlich aufrechterhalten werden. Zu den effektiven Wartungsmethoden gehören das Erstellen eines vollständigen Testsystems, die Verwendung von Versionstools für Versionskontrolle, die regelmäßige Überwachung der Seitenleistung, das Sammeln von Benutzern und die Formulierung von Wartungsplänen.

Wie man mit H5 Fortschrittsbalken macht Apr 06, 2025 pm 12:09 PM

Erstellen Sie eine Fortschrittsleiste mit HTML5 oder CSS: Erstellen Sie einen Fortschrittsbalkenbehälter. Stellen Sie die Fortschrittsbalkenbreite ein. Erstellen Sie interne Elemente der Fortschrittsleiste. Legt die interne Elementbreite der Fortschrittsleiste fest. Verwenden Sie JavaScript, CSS oder Fortschrittsbalkenbibliothek, um den Fortschritt anzuzeigen.

Welche Anwendungsszenarien eignen sich für die H5 -Seitenproduktion Apr 05, 2025 pm 11:36 PM

H5 (HTML5) eignet sich für leichte Anwendungen wie Marketingkampagnen, Produktdisplayseiten und Micro-Websites für Unternehmenswerbung. Seine Vorteile liegen in plattformartigen und reichhaltigen Interaktivität, aber seine Einschränkungen liegen in komplexen Interaktionen und Animationen, lokalen Ressourcenzugriff und Offline-Funktionen.

So führen Sie das H5 -Projekt aus Apr 06, 2025 pm 12:21 PM

Ausführen des H5 -Projekts erfordert die folgenden Schritte: Installation der erforderlichen Tools wie Webserver, Node.js, Entwicklungstools usw. Erstellen Sie eine Entwicklungsumgebung, erstellen Sie Projektordner, initialisieren Sie Projekte und schreiben Sie Code. Starten Sie den Entwicklungsserver und führen Sie den Befehl mit der Befehlszeile aus. Vorschau des Projekts in Ihrem Browser und geben Sie die Entwicklungsserver -URL ein. Veröffentlichen Sie Projekte, optimieren Sie Code, stellen Sie Projekte bereit und richten Sie die Webserverkonfiguration ein.

Ist die H5-Seitenproduktion eine Front-End-Entwicklung? Apr 05, 2025 pm 11:42 PM

Ja, die H5-Seitenproduktion ist eine wichtige Implementierungsmethode für die Front-End-Entwicklung, die Kerntechnologien wie HTML, CSS und JavaScript umfasst. Entwickler bauen dynamische und leistungsstarke H5 -Seiten auf, indem sie diese Technologien geschickt kombinieren, z. B. die Verwendung der & lt; canvas & gt; Tag, um Grafiken zu zeichnen oder JavaScript zu verwenden, um das Interaktionsverhalten zu steuern.

So lösen Sie das H5 -Kompatibilitätsproblem Apr 06, 2025 pm 12:36 PM

Zu den Lösungen für H5 -Kompatibilitätsprobleme gehören: Verwenden von Responsive Design, mit dem Webseiten Layouts entsprechend der Bildschirmgröße anpassen können. Verwenden Sie Cross-Browser-Test-Tools, um die Kompatibilität vor der Freigabe zu testen. Verwenden Sie Polyfill, um neue APIs für ältere Browser zu unterstützen. Befolgen Sie die Webstandards und verwenden Sie effektive Code und Best Practices. Verwenden Sie CSS -Präprozessoren, um den CSS -Code zu vereinfachen und die Lesbarkeit zu verbessern. Optimieren Sie die Bilder, reduzieren Sie die Größe der Webseiten und beschleunigen Sie das Laden. Aktivieren Sie HTTPS, um die Sicherheit der Website zu gewährleisten.

So erstellen Sie H5 -Klicksymbol Apr 06, 2025 pm 12:15 PM

Zu den Schritten zum Erstellen eines H5 -Klicksymbols gehören: Vorbereitung eines quadratischen Quellenbildes in der Bildbearbeitungssoftware. Fügen Sie die Interaktivität in den H5 -Editor hinzu und legen Sie das Klickereignis fest. Erstellen Sie einen Hotspot, der das gesamte Symbol abdeckt. Stellen Sie die Aktion von Klickereignissen fest, z. B. zum Springen zur Seite oder zum Auslösen von Animationen. Exportieren Sie H5 als HTML-, CSS- und JavaScript -Dateien. Stellen Sie die exportierten Dateien auf einer Website oder einer anderen Plattform ein.

So setzen Sie die H5 -Tabellenrandgrenze Apr 06, 2025 pm 12:18 PM

Setzen Sie in HTML die H5-Tabellengrenzen durch CSS: Führen Sie ein CSS-Stilblatt ein, stylen Sie den Rand mit den Randattributen (einschließlich der Unterpropertien von Grenzbreiten, Grenzstilen und Grenzfarben) und wenden Sie den Stil auf die Tischelemente an. Darüber hinaus können bestimmte Grenzstile festgelegt werden, z.

See all articles