Comment crée un Menu simple et épurée en HTML & CSS ?

Non classé, Web DevelopmentNo Comments

You Are Here:, Web DevelopmentComment crée un Menu simple et épurée en HTML & CSS ?

Si tu code en HTML & CSS et que tu commences à te faire la main, tu dois forcément avoir déjà utilisée la balise “<ul>” et “<li>“, ou du moins tu en à entendu parler. Si ce n’est pas le cas pas de panique je vais décrire chaque balise ou propriété nécessaire pour réaliser une jolie Barre de Navigation. Tu dois également être au courant qu’une Barre de Navigation c’est la base d’un site internet, sans sa un site n’est pas vraiment un site. Je n’ai personnellement jamais été sur un site web sans barre de navigation, après il existe des variantes sur les côtes, en bas, au milieu. Mais la tendance actuelle de web-design, est une barre en haut avec à droite des boutons pour naviguer de page en page, et à gauche le logo. Et c’est précisément cette barre que je vais t’apprendre à réaliser aujourd’hui. Non pas pour suivre les autres comme un mouton, mais juste parce qu’elle est simple, correspond et plaie à beaucoup de personne et parce que c’est jolie tout plein 😀 Après si tu ne veux pas recopier celle que je réaliser dans cet article, tu peux totalement le faire à condition de savoir le faire. Comme je l’ai dit le but de cet article est de comprendre comment faire un menu. Je tiens à préciser que ce n’est pas un menu déroulant, je ferais un article uniquement sur sa et qu’il n’est pas responsive c’est à dire que le menu ne s’adapte pas à la taille de l’écran.

 

Tout d’abord, si tu veux suivre ce tutoriel il faut que tu ais ou que tu sois en train de coder ton site web, puisque je ne reviendrais pas sur les bases du HTML & CSS, sauf si tu es venu sur cet article uniquement pour te donner bonne conscience sans réaliser le tuto :D. Cependant, même si t’est base sont très fragile, même si je t’explique le rôle de chaque balise et propriété il faut que tu maîtrise le HTML & CSS. Sinon si tu veux modifier ce menu, tu ne pourras pas le faire et c’est bien dommage. Tu es justement sur cet article pour apprendre et comprendre, mais pour cela il faut maîtriser le HTML & CSS, pour ne pas faire un vulgaire copier-coller sans rien comprendre. Bref, il faut également que tu saches que ce menu est plutôt basique, et retrouvable sur beaucoup de site, et qu’elle est adapté pour un site d’une entreprise de développement de jeux, ou pour d’autre domaine (mais pas tous). A plusieurs reprises j’ai dit qu’elle était simple, mais en réalité ce n’est pas le cas puisqu’elle est relativement compliquer. Pas énormément, mais un peu c’est pour sa qu’il faut vraiment que tu sois bon en HTML & CSS (je me répète, mais c’est très important). Ceci étant dit, on va pouvoir rentrer dans le vif du sujet.

 

Comment crée un Menu ?

Avant même de commencer voici le résultat final (spoil) 😀 :

 

Pour commencer il va falloir réaliser une page html avec un logo et une liste non ordonnée dans une balise <nav>, je t’en ai d’ailleurs parlé vaguement tout à l’heure. Il s’agit bien sur de la balise <ul> et <li> :

  • <ul> permet de crée un liste dite non-ordonnée, c’est-à-dire qu’il n’y a pas d’ordre précis comme par exemple : Pizza, Pomme, Raisin.
  • <li> permet de crée les éléments présents dans les listes <ul>.
  • <nav> permet de définir un ensemble de liens de navigation, il ne faut cependant pas utiliser le nav pour chaque lien, mais uniquement pour des gros blocs, telle qu’un menu.

Je ne t’explique pas les autres balises, car elles sont plutôt basiques mais surtout tout le temps utilisé. Et pour le code HTML qu’il faut pour le menu, le voici :

 

Il est relativement simple, sachant que j’ai mis tout ce que tu dois modifier (c’est pas beau sa :D), mais le résultat n’est pour le moment pas très convainquant (ci-dessous) et c’est normal il manque l’essentiel, je parle du CSS bien-sûr. Je tiens à préciser que mes pages ne mènerons nul part, pour ce tuto je ne me suis pas amuser à crée d’autre pages, mais toi tu devras le faire.

 

Et la ça va être plutôt compliqué de tout expliqué, je vais donc le faire petit à petit mais que le plus important je ne décris pas un changement de couleur d’un texte par exemple. Bref, on va tout d’abord (sur le body) reset les marges intérieur et extérieur pour éviter d’avoir un espace entre la fin de la page et la barre de navigation. Sur le nav, on va la mettre à 100% de largeur (ce qui la rend responsive). Sa donne un truc comme sa, (encore moche) :

 

Maintenant, on va s’occuper de nos éléments de liste, en réglant dans un premier temps le problème qui fait que lorsqu’un élément non flottant contient des éléments flottants, le CSS va enlever la hauteur de l’élément parent. Pour résoudre cela on va appliquer un overflow: hidden; sur notre liste non-ordonnée. Puis, sur <li> on va enlever les puces devant le nom des pages avec la propriété css list-style-type: none; Et on vas également rapproché les éléments et les placé à droite avec un float: right; Et sa donne sa (pas jolie) :

 

Tu remarqueras surement que ta liste est à l’envers, et pour palier à ce problème il te suffit d’inverser les éléments de ta liste en HTML. Bref, maintenant on va s’occuper de nos liens en les mettant en inline-block; puis un text-decoration: none; pour enlever le soulignement par défaut, et en ajoutant une margin qui correspond à la zone que l’on pourras cliquer, passer la souris dessus affichant ainsi des couleurs. Puis pour le hover (quand on passe la souris sur le liens), on va lui appliquer une bordure au-dessus, ce qui va décaler notre barre. C’est pour cela que l’on met une margin avec comme première valeur celle mise dans le “nav a” en enlevant 5px, comme deuxième valeur la deuxième du “nav a“, la troisième valeur est la 1ère du “nav a” et enfin la dernière valeur est la deuxième du “nav a“. Si tu n’as pas très bien compris regarde le résultat et admire.

 

Il est quasiment terminé, il manque juste de mettre de la place à droite et mettre le logo (cliquable je le rapelle). Pour cela mettre une margin-right: 200px; ce qui va décalé tous les éléments de la liste vers la gauche (c’est d’ailleurs responsive). Et pour le logo je lui mets quelques paramètres pour qu’il soit bien positionné, et de bonne taille. Et c’est fini :

 

En faite, pas encore car il y a un effet qui est plutôt sympas à mettre c’est de faire en sorte que le hover sois activer par rapport à la page sur laquelle tu te trouves. Ce qui permet de mieux ce repérer sur le site. Je ne sais pas si tu vois ce que je veux dire, mais en gros fait le code ci-dessous, en changeant la class de l’éléments de listes par rapport à la page ou tu es. Tu dois donc le faire sur chaque fichier HTML (après c’est du plus), sauf pour le cc1 qui as déjà une class :

 

Tu sais maintenant réaliser un menu simple mais compliquer, parce que pour moi un menu simple n’a pas de logo et est centré, hors ici j’ai fait un peu plus dur. J’espère que tu as tout bien assimiler et tout bien compris et que tu es capable de le refaire à ta sauce (poumpoum skill bra pou pou pou …. pardon 😀 mais sa me fait penser à Big Shaq). Bref, il est important que tu sois capable de le refaire puisqu’un menu c’est la base d’un site, c’est ce que le visiteur veras en premier (du moins généralement).

Apprendre sans réfléchir es vain. Réfléchir sans apprendre est dangereux.” –Confucius

Oui, j’ai décidé de terminer mes articles avec une citation innovante. Dans tous les cas j’arrête cet article ici ! Mais je voudrais savoir si cet article ta été utile ou du moins ta plus, n’hésite pas à me donner ton avis en commentaire ou sur mes réseaux sociaux ! Aller bonne apprentissage jeune outsider !

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Top