Déroulante Navigation avec Css Seulement, CSS Snippets

Si vous souhaitez suivre avec la vidéo:

Transcription

Dans cette vidéo, je vais parler de la façon de créer un menu de navigation déroulant en utilisant uniquement CSS.

Je commence avec le code que je présentais dans mon tutoriel simple navigation horizontale. Vous pouvez regarder cette vidéo d'abord si vous ne comprenez pas tout le code, je commence avec.

Si vous voulez suivre, vous pouvez saisir le code de mon dépôt GitHub nommé « menu déroulant ». Je vais poster un lien.

J'utilise l'éditeur de code parenthèses afin que je puisse voir l'aperçu en direct que je travaille. Vous pouvez voir que c'est une navigation simple qui a des couleurs différentes sur l'élément actif et également lorsque vous passez la souris.

Lorsque j'ai créé cette navigation j'ai utilisé une approche mobile d'abord et j'ai commencé avec un simple menu de navigation verticale qui passe à l'horizontale sur des écrans plus grands.

HTML changements

Pour ajouter des sous-menus, il vous suffit d'ajouter une liste non ordonnée imbriqué dans l'élément de menu.

Donc, si je veux un sous-menu sous Tutoriels, je peux aller à cette balise li et à l'intérieur de celui-ci, insérez une autre balise ul et quelques balises li pour chaque élément de menu avec un lien à l'intérieur. La syntaxe est comme le menu de haut niveau, juste imbriqué à l'intérieur. J'ajoute 3 éléments de menu avec quelques raccourcis Emmet.

Je vais aussi créer un sous-menu pour Lettres d'information.

Maintenant, cela semble terrible à la fois le petit écran et écran plus grand.

Je vais travailler sur le petit écran en premier.

CSS changements pour le petit écran

La raison pour cela est illisible parce que les sous-menus sont rendu sur le dessus du menu principal. C'est parce qu'il est une propriété de hauteur sous .nav li. Les éléments de liste avec des sous-menus ne sont donnés 40px qui ne suffit pas pour contenir les sous-menus.

Si je l'enlève, la hauteur par défaut à la place automatique qui signifie que le navigateur calcule la hauteur nécessaire en fonction de son contenu. Maintenant, nous pouvons voir tous les éléments du menu.

Le nouveau problème est que la taille de la police pour le sous-menu est plus grand que le menu du haut.

C'est parce que je la spécifié la taille de la police avec l'unité em. Ems sont calculées en fonction de la taille de la police du parent. Et quand vous avez des éléments imbriqués, qui peut provoquer un effet de multiplication. Dans ce cas, les sous-menus obtiennent une taille de police qui est 1,2 fois plus grand que le menu principal.

Donc, en utilisant ems peut être frustrant lorsque vous imbriquez des choses qui spécifient une taille de police.

Il y a une autre unité de mesure appelée rems qui signifie « racine sme » et toujours baser sa valeur sur l'élément racine au lieu du parent. Cela signifie que vous éviter la cascade et l'effet multiplicateur.

Je vais changer l'unité de mesure rem.

Maintenant, tous les articles sont de la même taille.

Cependant, rem ne fonctionne pas dans IE8 et au-dessous si vous avez besoin pour soutenir que vous avez besoin d'une autre solution. Vous pouvez utiliser px à la place.

Je veux réellement les sous-menus pour être texte plus petit, pour les distinguer des menus principaux. Donc, je vais créer un nouveau sélecteur pour les balises sous-menu li et je peux spécifier un autre format de police.

Si je précise la li qui est à l'intérieur d'un autre li, il ciblera les listes imbriquées uniquement les éléments.

Quand je l'ai mis à 1em, vous pouvez voir que la taille est cohérente.

Mais je vais mettre cela .8em pour qu'il soit un peu plus petit.

Je n'aime pas le texte centré sur ce menu plus. Cela vient de ce texte-align: center ici sur la liste non ordonnée. Je veux laisser sur la balise ul parce que je veux ce menu centré sur les grands écrans, mais je vais faire les balises li ont laissé l'alignement.

Je vais ajouter du texte-align: left à .NAV li.

Ensuite, je dois ajouter un peu de rembourrage de sorte qu'il ne hug pas la gauche. Si les balises d'ancrage ajouter que l'élément de la liste, la frontière se lève du mess, je vais donc passer cette ligne.

Le dernier problème sur le petit menu de l'écran est que la frontière n'apparaît pas entre toutes les lignes.

J'ai la frontière au fond des éléments de la liste, mais depuis le bas de la liste des tutoriels ou lettre article est sous le sous-menu, l'élément de la liste du menu principal ne soit pas la frontière.

Au lieu de cela, je vais passer cette ligne de code jusqu'à la balise aussi.

Maintenant, le petit menu semble mieux.

CSS Navigation vers le bas vers le bas sur des écrans plus grands

Donc finalement, j'aborde le sujet principal de ce tutoriel et qui est de savoir comment rendre les sous-menus ne montrent que sur le vol stationnaire sur les écrans plus grands. Cela en fait pas prendre beaucoup de temps.

La partie suivante du code se passe à l'intérieur de la requête des médias. J'utilise un point d'arrêt de 650px parce que c'est la quantité d'espace dans le menu doit être affiché horizontalement sur une ligne en fonction de la largeur des éléments du menu. Vous pouvez utiliser ems ou tout autre point d'arrêt logique pour votre conception.

Ce code à l'intérieur de la requête de médias ne se produira sur les écrans qui ont 650 pixels ou plus.

La première chose que je vais faire est de définir le positionnement du sous-menu pour absolue, de sorte que le sous-menu est sortie du flux du document et ne prend pas plus en hauteur sur la barre de navigation principale.

J'ai ciblé les balises ul à l'intérieur de li pour que cela ne vaut que pour les menus imbriqués.

Maintenant, je veux cacher ces sous-menus. Je peux définir la propriété d'affichage sans pareil si le sous-menu n'affiche pas.

Il est un peu difficile à voir, mais la bordure inférieure est furtivement de la barre de navigation principale, donc je veux éteindre ça sur des écrans plus grands.

Vous pouvez voir la différence quand je bascule cette ligne et hors tension.

Ensuite, nous voulons afficher le menu lorsque vous passez la souris sur le menu parent. On peut donc cibler en vol stationnaire sur la li mère et la liste non ordonnée.

Le sous-menu affiche le vol stationnaire, mais il est un menu horizontal. Cela pourrait être ce que vous voulez. Si oui, vous pouvez arrêter et le style il est placé là où vous voulez et semble mieux.

Mais je veux une navigation verticale.

La raison pour laquelle il est horizontal est parce que je suis en utilisant l'affichage: inline-block sur toutes les balises li à l'intérieur de .nav. C'était de rendre le principal horizontal de navigation.

Si je veux que ce Unternavigation être vertical je dois cibler les balises sous li et les afficher sous forme bloc;

La largeur du sous-menu est un peu court. C'est parce que Li ont une largeur de 130px, mais la couleur de fond provient de la balise ul, qui ne dispose pas d'un ensemble de largeur et donc par défaut automatique.

Je veux que les sous-menu balises ul aient la même largeur que la li mère. Si je dis la largeur: posséderai hérite de la largeur de son parent, ou l'élément de liste.

Maintenant, tout aligne bien.

Je n'aime pas que le texte est maintenant aligné à gauche. Je me souviens fixe pour le petit écran.

Si j'ajoute ce code dans la requête des médias

Il ne semble toujours pas comme les articles sont centrés alignés en raison du padding gauche j'ai ajouté pour le petit menu de l'écran. Je vais ignorer que brièvement et fixerai dans un instant.

Maintenant, tous les éléments du menu sont alignés au centre, y compris le sous-menu. Il est pas très perceptible quand tout mon texte est la même largeur, mais si je change d'une ligne, vous pouvez le voir.

Je veux centrer le menu du haut seulement. Il est facile de cibler les menus enfants en ajoutant plus de sélecteurs, mais je ne peux pas le faire dans le menu supérieur. Je pourrais ajouter une classe, ou je peux cibler les descendants directs de la classe de navigation à l'aide du sélecteur d'enfant, qui est le>.

Voyez comment quand j'ajoute le sélecteur d'enfant, seule la barre de navigation supérieure est centrée. Eh bien, centré, plus 15px de rembourrage sur la gauche.

Je peux utiliser à nouveau le sélecteur d'enfant pour supprimer ce rembourrage.

Lorsque j'utilise ce sélecteur de l'enfant, il ne ciblera pas les balises d'ancrage sous-menu, car ils ne sont pas les descendants directs sous le .nav div.

Le rembourrage gauche de 15px restera dans les menus enfants.

Le concept principal est le menu caché qui affiche le vol stationnaire. Et cette partie du code est ici. Nous cachons le menu imbriqué dans l'état normal, et nous affichons sur le vol stationnaire. Si vous voulez afficher verticalement, vous voulez régler l'affichage pour bloquer les éléments du menu.

La chose importante à noter dans ce code est le sélecteur. Je choisissais les balises ul dans des balises li. Cela signifie qu'il est seulement vise les sous-menus imbriqués. Il est un peu confus regardant les différentes balises li et ul, alors assurez-vous de comprendre cela. Vous pouvez ajouter des classes aux sous-menus pour rendre les choses plus claires si vous voulez.

Support du navigateur

Cela fonctionne dans tous les navigateurs sauf IE8. C'est parce que IE8 ne reconnaît pas les demandes des médias. Nous avons donc besoin de mettre tout le code de la requête des médias dans la feuille de style et IE8 ci-dessous.

Si vous utilisez un pré-processeur, vous pouvez éviter de maintenir le code en double, en mettant le code dans un fichier séparé, et l'importer dans les deux la feuille de style principale et la feuille de style IE.

Et après

Il y a plus de choses à faire pour cela faire mieux. Comme je l'ai mentionné le petit écran ne doit pas être affiché en haut de la page est. Sur un téléphone, il serait probablement prendre tout l'écran. En outre, certains indicateurs qu'il ya des menus cachés seraient utiles ici afin que l'utilisateur sait qu'ils peuvent planer pour voir plus. Certains sur les menus transition menus déroulants serait bien aussi.

Je prévois faire face à ces concepts dans les futurs tutoriels à venir.

Merci pour l'observation, s'il vous plaît laissez-moi savoir si vous avez des questions.

47 réflexions sur « Drop-Down Navigation avec CSS seulement »

J'adore cela et votre autre tutoriel sur une simple barre de navigation CSS, j'ai appris beaucoup de choses sur CSS en général de les regarder. J'ai deux questions que j'espère que vous ne me dérange pas d'aider avec.

Cordialement - David

Merci. Mon intention est de couvrir un meilleur soutien mobile pour cette navigation dans un tutoriel futur, mais je n'ai pas eu le temps d'aborder ce encore, et il ne se passera dans un proche avenir. Honnêtement, les menus déroulants sont de plus en disgrâce ces jours-ci à cause de cette question. effets hover ne sont pas grands à utiliser sur les appareils mobiles. Je suis désolé, je n'ai pas de réponse facile pour vous sur ce moment. Il y a d'autres qui ont abordé ce sujet déjà, donc nous espérons que vous pouvez trouver ce que vous recherchez.

Ensuite, vous pouvez faire un sélecteur comme:

Avec ce code, lorsque l'utilisateur se trouve sur la page « Nouvelles », seul l'élément de navigation qui a une classe de nouvelles vont obtenir le style « actif ». Et la même chose pour les autres pages. Vous pouvez être plus précis avec votre sélecteur, et dites body.new li.news si vous voulez, mais il est généralement pas nécessaire.

La première pensée qui est entré dans ma tête était d'utiliser « le clic » plutôt que « sur hover » pour afficher les menus déroulants mais bien que cela puisse travailler pour le toucher (je dois changer l'élément de menu de haut niveau), il ne se sentirait pas droit de la souris. Est-il possible d'avoir un CSS « ​​de chaque » état? à savoir le menu descend de chaque vol stationnaire ou cliquez sur (touche).

Cordialement - David