localisation actuelle: Maison > Télécharger > Effets 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
Classer: Effets JS / Effets spéciaux CSS3 | Temps de libération: 2017-12-23 | visites: 28878 |
Télécharger: 73 |
Derniers téléchargements
Aquarium Fantastique
Filles en première ligne
Ailes d'étoiles
Petite Fée des Fleurs Paradis Féérique
Restaurant Histoire mignonne
Exploration de voyage à Shanhe
Amour et producteur
Le cerveau le plus puissant 3
Odd Dust : Damila
Jeune voyage vers l'Ouest 2
24 heuresClassement de lecture
- 1 Comment puis-je implémenter la troncature des points de suspension dans un élément de texte redimensionnable ?
- 2 diskmsg.dll – Qu'est-ce que diskmsg.dll ?
- 3 dialupmanager.dll – Qu'est-ce que dialupmanager.dll ?
- 4 diagrpt.dll – Qu'est-ce que diagrpt.dll ?
- 5 Pourquoi une transition CSS avec facilité d'entrée et de sortie se comporte-t-elle en douceur au survol mais brusquement à la sortie de la souris ?
- 6 dicrhash.dll – Qu'est-ce que dicrhash.dll ?
- 7 Comment injecter des dépendances dans des objets auto-instanciés au printemps ?
- 8 Pourquoi PHP fait-il écho à « 2 » lors de l'ajout et de la concaténation d'entiers ?
- 9 Pourquoi mon application Java utilise-t-elle GMT au lieu du fuseau horaire de mon système d'exploitation et comment puis-je y remédier ?
- 10 Comment envoyer un ping efficace aux URL HTTP en Java : un guide complet
- 11 Pourquoi mon `std::fstream` ne parvient-il pas à créer un fichier ?
- 12 Comment se lier aux classes CSS dans les vues XML UI5 à l'aide de l'attribut « class » ?
- 13 Pourquoi la récupération de panique avec des variables locales ne modifie-t-elle pas les valeurs renvoyées dans Go ?
- 14 digiconf.dll – Qu'est-ce que digiconf.dll ?
- 15 Comment puis-je générer des diagrammes UML à partir de mes classes PHP existantes ?
Derniers tutoriels
-
- Aller au langage pratique GraphQL
- 1920 2024-04-19
-
- Premiers pas avec MySQL (Professeur Mosh)
- 1749 2024-04-07
-
- Mock.js | Axios.js | Json | Dix jours de cours de qualité
- 2558 2024-03-29
<!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.