JS-Spezialeffekte
CSS3-Spezialeffekte
CSS-Websites für Einkaufszentren verwenden häufig den Code für das Dropdown-Navigationsmenü der linken Kategorie
CSS-Websites für Einkaufszentren verwenden häufig den Code für das Dropdown-Navigationsmenü der linken Kategorie
CSS-Websites für Einkaufszentren verwenden häufig den Code für das Dropdown-Navigationsmenü der linken Kategorie
<!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>商城网站常用左侧分类下拉导航菜单代码</title>
<Stil>
* { Rand: 0; Polsterung: 0; }
Körper { Rand: 0; Polsterung: 0; Textdekoration: keine; Schriftgröße: 14px; }
li { Listenstil: keine; }
.menu { Breite: 1000px; Höhe: 600px; Rand: 30 Pixel automatisch; Hintergrundfarbe: #ececec; }
.menu .menuTop { Hintergrundfarbe: #F10215; Farbe: #fff; Breite: 140px; Höhe: 40px; padding-left: 20px; Zeilenhöhe: 40px; Cursor: Zeiger; }
.menu ul { width: 160px; Hintergrundfarbe: #fff; Rand: 2px einfarbig #F10215; Boxgröße: border-box; Position: relativ; }
.menu ul li { height: 30px; Polsterung links: 8px; Textausrichtung: links; Zeilenhöhe: 30px; Schriftgröße: 13px; Hintergrund: URL(image/1.png) no-repeat right; Z-Index: 2; }
.menu ul li a { color: #7070770; }
.menu ul li a:hover { color: red; Textdekoration: unterstrichen; Cursor: Zeiger; }
.menu ul li:hover { border: 1px solid #DDD; Rand-rechts: 0; Hintergrundbild: keines; }
.menu ul li:hover .submenu { display: block; }
.menu ul li:hover span { width: 30px; Höhe: 30px; Anzeige: Inline-Block; Hintergrundfarbe: #FFF; schweben: rechts; Z-Index: 100; Position: relativ; }
.menu ul li .submenu { position: absolute; links: 146px; oben: 0; Breite: 720px; Höhe: 300px; Rand: 1 Pixel fest #DDD; box-shadow: 0 0 8px #DDD; -moz-box-shadow: 0 0 8px #DDD; -webkit-box-shadow: 0 0 8px #DDD; Hintergrundfarbe: #FFF; Z-Index: 3; Anzeige: keine; }
.menu ul li .submenu .subleft { margin-left: 0px; Breite: 400px; Höhe: 300px; schweben: links; Polsterung: 5px; }
.menu ul li .submenu .subleft dl { Überlauf: versteckt; border-bottom: 1px solid #D1D1D1; Polsterung: 10px 0; }
.menu ul li .submenu .subleft dl dt { float: left; Höhe: 22px; Zeilenhöhe: 22px; Rand rechts: 10px; Schriftstärke: fett; Farbe: #707070; Schriftgröße: 12px; Cursor: Zeiger; }
.menu ul li .submenu .subleft dl dd { }
.menu ul li .submenu .subleft dl dd a { display: block; schweben: links; Rand links: 1 Pixel durchgehend #707070; Polsterung: 0 5px; Farbe: #707070; Höhe: 14px; Zeilenhöhe: 14px; Rand: 3px 0; Schriftgröße: 11px; }
.menu ul li .submenu .subright { width: 310px; Höhe: 300px; Hintergrundfarbe: blau; schweben: links; }
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="menu">
<div class="menuTop">全部商品分类</div>
<ul>
<li> <a herf="javascript:;">Titel der ersten Ebene</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Stufe 111</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> </dd>
</dl>
</div>
<div class="subright" style="hintergrundfarbe: antikweiß">/div>
</div>
</li>
<li> <a herf="javascript:;">Titel der ersten Ebene 2</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 222</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Level 3 Titel 2</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:aquamarine">;
</li>
<li> <a herf="javascript:;">Level 1 Titel 3</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 333</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Level 3 Titel 3</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:cadetblue">;
</li>
<li> <a herf="javascript:;">Titel der ersten Ebene 4</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 444</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Level 3 Titel 4</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:darkgrey">;
</li>
<li> <a herf="javascript:;">Level 1 Titel 5</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 555</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Level 3 Titel 5</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:darkseagreen">;
</li>
<li> <a herf="javascript:;">Titel der ersten Ebene 6</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 666</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Überschrift der dritten Ebene 6</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:lavender">;
</li>
<li> <a herf="javascript:;">Titel der ersten Ebene 7</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 777</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Überschrift der dritten Ebene 7</a> </dd>
</dl>
</div>
<div class="subright"> </div>;
</li>
<li> <a herf="javascript:;">Titel der ersten Ebene 8</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 888</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Level 3 Titel 8</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:lightseagreen">;
</li>
<li> <a herf="javascript:;">Titel der ersten Ebene 9</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 999</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Level 3 Titel 9</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:mistyrose">;
</li>
<li> <a herf="javascript:;">Titel der ersten Ebene 10</a>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 1010</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Level 3 Titel 10</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:salmon"> </div>
</li>
</ul>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
Dies ist ein relativ einfacher Code, der das CSS-Maus-Hover-Attribut verwendet, um ein häufig verwendetes Dropdown-Navigationsmenü für Kategorien auf der linken Seite für Websites von Einkaufszentren zu erstellen.
Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von großen Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrität der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Verstoß vorliegt, kontaktieren Sie uns bitte, um ihn zu löschen. Kontaktinformationen: admin@php.cn
Verwandter Artikel
Implementierung von visuellen CSS3-Effekten
22 Mar 2018
Dieses Mal werde ich Ihnen die Implementierung visueller CSS3-Spezialeffekte vorstellen. Was sind die Vorsichtsmaßnahmen für die Realisierung visueller CSS3-Spezialeffekte? Das Folgende ist ein praktischer Fall.
14 Mar 2018
Dieses Mal zeige ich Ihnen, wie Sie mit CSS3 dreidimensionale 3D-Spezialeffekte erzielen. Was sind die Vorsichtsmaßnahmen für die Verwendung von CSS3, um dreidimensionale 3D-Spezialeffekte zu erzielen? Das Folgende ist ein praktischer Fall.
Wie Sie CSS3-Spezialeffekte geschickt einsetzen, um das Benutzererlebnis von Webseiten zu verbessern
09 Sep 2023
Wie man CSS3-Spezialeffekte geschickt einsetzt, um das Benutzererlebnis von Webseiten zu verbessern. Mit der Entwicklung des Internets sind Webdesign und Benutzererfahrung zu wichtigen Verknüpfungen bei der Website-Entwicklung geworden. Die Anwendung von CSS3-Spezialeffekten kann Webseiten Dynamik und visuelle Effekte verleihen und das Benutzererlebnis verbessern. In diesem Artikel werden mehrere gängige CSS3-Spezialeffekte und ihre Codebeispiele vorgestellt, um Entwicklern dabei zu helfen, die Verwendung von CSS3-Spezialeffekten besser zu beherrschen und die Benutzererfahrung von Webseiten zu verbessern. Übergangseffekt (Übergang) Der Übergangseffekt ist einer der grundlegendsten Spezialeffekte in CSS3 durch Ändern eines bestimmten Attributs
09 Oct 2016
Verschiedene Spezialeffekte des Filters in CSS3
CSS3 lässt sich nicht öffnen
29 May 2023
Mit der rasanten Entwicklung der Internettechnologie beginnen immer mehr Websites, CSS3 zum Erstellen von Webseitenstilen zu verwenden. Im Vergleich dazu bietet CSS3 mehr Flexibilität und Kreativität beim Entwerfen von Webseiten und kann die Bedürfnisse der Benutzer besser erfüllen. Bei der Verwendung von CSS3 für Webdesign stoßen wir jedoch häufig auf ein Problem: CSS3-Spezialeffekte dehnen die Webseite aus. Dieses Problem tritt hauptsächlich auf, wenn die Webseite mehrere Elemente enthält. Einige Spezialeffekte können dazu führen, dass der Seiteninhalt die ursprünglichen Grenzen überschreitet, wodurch das Seitenlayout gestört wird. Als nächstes besprechen wir, wie das geht
![Zehn coole Weihnachtscodeeffekte für Programmierer [Kostenloser Download]](https://img.php.cn/upload/article/000/000/020/5fe29c923b2df538.png)
Zehn coole Weihnachtscodeeffekte für Programmierer [Kostenloser Download]
23 Dec 2020
Dang Dang Dang~ Die neuesten coolen und wunderschönen Spezialeffekte für Weihnachtsanimationen sind da! Einschließlich in HTML5, CSS3, JQuery und anderen Sprachen implementierter Spezialeffekte, die einfach und schön sind. Sie können auf den Link im Text klicken, um eine Vorschau der Animationen anzuzeigen
Erfahren Sie mehr über die Fortschrittsbalkenkomponente in Bootstrap
23 Feb 2021
Auf Webseiten sind die Auswirkungen von Fortschrittsbalken keine Seltenheit, wie zum Beispiel: Halbierungssystem, Ladestatus usw. Die Fortschrittsbalkenkomponente verwendet die Übergangs- und Animationsattribute von CSS3, um einige Spezialeffekte zu vervollständigen. Diese Spezialeffekte sind in IE9 verfügbar unten stehende Versionen und ältere Versionen von Firefox.
Wie verwende ich CSS, um das Bild zu drehen und verschiedene Effekte anzuzeigen, wenn die Maus über das Bild fährt?
09 Aug 2018
Dies ist definitiv untrennbar mit der leistungsstarken CSS3-Funktion verbunden. Es können nicht nur CSS3-Bilder gedreht werden, sondern auch Spezialeffekte wie CSS-Rotationsverstärkung, CSS-Rotation um 90 Grad und CSS-Bildrotation um 45 Grad erzielt werden.
Beispiel-Tutorial zum Ein- und Ausblenden von Divs mit CSS3
24 May 2017
Es gibt viele Möglichkeiten, die Spezialeffekte eines Div anzuzeigen und auszublenden. Im Folgenden finden Sie eine Einführung, wie Sie dies mit reinem CSS3 erreichen können.
Hot Tools
CSS-Text wird zu einem herzförmigen Animationsspezialeffekt kombiniert
CSS-Text wird zu einem herzförmigen Animationsspezialeffekt kombiniert
CSS3 SVG-Ausdruck, Blumenanimation, Spezialeffekte
Der SS3 SVG-Spezialeffekt „Geständnisblumen-Animation“ ist ein Spezialeffekt für die Valentinstag-Animation.
jQuery+CSS3 Valentinstag-Liebeseffekt
jQuery+CSS3 Der Valentinstag-Liebesspezialeffekt ist ein hängender, schwingender Herzanimations-Spezialeffekt zum Valentinstag.
CSS3-Löffel schöpft klebrige Reisbällchen mit Spezialeffekten
Eine Schüssel mit süßem Klebreisbällchen-Ausdruck, ein Löffel, der eine Klebreisbällchen-Animation mit Spezialeffekten aufnimmt
Reines CSS zum Zeichnen von Bingdundun und Xuerongrong
Ein handgeschriebener reiner CSS-Code zum Zeichnen von realistischem Eis und Schnee.