Статьи

Menu déroulant Pure CSS / HTML

  1. Menu déroulant Pure CSS / HTML Dans ce tutoriel, nous allons créer un menu horizontal classique sur...
  2. Nous animons le menu horizontal en pointant.
  3. Décrire le menu déroulant CSS / HTML

Menu déroulant Pure CSS / HTML

Dans ce tutoriel, nous allons créer un menu horizontal classique sur du CSS pur. Il y a des icônes dans les listes. Lorsque vous pointez sur un élément, la couleur du bouton et du texte change en douceur, une ombre est ajoutée. Les listes déroulantes peuvent être multi-niveaux et l’essentiel est tout simplement implémenté sur du CSS3 pur.

La suite de cette leçon ici - partie 2 MOBILE VERSION menu horizontal ".

Voir le stylo POyzbW par Denis ( @ Dwstroy ) sur Codepen .

Dans la leçon, utilisez:

  • affichage: flex;
  • utiliser la transition;
  • positionner les éléments avec la position.

Structure du menu horizontal HTML

Commencez par écrire le balisage sous le menu horizontal. Nous ouvrons notre environnement de développement dans mon cas, c'est PhpStorm, créons un fichier index.html, prescrivons le cadre html: 5, remplaçons lang par ru.

Toutes les méta seront supprimées à l'exception de l'encodage, je vais enregistrer mon titre « Menu Tom ».

Entre le corps, nous écrivons la balise d’entête, et il contient un bloc avec la classe .dws-menu qui contiendra notre menu. Ensuite, la structure sera la suivante, nous allons créer des listes à raison de cinq pièces. Dans chaque liste, il y aura un lien avec l'attribut href = "#". Ensuite, je passerai à l’icône de la classe .fa .fa-

<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ header>

Nous pressons pour appliquer.

Écrivons le nom des éléments de menu ( Accueil, Produits, Services, Actualités, Contacts ).

Ensuite, sélectionnez et connectez les icônes. Allez sur le site, nous allons sélectionner les icônes pour ces éléments de menu:

<i class = "fa fa home "> </ i> <i class = "fa fa shopping- cart "> </ i> <i class = "fa fa-cogs"> </ i> <i class = "fa fa -th-list "> </ i> <i class = "fa fa -enveloppe-ouverte "> </ i>

<i class = fa fa home > </ i> <i class = fa fa shopping- cart > </ i> <i class = fa fa-cogs> </ i> <i class = fa fa -th-list > </ i> <i class = fa fa -enveloppe-ouverte > </ i>

Téléchargez l'archive du site avec des icônes, extrayez son contenu sur votre ordinateur, copiez le dossier des polices et le dossier css dans votre environnement de développement.

Le dossier Polices contient des polices à icônes et le dossier CSS contient leurs styles. Les styles compressés peuvent être supprimés font-awesome.min, nous connectons le fichier non compressé font-awesome.css.

Dans index.html, nous connectons des icônes, et nous enregistrons chaque article avec son propre style d’icône ( maison , panier , rouages , liste , ouverture de l’enveloppe ).

Nous avons créé le cadre principal, créé un sous-menu après la description du style principal. Nous allons maintenant créer un fichier dans lequel nous allons décrire les principaux styles du menu horizontal style.css et le connecter à index.html. Pour vérifier que les styles sont bien connectés, créez un dossier img dans lequel je placerai une image arbitraire sur l’arrière-plan. Écrivons la connexion d'image en utilisant l'arrière-plan.

body {background-image: url ("../ img / ep_naturalwhite.png"); }

Comme nous le voyons, tout a été affiché et nous passerons ensuite à la description des styles.

Tout d’abord, réinitialisons tous les retraits que différents navigateurs peuvent définir par défaut:

.dws-menu * {margin: 0; rembourrage: 0; }

Définissez l'en-tête sur 200 pics. et attribuez ce que vous pouvez télécharger et vous connecter séparément à vous-même sur le site, au cas où, écrivez des polices supplémentaires.

en-tête {margin: 200px; famille de fontes: Cuprum, Arial, Helvetica, sans serif; }

Masquer les marqueurs dans les listes:

.dws-menu ul, .dws-menu ol {style de liste: aucun; }

Les listes seront affichées horizontalement avec display: lin, et nous le ferons au centre:

.dws-menu> ul {display: flex; justifier-contenu: centre; }

Dans l'en-tête, nous n'indenterons que le haut, nous écrirons une marge supérieure.

en-tête { margin-top: 200px; famille de fontes: Cuprum, Arial, Helvetica, sans serif; }

Concevons notre menu, définissons la couleur des boutons, la police, etc.

Sélectionnez les liens nav> ul li et faites-en des éléments de bloc. Définissez l’arrière-plan du menu, écrivez des retraits, indiquez la taille, la couleur, supprimez le trait de soulignement et créez les en-têtes en majuscules.

.dws-menu> ul li a {display: block; fond: #ececed; remplissage: 15px 30px 15px 40px; taille de police: 14px; couleur: # 454547; texte-décoration: aucun; text-transform: majuscule; }

Puis positionnez les icônes, affectez les listes à la position: relative; pour un alignement ultérieur des icônes:

.dws-menu> ul li {position: relative; }

Ensuite, nous sélectionnons des icônes, les positionnons absolument, faisons une indentation d’en haut à 15 pics, à partir des 12 pics de gauche, augmentons la taille à 18 pics.

.dws-menu> ul li> a i.fa {position: absolute; en haut: 15px; à gauche: 12px; taille de police: 18px; }

Attribuez le séparateur sous forme de bordure aux listes, sélectionnez le premier élément LI, définissez la bordure. Nous sélectionnons le dernier élément LI et lui attribuons une bordure similaire.

.dws-menu> ul li: premier-enfant {bordure-gauche: 1px solide # b2b3b5; } .dws-menu> ul li: dernier-enfant {border-right: 1px solid #babbbd; }

Créer des délimiteurs pour les listes LI:

.dws-menu> ul li {position: relative; border-right: 1px solide # c7c8ca; }

Le menu a acquis son apparence, vous pouvez alors procéder à la description des styles pendant le survol.

Nous animons le menu horizontal en pointant.

Sélectionnez des liens et attribuez une couleur au bloc, puis affectez la couleur du lien lui-même avec l'icône au blanc. Ajoutons une autre ombre noire. Avec l'aide de la transition en 0.3 secondes, nous allons faire une apparence lisse:

.dws-menu li a: survol {background: # 454547; couleur: #ffffff; box-shadow: 1px 5px 10px -5px noir; transition: toutes les 0.3s sont faciles; }

Et pour que cet effet disparaisse progressivement, ajoutez ce style au lien à l'aise:

.dws-menu> ul li a {display: block; fond: #ececed; remplissage: 15px 30px 15px 40px; taille de police: 14px; couleur: # 454547; texte-décoration: aucun; text-transform: majuscule; transition: toutes les 0.3s sont faciles; }

Le menu principal est terminé et vous pouvez passer à la description du sous-menu et des sous-menus qui y sont intégrés.

Décrire le menu déroulant CSS / HTML

À propos, nous ouvrons index.html et ajoutons, par exemple, un menu supplémentaire aux produits. Insérez l'UL entre les listes LI et placez-y cinq listes contenant des liens avec l'attribut herf = ”#”.

ul> li * 5> a [href = "#"]

Nous pressons pour appliquer, écrivez le nom des articles ( Vêtements, Electronique, Alimentation, Outils, Vie. Chimie ).

<ul> <li> <a href="#"> Vêtements </a> </ li> <li> <a href="#"> Électronique </a> </ li> <li> <a href = "#"> Alimentation </a> </ li> <li> <a href="#"> Outils </a> </ li> <li> <a href="#"> Life. chimie </a> </ li> </ ul>

Ensuite, ouvrez style.css et décrivez les styles de sous-menu.

Nous sélectionnons la deuxième liste et lui attribuons la position: absolute; , fixons la largeur minimale à 150 pics.

/ * sous-menu * / .dws-menu li ul {position: absolute; largeur minimale: 150px; }

Écrivons aux listes de frontières à 1 pic.

.dws-menu li> ul li {border: 1px solid # c7c8ca; }

Pour les liens dans le sous-menu, nous allons définir des retraits sur 10 crêtes., Supprimez la transformation de texte et créez un fond plus sombre de tons: # e4e4e5; .

.dws-menu li> ul li a {padding: 10px; transformation de texte: aucune; arrière-plan: # e4e4e5; }

Puis créez un autre sous-menu. Allez dans le fichier de balisage et par exemple dans le menu "Electronique" par analogie, comme nous le faisions auparavant. Nous décrivons les en-têtes des éléments ( appareils photo, ordinateurs, téléphones ) et les sauvegardons.

<li> <a href="#"> Électronique </a> <ul> <li> <a href="#"> Appareils photo </a> </ li> <li> <a href="#"> Ordinateurs </a> </ li> <li> <a href="#"> Téléphones </a> </ li> </ ul> </ li>

Ils ont été sortis, mais cachés sous le menu principal, maintenant position: absolu; UL imbriqué et déplacez-le vers le pic 150. sur le côté:

.dws-menu li> ul li ul {position: absolu; à droite: -150px; en haut: 0; }

Ensuite, nous ferons apparaître le sous-menu lors du ciblage des éléments principaux du menu supérieur. Pour cela, nous ajoutons display: none; et masquer ainsi tous les points internes.

/ * sous-menu * / .dws-menu li ul {position: absolute; largeur minimale: 150px; affichage: aucun; }

Et pour leur apparence, nous allons sélectionner les listes en survol et les afficher à l'aide de display: block; .

.dws-menu li: survol> ul {display: block; }

Vous pouvez maintenant ajouter des menus à plusieurs niveaux en copiant simplement le bloc UL et en modifiant ses éléments.

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Accueil </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> Produits </a> <ul> <li> <a href="#"> Vêtements </a> <ul> <li> <a href = "#"> Chaussures </a> </ li> <li> <a href="#"> Vestes </a> </ li> <li> <a href="#"> Pantalons </a> < / li> </ ul> </ li> <li> <a href="#"> Électronique </a> <ul> <li> <a href="#"> Appareils photo </a> </ li> <li> <a href="#"> Ordinateurs </a> </ li> <li> <a href="#"> Téléphones </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> Aliments </a> </ li> <li> <a href="#"> Outils </ h a> </ li> <li> <a href="#"> Général chimie </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Services </a> <ul > <li> <a href="#"> Service 1 </a> </ li> <li> <a href="#"> Service 2 </a> </ li> <li> <a href = "#"> Service 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> Actualités </a> </ li> <li> <a href="#"> <i class = "fa-enveloppe-ouverte"> </ i> Contacts </a> </ li> </ ul>

Ensuite, finissons les boutons avec les boutons. J'utilise, j'ai créé plusieurs Presets, vous pouvez créer les vôtres. Dans mon cas, je copie simplement ce code et le place à l'arrière-plan que j'ai écrit auparavant.

.dws-menu> ul li a {display: block; / * Lien permanent - ce dégradé: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Anciens navigateurs * / arrière-plan: -moz-linear-gradient (haut, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3,6-15 * / background: -webkit-linear-gradient (haut, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / background: dégradé linéaire (jusqu'en bas, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filter: Progid: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / padding: 15px 30px 15px 40px; taille de police: 14px; couleur: # 454547; texte-décoration: aucun; text-transform: majuscule; transition: toutes les 0.3s sont faciles; } .dws-menu li a: survol {/ * Lien permanent - ce dégradé: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98 ,e0e1e5+100 * / background: # e0e1e5; / * Anciens navigateurs * / arrière-plan: -moz-linear-gradient (haut, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3,6-15 * / background: -webkit-linear-gradient (haut, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / arrière-plan: dégradé linéaire (jusqu'en bas, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filter: Progid: DXImageTransform. Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / color: #ffffff; box-shadow: 1px 5px 10px -5px noir; transition: toutes les 0.3s sont faciles; } dws-menu> ul li a {display: block;  / * Lien permanent - ce dégradé: http://colorzilla

Si vous le souhaitez, ce menu peut être conçu pour le style qui nous convient le mieux sur le site, il suffit simplement de générer une couleur et de la remplacer dans le code. Il s’est avéré être un menu horizontal simple et agréable, réalisé en CSS pur.

Laisse un commentaire:

2011.11.19
Карта