Effets spéciaux JS
Effets spéciaux CSS3
Les sites Web des centres commerciaux CSS utilisent couramment le code du menu de navigation déroulant de la catégorie de gauche
Les sites Web des centres commerciaux CSS utilisent couramment le code du menu de navigation déroulant de la catégorie de gauche
Les sites Web des centres commerciaux CSS utilisent couramment le code du menu de navigation déroulant de la catégorie de gauche
<!doctype html>
<html lang="fr">
<tête>
<meta charset="UTF-8">
<title>
<style>
* { marge : 0 ; remplissage : 0 ; }
corps { marge : 0 ; remplissage : 0 ; décoration de texte : aucune ; taille de police : 14 px ; }
li { style de liste : aucun ; }
.menu {largeur : 1000px ; hauteur : 600 px ; marge : 30px automatique ; couleur d'arrière-plan : #ececec ; }
.menu .menuTop { couleur d'arrière-plan : #F10215 ; couleur : #fff ; largeur : 140 px ; hauteur : 40px ; remplissage à gauche : 20 px ; hauteur de ligne : 40 px ; curseur : pointeur ; }
.menu ul { largeur : 160 px ; couleur d'arrière-plan : #fff ; bordure : 2px solide #F10215 ; dimensionnement de la boîte : bordure-boîte ; position : relative ; }
.menu ul li { hauteur : 30 px ; remplissage à gauche : 8 px ; aligner le texte : gauche ; hauteur de ligne : 30 px ; taille de police : 13 px ; arrière-plan : url(image/1.png) droit de non-répétition ; indice z : 2 ; }
.menu ul li a { couleur : #7070770 ; }
.menu ul li a:hover { couleur : rouge ; décoration de texte : souligner ; curseur : pointeur ; }
.menu ul li:hover { border: 1px solid #DDD; bordure droite : 0 ; image d'arrière-plan : aucune ; }
.menu ul li:hover .submenu { display: block; }
.menu ul li:hover span {largeur : 30 px ; hauteur : 30px ; affichage : bloc en ligne ; couleur d'arrière-plan : #FFF ; Flotter à droite; indice z : 100 ; position : relative ; }
.menu ul li .submenu { position : absolue ; gauche : 146px ; haut : 0 ; largeur : 720 px ; hauteur : 300px ; bordure : 1px solide #DDD ; ombre de la boîte : 0 0 8px #DDD ; -moz-box-shadow : 0 0 8px #DDD ; -webkit-box-shadow : 0 0 8px #DDD ; couleur d'arrière-plan : #FFF ; indice z : 3 ; affichage : aucun ; }
.menu ul li .submenu .subleft { margin-left: 0px; largeur : 400 px ; hauteur : 300px ; flotteur : gauche ; remplissage : 5 px ; }
.menu ul li .submenu .subleft dl { débordement : caché ; bordure inférieure : 1px solide #D1D1D1 ; remplissage : 10px 0 ; }
.menu ul li .submenu .subleft dl dt { float: gauche; hauteur : 22px ; hauteur de ligne : 22 px ; marge droite : 10 px ; poids de la police : gras ; couleur : #707070 ; taille de police : 12 px ; curseur : pointeur ; }
.menu ul li .submenu .subleft dl dd { }
.menu ul li .submenu .subleft dl dd a { display: block; flotteur : gauche ; bordure gauche : 1px solide #707070 ; remplissage : 0 5px ; couleur : #707070 ; hauteur : 14px ; hauteur de ligne : 14 px ; marge : 3px 0 ; taille de police : 11 px ; }
.menu ul li .submenu .subright { largeur : 310 px ; hauteur : 300px ; couleur de fond : bleu ; flotteur : gauche ; }
</style>
</tête>
<body><script src="/demos/googlegg.js"></script>
<div class="menu">
<div class="menuTop">全部商品分类</div>
<ul>
<li> <a herf="javascript:;">Titre de premier niveau 1</a> <span></span>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Niveau 111</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> </dd>
</dl>
</div>
<div class="subright" style="background-color: antiquewhite"> </div>
</div>
</li>
<li> <a herf="javascript:;">Titre de premier niveau 2</a> <span></span>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 222</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre niveau 3 2</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:aigue-marine">;
</li>
<li> <a herf="javascript:;">Titre niveau 1 3</a>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 333</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau 3</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:cadetblue">;
</li>
<li> <a herf="javascript:;">Titre niveau 1 4</a>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 444</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau 4</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:darkgrey">;
</li>
<li> <a herf="javascript:;">Titre de premier niveau 5</a> <span></span>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 555</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre niveau 3 5</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:darkseagreen">;
</li>
<li> <a herf="javascript:;">Titre de premier niveau 6</a> <span></span>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 666</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau 6</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:lavande">;
</li>
<li> <a herf="javascript:;">Titre de premier niveau 7</a> <span></span>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 777</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau 7</a> </dd>
</dl>
</div>
<div class="subright">;
</li>
<li> <a herf="javascript:;">Titre de premier niveau 8</a> <span></span>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 888</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau 8</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:lightseagreen">;
</li>
<li> <a herf="javascript:;">Titre de premier niveau 9</a> <span></span>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 999</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre niveau 3 9</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:mistyrose">;
</li>
<li> <a herf="javascript:;">Titre de premier niveau 10</a>
<div class="sous-menu">
<div class="subleft">
<dl>
<dt>Titre de deuxième niveau 1010</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> <a href="javascript:;">Titre de niveau 3</a>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> </dd>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau< ;/a> </jj>
</dl>
<dl>
<dt>Titre de deuxième niveau</dt>
<dd> <a href="javascript:;">Titre de troisième niveau</a> <a href="javascript:;">Titre de troisième niveau</a> javascript:;">Titre de troisième niveau 10</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:saumon"> </div>
</li>
</ul>
</div>
<div style="text-align:center;margin:50px 0; police:normal 14px/24px 'MicroSoft YaHei';">
</div>
</corps>
</html>
Il s'agit d'un code relativement simple qui utilise les attributs de survol de la souris CSS pour créer un menu de navigation déroulant de catégorie de gauche couramment utilisé pour les sites Web des centres commerciaux.
Toutes les ressources de ce site proviennent d'internautes ou sont réimprimées par les principaux sites de téléchargement. Veuillez vérifier vous-même l'intégrité du logiciel ! Toutes les ressources de ce site sont uniquement à titre de référence d'apprentissage. Merci de ne pas les utiliser à des fins commerciales. Sinon, vous serez responsable de toutes les conséquences ! En cas d'infraction, veuillez nous contacter pour la supprimer. Coordonnées : admin@php.cn
Article connexe
Organisation d'effets spéciaux courants sur des pages Web : Avancé
23 Dec 2016
L'auteur a accumulé de nombreux effets spéciaux Web merveilleux et pratiques au fil du temps. Presque tous ces effets spéciaux sont des effets spéciaux de pages Web couramment utilisés. Je vais maintenant vous présenter ces effets spéciaux organisés et modifiés en trois niveaux. Chapitre avancé 1. différentes périodes
Organiser des effets spéciaux courants sur des pages Web : niveau élémentaire
23 Dec 2016
L'auteur a accumulé de nombreux effets spéciaux Web merveilleux et pratiques au fil du temps. Presque tous ces effets spéciaux sont des effets spéciaux de pages Web couramment utilisés. Je vais maintenant vous présenter ces effets spéciaux organisés et modifiés en trois niveaux. Niveau élémentaire 1. Laisse les mots continuer
Organiser des effets spéciaux courants sur des pages Web : niveau intermédiaire
23 Dec 2016
L'auteur a accumulé de nombreux effets spéciaux Web merveilleux et pratiques au fil du temps. Presque tous ces effets spéciaux sont des effets spéciaux de pages Web couramment utilisés. Je vais maintenant vous présenter ces effets spéciaux organisés et modifiés en trois niveaux. Niveau intermédiaire 1. compte à rebours des vacances
Une appréciation graphique et textuelle de 8 superbes effets spéciaux d'animation de texte HTML5
06 Mar 2017
Le texte est l’âme des pages Web. Il y a longtemps, quelqu’un a inventé de nombreuses belles polices informatiques, qui donnaient aux pages Web des styles différents. Avec l'émergence du HTML5 et du CSS3, nous pouvons personnaliser le texte. Dans certaines situations, lorsque cela est nécessaire, nous pouvons même utiliser HTML5 pour animer le texte. Cet article partage 8 très beaux effets spéciaux d'animation de texte HTML5, j'espère qu'il pourra être utilisé comme référence pour vous. 1. Animation de texte pliable et retourné 3D CSS3 Aujourd'hui, nous allons partager une application d'effets spéciaux de texte CSS3. Elle est similaire aux effets de texte HTML5/CSS3 partagés auparavant. Il s'agit également d'une animation de texte pliée et retournée 3D CSS3. .
Comment puis-je créer un effet de fondu à l'aide de transitions CSS3 ?
28 Oct 2024
Transitions CSS3 : obtention d'effets de fondu En CSS3, les transitions offrent un outil puissant pour créer des effets visuels dynamiques. Parmi ces effets, il y a...
Animation CSS3 (1) : 5 effets d'animation préchargés
17 Feb 2017
Animation CSS3 (1) : 5 effets d'animation préchargés
Un ensemble d'effets spéciaux d'animation de déformation d'icône de hamburger cool
19 Jan 2017
Hamburgers est une bibliothèque d'animation CSS3 d'effets spéciaux d'animation de déformation d'icône de hamburger super cool. Cet ensemble d'animations d'icônes de hamburger comprend 18 effets d'animation de déformation de hamburger différents. Vous pouvez également personnaliser votre propre animation de déformation d'icône de hamburger via des fichiers Sass.
effet d'invite de petite icône CSS3
20 Feb 2017
Cet article présente les effets d'invite de petites icônes CSS3
Utiliser les effets d'animation à chargement plat CSS3
13 Mar 2017
Cet article utilise les effets d'animation à chargement plat CSS3
Outils chauds Tags
Hot Tools
Le texte CSS est combiné dans un effet spécial d'animation en forme de cœur
Le texte CSS est combiné dans un effet spécial d'animation en forme de cœur
Effets spéciaux d'animation de fleurs d'expression CSS3 SVG
L'effet spécial d'animation de fleur de confession SS3 SVG est un effet spécial d'animation pour la Saint-Valentin.
jQuery+CSS3 Effet d'amour pour la Saint-Valentin
jQuery + CSS3 Valentine's Day Love Special Effect est un effet spécial d'animation de cœur oscillant suspendu pour la Saint-Valentin.
cuillère css3 ramassant des effets spéciaux d'animation de boulettes de riz gluant
Un bol d'expression mignonne de boulettes de riz gluant, une cuillère ramassant des effets spéciaux d'animation de boulettes de riz gluant
CSS pur pour dessiner Bingdundun et Xuerongrong
Un code manuscrit pur CSS pour dessiner la glace et la neige de manière réaliste.