Menu déroulant html. Menu déroulant vertical CSS sur les menus en survol et en couches. Comment créer un menu déroulant horizontal

27.10.2019 l'Internet

Bonne journée, chers lecteurs. Aujourd'hui, nous aborderons le sujet comment faire un menu horizontal en utilisant html et css". Le menu, en règle générale, est situé dans l'en-tête du site et est une liste de liens vers les pages les plus importantes, il est également appelé menu principal. Les utilisateurs cliqueront constamment sur ces liens. La façon dont vous les organisez et la conception que vous donnez au menu affecteront le comportement des utilisateurs, la conversion, leur expérience globale de votre site et, bien sûr, .

Code HTML pour le menu horizontal

Il était une fois, le menu principal du site était composé d'images, de tableaux, de flash et peut-être d'autre chose, mais de nos jours, il existe la méthode la plus populaire et la plus correcte pour créer un menu à l'aide de balises "liste".

Les balises sont utilisées pour créer des menus.
,
et .

Un exemple d'utilisation de balises html pour créer un menu dans le code ci-dessous :

domicile
Prestations de service
Des prix
Contacts

Styles CSS standard pour le menu horizontal

ul ( style de liste : aucun ; /*supprimer les marqueurs de liste*/ margin : 0 ; /*supprimer le rembourrage*/ padding-left : 0 ; /*supprimer le rembourrage*/ ) a ( text-decoration : aucun ; /*supprimer le soulignement texte du lien*/ ) li ( float:left; /*Placer la liste horizontalement pour implémenter le menu*/ margin-right:5px; /*Indenter les éléments du menu*/ )

Nous obtenons un menu supérieur prêt à l'emploi dans l'en-tête, sans styles spéciaux ni cloches et sifflets, cela peut être appelé le cadre de votre futur beau menu. Si vous copiez et collez ce html et css, cela ressemblera à ceci.

Un exemple de cadre (template) pour votre futur menu

Tout s'est avéré assez simple, vous voulez bien sûr un beau menu principal tout de suite, mais sans comprendre les bases, vous ne pourrez tout simplement pas créer un bon menu sans erreurs en html et css.

Il existe également plusieurs autres méthodes CSS utilisées pour rendre les menus horizontaux en plus de float:left ; , par exemple display:inline-block; ou display:flex; , mais il est recommandé d'utiliser la méthode décrite ci-dessus.

Remplissons notre modèle de menu avec différents styles et faisons-le belle.

Exemples d'un beau menu horizontal pour un site Web

Je vais maintenant donner quelques exemples prêts à l'emploi avec une conception de menu horizontal prête à l'emploi.

Vous pouvez créer vous-même toutes les "jolies choses" de votre site, et ne pas chercher sur Internet. La façon la plus simple de le faire est basée sur l'un des exemples ci-dessous.

Menu bleu simple avec des éléments séparés

Styles CSS pour le menu "top"

Vous trouverez ci-dessous les styles de ce menu. Le HTML reste le même que dans le menu "squelette".

Ul ( style de liste : aucun ; /*supprimer les marqueurs de liste*/ margin : 0 ; /*supprimer le rembourrage*/ padding-left : 0 ; /*supprimer le rembourrage*/ margin-top:25px ; /*indent top*/ ) a ( text-decoration: none; /*remove link text soullining*/ background:#30A8E6; /*add background to menu item*/ color:#fff; /*change link color*/ padding:10px; /*add padding */ font-family : arial ; /*change font*/ border-radius:4px ; /*add rounding*/ -moz-transition : all 0.3s 0.01s easy ; /*do transition en douceur*/ -o-transition : toutes les 0,3 s 0,01 s sont facilitées ; -webkit-transition : toutes les 0.3s 0.01s facilitées ; ) a:hover ( background:#1C85BB;/*Ajouter un effet de survol*/ ) li ( float:left; /*Placer la liste horizontalement pour implémenter le menu*/ margin-right:5px; /*Ajouter un rembourrage aux éléments de menu* / )

Menu principal situé sur une ligne de couleur sur fond rouge

menu de style css sur la ligne de couleur

ul ( style de liste : aucun ; /*supprimer les marqueurs de liste*/ margin : 0 ; /*supprimer le rembourrage*/ padding-left : 0 ; /*supprimer le rembourrage*/ margin-top : 25 px ; /*indent top*/ background :#FF4444; /*ajoute un arrière-plan à tout le menu (le remplacement de ce paramètre changera la couleur de tout le menu)*/ hauteur : 50px ; /*définit la hauteur*/ ) a (décoration de texte : aucune ; /* supprimer le soulignement du texte du lien* / background:#FF4444; /*ajouter un arrière-plan à l'élément de menu (le remplacement de ce paramètre modifiera la couleur de tous les éléments de menu)*/ color:#fff; /*modifier la couleur du lien* / padding:0px 15px; /*add padding*/ font-family: arial; /*change the font*/ line-height:50px; /*align the menu vertically*/ display: block; border-right: 1px solid # F36262 ; /*ajoute une bordure à droite*/ -moz-transition : all 0.3s 0.01s easy ; /*fait une transition en douceur*/ -o-transition : all 0.3s 0.01s easy ; -webkit-transition : all 0.3s 0.01s facilité ; ) a:hover ( background:#D43737;/ *add hover effect*/ ) li ( float:left; /*lay list horizontalement for real menu*/ )

Menu déroulant en HTML+CSS

Pour la mise en œuvre menu déroulant supplémentaire (déroulant) sur le site pour tout élément de menu, nous devons ajouter une liste supplémentaire d'éléments au code HTML pour tout lien du menu horizontal et modifier les styles CSS. Dans les styles, nous appliquerons une astuce simple - changer l'affichage du menu déroulant au survol de l'élément dont nous avons besoin dans le menu supérieur. Prenons par exemple l'item "services".

Exemple de création d'un menu déroulant simple

Code HTML du menu déroulant

domicile
Prestations de service
- Prestation 1
- Long service 2
- Prestation 3
Des prix
Contacts

Styles CSS déroulants

ul ( style de liste : aucun ; /*supprimer les marqueurs de liste*/ margin : 0 ; /*supprimer le rembourrage*/ padding-left : 0 ; /*supprimer le rembourrage*/ margin-top : 25 px ; /*indent top*/ background :#819A32; /*ajouter un arrière-plan à l'ensemble du menu*/ hauteur : 50px ; /*définir la hauteur*/ ) a (décoration de texte : aucune ; /*supprimer le soulignement du texte du lien*/ background:#819A32 ; /*ajoute un arrière-plan à l'élément de menu*/ color:#fff; /*change la couleur des liens*/ padding:0px 15px; /*add padding*/ font-family: arial; /*change font*/ line-height :50px ; /*aligner le menu sur les verticales*/ afficher : bloquer ; border-right : 1px solid #677B27 ; /*ajouter une bordure à droite*/ -moz-transition : all 0.3s 0.01s easy ; /*faire un transition douce*/ -o-transition : tous les 0,3 s 0,01 s faciles ; -webkit-transition : tous les 0,3 s 0,01 s faciles ; ) a:hover ( background:#D43737;/*Ajouter un effet de survol*/ ) li ( float :left; /*Placer la liste horizontalement pour implémenter le menu* / position:relative; /*définir la position de positionnement*/ ) /*Styles pour le menu déroulant caché* / li > ul ( position:absolue; haut : 25 px ; affichage : aucun ; ) /*Rend la partie cachée visible*/ li:hover > ul ( display:block; width:250px; /*Définir la largeur du menu déroulant*/ ) li:hover > ul > li ( float:none; /* Supprimer le positionnement horizontal* / )

Et afin de comprendre exactement quels services et catégories vous devriez avoir, je vous recommande de vous familiariser avec le matériel :.

J'ai essayé de vous expliquer le plus brièvement possible comment créer un menu horizontal principal, créer quelques modèles, comment y ajouter des styles simples et le rendre plus joli, comment créer un menu déroulant pour votre site. Pour plus de commodité, j'ai rassemblé tous les menus présentés ci-dessus dans un seul fichier html, que vous pouvez télécharger ci-dessous. Cela ressemble à la capture d'écran :

Merci de votre attention.

Menu horizontal est une liste de sections du site, il est donc plus logique de baliser à l'intérieur de l'élément

Comment faire un menu horizontal : exemples de balisage et de conception

Balisage HTML et styles de base pour le menu horizontal

Par défaut, tous les éléments de la liste sont situés verticalement, s'étendant sur toute la largeur de l'élément conteneur, qui à son tour s'étend sur toute la largeur de son bloc conteneur.

Balisage HTML pour la navigation horizontale

Élément du menu
Élément du menu
Élément du menu

Un menu horizontal situé à l'intérieur de la balise peut également être placé à l'intérieur de l'élément

...

opportunité supplémentaire

Il existe plusieurs façons de les placer horizontalement. Vous devez d'abord réinitialiser les styles de navigateur par défaut pour les éléments de navigation :

Ul ( list-style: none; /*remove the list markers*/ margin: 0; /*remove the top and bottom margins of 1em*/ padding-left: 0; /*remove the left padding of 40px*/ ) a ( text-decoration: none; /*supprime le soulignement du texte du lien*/)

Méthode 1. li (affichage : en ligne ;)

Créez des éléments de liste en ligne. En conséquence, ils sont disposés horizontalement, sur le côté droit, un espace égal à 0,4 em est ajouté entre eux (calculé par rapport à la taille de la police). Pour le supprimer, ajoutez une marge droite négative à li li (margin-right: -4px;) . Ensuite, stylisez les liens comme vous le souhaitez.

Méthode 2. li (float : gauche ;)

Nous rendons les éléments de la liste flottants. En conséquence, ils sont disposés horizontalement. La hauteur du bloc conteneur ul devient nulle. Pour résoudre ce problème, nous ajoutons (overflow: hidden;) à ul , en le développant et en lui permettant ainsi de contenir des éléments flottants. Pour les liens, ajoutez un (affichage : bloc ;) et stylisez-les comme vous le souhaitez.

Méthode 3. li (affichage : bloc en ligne ;)

Faire des éléments de liste en bloc en ligne. Ils sont disposés horizontalement, un espace est formé sur le côté droit, comme dans le premier cas. Pour les liens, ajoutez un (affichage : bloc ;) et stylisez-les comme vous le souhaitez.

Méthode 4. ul (affichage : flex ;)

Faire de la liste ul un conteneur flexible à l'aide de l'extension . En conséquence, les éléments de la liste sont disposés horizontalement. Ajoutez un (affichage : bloc ;) pour les liens et stylisez-les comme vous le souhaitez.

1. Menu réactif avec effet de soulignement lors du survol d'un lien

2. Menu responsive pour un site de mariage

3. Menu réactif avec pétoncles

4. Menu du ruban réactif

5. Menu réactif avec un logo au milieu

6. Menu responsive avec logo à gauche

J'ai longtemps voulu écrire un article sur la façon de faire sous-menu en css. Beaucoup de gens le font jQuery et il s'avère assez bien, cependant, tout le principe de base de la création sous-menu en css Je vais le présenter ici. Et déjà plus loin, à partir de cette base, vous pouvez encore améliorer le sous-menu.

je l'apporte tout de suite Code CSS:

* html sur li (
flotteur : gauche ;
}
* html sur li a (
hauteur : 1 % ;
}
ul(
bordure inférieure : 1px solide #000 ;
style de liste : aucun ;
marge : 0 ;
rembourrage : 0 ;
largeur : 100px
}
ul li (
position : relative ;
}
ul li a (
bloc de visualisation;
bordure : 1px solide #000 ;
bordure inférieure : 1px ;
rembourrage : 5px
décoration de texte : aucune ;
}
li ul (
affichage : aucun ;
gauche : 99px ;
position : absolue ;
haut : 0 ;
}
li: survolez ul (
bloc de visualisation;
}

La chose la plus importante ici est le sélecteur " li: survolez ul". En fait, il affiche le contenu du menu. Par défaut, il " affichage : aucun", et lorsque vous survolez un élément de menu, le sous-menu devient : " bloc de visualisation", c'est-à-dire visible. C'est la chose la plus importante. Également dans les deux premiers sélecteurs (qui * ) se rend Piratage CSS pour C'EST À DIRE, sinon rien ne fonctionnera dans ce navigateur sans lui. Tout le reste est apparence qui, bien sûr, peut être modifié.

j'apporte et Code HTML:

domicile

Menu 1
- Sous-menu 1
- Sous-menu 2
- Sous-menu 3

Menu 2
- Sous-menu4
- Sous-menu 5
- Sous-menu 6
- Sous-menu7
- Sous-menu 8

Si vous réfléchissez bien à cette structure, tout devient très clair. Étiquette ul- crée un menu. Si un ul est à l'intérieur d'un autre ul, alors c'est déjà un sous-menu. Une étiquette li responsable d'un élément de menu spécifique.

Bien sûr, le menu est le plus simple, à la fois en termes de logique et de structure, et en termes de design. Bien sûr, vous pouvez utiliser jQuery faire une ouverture en douceur. Vous pouvez également modifier le design, mais tout le principe restera le même que dans ce sous-menu écrit en CSS et HTML.

Salutations! Si vous êtes un concepteur de mise en page débutant, vous découvrirez tôt ou tard que vous souhaitez en quelque sorte animer vos pages, les rendre au moins un peu interactives. Au mieux, les animations CSS peuvent vous aider ici. Mais vous devez savoir où et comment les appliquer.

Aujourd'hui, je vais dire comment faire un menu déroulant sur le nettoyageCSS et comment y ajouter de la douceurà l'aide d'animations CSS. Si vous ne le savez pas, il est temps de vous familiariser avec les bases.

Composition du menu HTML + CSS

Pour commencer, afin que nous ayons quelque chose avec quoi travailler, établissons un menu simple à un niveau. On ne s'embêtera pas beaucoup avec le design, cela suffit pour plus de clarté :

Ce que nous avons? La liste non ordonnée la plus ordinaire avec l'identifiant "top_menu" et avec des liens enveloppés dans les éléments de cette même liste. Tout est banal et simple. Au survol, les éléments du menu changent de couleur... c'est tout ce que vous savez déjà et comprenez comment faire (j'espère).

Ajout d'un menu de second niveau

Pour créer un menu en couches, nous devons ajouter une deuxième liste non ordonnée à l'intérieur de la première. Je pense que vous l'avez pris quelque part dans les leçons initiales. Et aussi le fait que vous devez l'insérer non seulement à l'intérieur de notre liste, mais à l'intérieur de l'élément de liste, c'est-à-dire la balise " li", juste après la balise fermante "a".

Positionner les listes imbriquées de manière absolue par rapport à " li' dans lequel ils sont imbriqués. Et tout " li» du niveau supérieur est positionné par rapport à ( relatif). Pour que le menu déroulant soit IMMÉDIATEMENT après notre menu de niveau supérieur, il (déroulant - " menu_intérieur") Doit être réglé

position : absolue ; Top 100%;

Autrement dit, le retrait à partir de la bordure supérieure du parent sera égal à la hauteur du parent. Très logique, à mon avis.

En plus du positionnement, vous devez donner au menu déroulant le même style que le menu de niveau supérieur. Une pomme d'un pommier, comme on dit...

Comme vous pouvez le voir, notre menu déroulant ne ressemble pas encore à une liste déroulante, mais a été abandonné et suspendu. Mais ce n'est pas grave, nous réglerons cela bientôt.

Comment rendre un menu déroulant vraiment déroulant

Il n'y a rien de plus simple ! Pour faire de notre liste imbriquée un menu déroulant, il vous suffit de la masquer ! Et puis ouvrez-le uniquement lorsque le curseur de la souris balaie l'élément de menu de niveau supérieur, qui contient un menu déroulant. Cela peut sembler un peu compliqué, mais en fait, cela peut être résolu avec seulement quelques lignes de code.

Ajouter au menu déroulant :

affichage : aucun ;

Et pour l'afficher, vous devez vous inscrire :

#top_menu > li:hover > ul ( display: block; )

Que nous dit toute cette bande de sélectionneurs ? Nous lisons depuis la fin. Nous définissons des styles (visibilité) pour la liste de second niveau, qui se trouve à l'intérieur de l'élément de liste de premier niveau, mais ces styles ne fonctionneront que si nous passons la souris (pointe) sur l'élément "li" qui emboîtait notre liste de second niveau.

J'espère que je me suis exprimé clairement. Sinon, essayez de lire plusieurs fois. Mieux encore, il suffit de le comprendre en regardant le code. Voyons ce que nous avons :

Oui, nous semblons avoir atteint ce que nous voulions - nous avons créé un menu déroulant, un vrai menu déroulant, bon sang ! Mais il lui manque quelque chose. Vous savez quoi? Douceur! Après tout, tout semble comme si le menu ne tombait pas, mais apparaissait simplement. Et très brusquement, même instantanément, je dirais.

Eh bien, jouons un peu plus avec.

Le menu déroulant lisse est facile

Faisons donc un menu déroulant fluide sur CSS pur. Pourquoi le faire? Parce que les gens aiment quand tout est lisse et doux... et c'est beau. Ce sera un plus pour l'ergonomie de votre site. Allons-y!

N'oubliez pas que vous ne pouvez animer que des valeurs mathématiques exactes, telles que 50 pixels et 300 pixels, 0 et 100 %, 0,5 et 1,0, etc. Dans notre cas, nous ne pourrons pas animer les deux états de notre menu déroulant ( affichage : aucun ; et bloc de visualisation;).

Mais nous pouvons les remplacer par de la transparence - opacity:0 et opacity:1. Et définissez le temps pendant lequel notre menu apparaîtra à partir d'un état transparent. Oui, cela fonctionne, mais ce n'est pas tout à fait l'effet auquel vous pourriez vous attendre. Alors rendons ça un peu plus difficile. Mais ça vaut le coup, croyez-moi.

Pour rendre l'animation plus fluide et plus prévisible, nous avons dû définir une hauteur fixe pour les éléments du menu déroulant, même si nous pouvions nous en passer. Il existe de nombreuses méthodes, il suffit de trouver des combinaisons et de résoudre des problèmes.

Comme vous pouvez le voir sur le code, nous avons animé la hauteur des éléments déroulants et leur transparence. Cela s'est avéré suffisant pour faire une belle animation fluide menu déroulant.

De quoi avons-nous besoin pour l'animation ? Deux états de nos éléments de menu, ainsi que la propriété de transition, qui a interpolé ces états, c'est-à-dire rempli toutes les valeurs intermédiaires pendant la période de temps impartie. C'est tout!

Encore plus facile pourrait être fait en utilisant jQuery, mais nous avons d'abord convenu que nous travaillerons avec du CSS pur aujourd'hui. Et encore plus beau pourrait être fait en ajoutant des courbes de Bézier aux animations, mais ce sujet dépasse un peu le cadre d'aujourd'hui. Mais nous y reviendrons certainement plus tard.

Conclusion:

Vous pouvez maintenant vous vanter auprès de vos amis et de votre famille que vous savez créer un menu déroulant avec du CSS pur. C'est une compétence très utile dont vous aurez besoin plus d'une fois. Eh bien, jugez par vous-même, combien de sites avez-vous vu avec un menu statique ? Non, la plupart des sites ont un menu déroulant.

Au fait, c'était mon premier tutoriel CSS. Décrivez comment vous l'aimez? Avez-vous tout expliqué clairement ou avez-vous besoin d'entrer dans plus de détails? Et vaut-il même la peine de continuer à écrire des articles sur le thème des life hacks en CSS ?

Merci de votre attention et à bientôt !

As-tu lu jusqu'au bout ?

Cet article a-t-il été utile?

Pas vraiment

Qu'est-ce que tu n'as pas aimé exactement ? L'article était-il incomplet ou mensonger ?
Écrivez dans les commentaires et nous promettons de nous améliorer!

Dans ce tutoriel, nous allons réaliser un menu horizontal classique en pur CSS. Il a des icônes dans les listes. Lorsque vous survolez un élément, il modifie en douceur la couleur du bouton et du texte et ajoute une ombre. Les listes déroulantes peuvent être multi-niveaux, et surtout, tout cela est tout simplement implémenté en CSS3 pur.

Dans la leçon, nous utiliserons :

affichage : flexible ;
utiliser la transition ;
nous allons positionner les éléments en utilisant position .

Structure HTML du menu horizontal

Tout d'abord, écrivons le balisage du menu horizontal. Nous ouvrons notre environnement de développement dans mon cas c'est PhpStorm , créons un fichier index.html, écrivons le framework html:5, remplaçons lang par ru .

Je supprimerai toutes les méta sauf l'encodage, j'écrirai mon titre" menu tom».

Entre le corps, nous écrivons la balise d'en-tête, et à l'intérieur se trouve un bloc avec la classe .dws-menu dans laquelle notre menu sera situé. De plus, la structure sera la suivante, nous créerons des listes d'un montant de cinq pièces. Chaque liste aura un lien avec l'attribut href="#". Ensuite, il y aura une icône I avec la classe .fa .fa-

Cliquez sur appliquer.

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

Ensuite, sélectionnez et connectez les icônes. Nous allons sur le site Web de Font Awesome, sélectionnons les icônes pour ces éléments de menu :

Nous téléchargeons l'archive du site avec des icônes, extrayons son contenu sur notre ordinateur, copions le dossier des polices et le dossier css dans notre environnement de développement.

Le dossier des polices contient les polices d'icônes et le dossier css contient leurs styles. Les styles compressés peuvent être supprimés par font-awesome.min , y compris font-awesome.css non compressé.

Dans index.html, nous connectons les icônes et prescrivons à chaque élément son propre style d'icône ( domicile, Panier, rouages, ème-liste, enveloppe ouverte).

Nous avons créé le cadre principal, nous formerons le sous-menu après avoir décrit le style principal, et maintenant nous allons créer un fichier dans lequel nous décrirons les principaux styles du menu horizontal style.css et le connecterons à index.html . Pour vérifier que les styles sont liés, je vais créer un dossier img , dans lequel je placerai une image arbitraire sur l'arrière-plan. Écrivons la connexion de l'image en utilisant background .

Corps( image d'arrière-plan : url("../img/ep_naturalwhite.png"); )

Description des styles CSS pour le menu horizontal

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

Dws-menu *( marge : 0 ; rembourrage : 0 ; )

Fixons l'en-tête à 200 piques. et attribuez la police Cuprum, qui peut être téléchargée et connectée séparément à votre site, juste au cas où, nous écrirons des polices supplémentaires.

En-tête (marge : 200 pixels ; famille de polices : Cuprum, Arial, Helvetica, sans empattement ; )

Masquons les marqueurs des listes :

dws-menu ul, .dws-menu ol( style de liste : aucun ; )

Affichons les listes horizontalement avec display: flax , et centrons-les :

Dws-menu > ul( display: flex; justifier-content: center; )

Dans l'en-tête, indentons uniquement à partir du haut, écrivons margin-top .

Entête( marge supérieure : 200px ; famille de polices : Cuprum, Arial, Helvetica, sans empattement ; )

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

Dws-menu > ul li a( display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; )

Ensuite, nous positionnons les icônes, attribuons la position des listes : relative ; pour centrer davantage les icônes :

dws-menu > ul li( position : relative ; )

dws-menu > ul li > a i.fa( position : absolue ; haut : 15px ; gauche : 12px ; font-size : 18px ; )

Attribuons un séparateur de bordure aux listes, sélectionnons le premier élément LI et définissons la bordure. Nous sélectionnons le dernier élément LI et lui attribuons une bordure similaire.

Dws-menu > ul li:first-child( border-left: 1px solid #b2b3b5; ) .dws-menu > ul li:last-child( border-right: 1px solid #babbbd; )

Création de séparateurs pour les listes LI :

.dws-menu > ul li( position : relative ;

bordure droite : 1px solide #c7c8ca ;

Le menu a acquis l'apparence, vous pouvez alors commencer à décrire les styles au survol.

Animer le menu horizontal au survol

Dws-menu li a:hover( background: #454547; color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s easy; )

Et pour faire disparaître cet effet en douceur, ajoutez ce style au lien au repos :

.dws-menu > ul li a( display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase;

Le menu principal est terminé et vous pouvez commencer à décrire les sous-menus et leurs sous-menus.

Décrire un menu déroulant CSS/HTML

Nous ouvrons index.html et ajoutons, par exemple, un menu supplémentaire aux produits. Entre les listes LI nous insérons UL , nous y placerons cinq listes, dans lesquelles il y aura des liens avec l'attribut herf=”#” .

ul>li*5>a

Cliquez sur appliquer, écrivez le nom des éléments ( Vêtements, électronique, nourriture, outils, vie. chimie).

Vêtements
Électronique
Aliments
Outils
Gén. chimie

Ensuite, nous ouvrons style.css et décrivons les styles du sous-menu.

Sélectionnez la deuxième liste et donnez-lui la position : absolue ; , définissez la largeur minimale sur 150 pixels.

/*sub menu*/ .dws-menu li ul( position : absolue ; min-width : 150px ; )

Écrivons la frontière de 1 pic dans les listes.

Dws-menu li > ul li( border: 1px solid #c7c8ca; )

Pour les liens du sous-menu, définissez le rembourrage sur 10 pixels, supprimez la transformation du texte et assombrissez l'arrière-plan de quelques tons : #e4e4e5 ; .

Dws-menu li > ul li a( padding : 10px ; text-transform : aucun ; arrière-plan : #e4e4e5; )

Ensuite, nous allons créer un autre menu imbriqué. Passons au fichier de balisage et, par exemple, dans "Électronique", nous formons le menu par analogie, comme nous l'avons fait auparavant. Décrivez les titres des paragraphes ( Appareils photo, ordinateurs, téléphones) Et enregistrer.

Électronique
- appareils photo
- Des ordinateurs
- Téléphone (s

Ils sont affichés, mais cachés sous le menu principal, maintenant en position : absolu ; UL imbriqué et décalez-le de 150 pics. sur le côté:

Dws-menu li > ul li ul( position : absolue ; droite : -150px ; haut : 0 ; )

/*sub menu*/ .dws-menu li ul( position : absolue ; min-width : 150px ;

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

dws-menu li:hover > ul( display: block; )

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

domicile
Des produits
- Vêtements
  - Des chaussures
  - Vestes
  - Pantalon
- Électronique
  - appareils photo
  - Des ordinateurs
  - Téléphone (s
    - Samsung
    - Flf
    - Pomme
- Aliments
- Outils
- Gén. chimie
Prestations de service
- Prestation 1
- Prestation 2
- Prestation 3
Nouvelles
Contacts

Ensuite, décorons les boutons avec l'ingrédient pour les étapes finales. J'utilise un générateur CSS, j'ai créé plusieurs Presets, vous pouvez créer le vôtre, dans mon cas je copie juste code donné et placez en place le fond que j'ai écrit auparavant.

.dws-menu > ul li a( display: block;

/* Permalien - à utiliser pour éditer et partager ce dégradé : http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */ background : #c9c9c9 ; /* Anciens navigateurs */ background : -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ background : linear-gradient(to bottom, #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 */

rembourrage : 15px 30px 15px 40px ; taille de police : 14 px ; couleur : #454547 ; décoration de texte : aucune ; transformation de texte : majuscule ; transition : toutes les 0,3 s d'aisance ; )

/* Permalien - à utiliser pour modifier et partager ce dégradé : http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 */ background : #e0e1e5 ; /* Anciens navigateurs */ background : -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */ background : linear-gradient(to bottom, #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 */

couleur : #ffffff ; boîte-ombre : 1px 5px 10px -5px noir ; transition : toutes les 0,3 s d'aisance ; )

Si on le désire ce menu vous pouvez arranger le style qui vous convient sur le site, c'est assez simple pour générer une couleur et la remplacer dans le code. Le résultat est un menu horizontal simple et en même temps agréable fait avec du CSS pur.

sushiandbox.ru Mastering PC - Internet. Skype. Réseaux sociaux. Cours sur Windows.

Menu déroulant html. Menu déroulant vertical CSS sur les menus en survol et en couches. Comment créer un menu déroulant horizontal

Code HTML pour le menu horizontal

Styles CSS standard pour le menu horizontal

Un exemple de cadre (template) pour votre futur menu

Exemples d'un beau menu horizontal pour un site Web