97精品超碰一区二区三区,6699嫩草久久久精品影院

Maison

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

Télécharger maintenant Aper?u

<!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.

Clause de non-responsabilité

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

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...

Les transitions CSS3 fournissent-elles des événements pour détecter les points de début et de fin??

18 Nov 2024

Comprendre les événements de transition CSS3 Les transitions CSS3 permettent des animations fluides et des effets visuels sur les éléments Web. Pour valoriser l'utilisateur...

Pourquoi mon animation slide-up utilisant CSS3 @keyframes ne fonctionne-t-elle pas??

28 Oct 2024

Transition CSS3 - Effet de fondu sortantEn utilisant CSS3, vous pouvez facilement implémenter des effets de fondu pour améliorer l'expérience utilisateur. Cependant, si vous rencontrez...

Comment puis-je détecter le début et la fin des transitions CSS3??

31 Dec 2024

Détection des événements de transition CSS3 Les transitions dans CSS3 ajoutent des effets dynamiques aux éléments Web, améliorant ainsi leur réactivité. Pourtant, c'est souvent...

Comment puis-je créer des effets CSS3 dans Internet Explorer 7/8 ?

28 Oct 2024

émulation des effets CSS3 dans Internet Explorer 7/8De nombreux sites Web utilisent les capacités de CSS3 pour améliorer l'apparence des éléments à l'aide d'arrondis...

Comment émuler CSS3 Border-Radius et Box-Shadow dans IE7/8??

02 Nov 2024

émulation CSS3 Border-Radius et Box-Shadow dans IE7/8En l'absence de support CSS3 natif dans Internet Explorer 7 et 8, obtenir des effets tels que...

Comment pouvez-vous imiter les effets CSS3 dans les anciens navigateurs IE??

28 Oct 2024

émuler les merveilles des effets CSS3 dans les anciens navigateurs IE Alors que CSS3 apporte une pléthore d'effets élégants à la conception Web, les navigateurs existants comme...

Est-ce que ??transition?: all?? ralentit les transitions CSS3??

03 Dec 2024

Est-ce que ??Transition?:?Tout?? entrave la vitesse de transition CSS3?? L'utilisation de transitions CSS3 offre des effets animés aux éléments Web. Une pratique courante consiste à employer...

Comment puis-je créer du texte incurvé en utilisant CSS3, Canvas ou SVG ?

08 Dec 2024

Création de texte incurvé avec CSS3, Canvas ou SVGObtenir des effets de texte incurvés ou arqués à l'aide de CSS3 ou d'autres technologies Web est une conception courante...

See all articles