Création d'un menu déroulant en HTML et en CSS

[@bodeniangadou]

9 ans après la vidéo est toujours actualisé merci beaucoup pour votre aide gratuite !

[@Shanksther3d]

J'ai commencé a coder ya un mois et franchement je vous remercie pour votre pédagogie ya pas a dire vous êtes un bon professeur. Meme 5 an plus tard vous faites des heureux 🤙🤙🤙

[@phrasio7811]

Salut Pierre, Je suis amateur photographe depuis l'âge de 25 ans. Maintenant je suis à la retraite grâce à tes cours je pourrai enfin monter mon propre site pour montrer mes photos abstraites de murs. Merci pour ces super cours!

[@margotdvs]

Merci Pierre pour ton aide précieuse, même après 7ans ta vidéo nous aide!

[@LahsenELMACHRAA]

Bonjour, j aimerais juste vous remercier pour ce cours qui m a permis de réaliser ce menu deroulant en toute simplicité, merci encore et bonnes continuations.

[@arnaudvanheule3812]

Bonjour Pierre, je te présente mes félicitations pour tes tutoriels. Ces langages ne me sont pas inconnus ET je me suis laissé embarqué sans l'explication de tes vidéos. Je crois que tout débutants est capable d'acquérir de bonnes bases ET sans prises de tête. Il est toujours difficile d'expliquer la compréhension d'un language et tu le fais très bien. J'ai été captivé par ta méthodologie . Alors merci pour ton travail et ton implication, c'est clair 👍👍

[@lauraghigo847]

Merci beaucoup Pierre pour ton aide précieuse, grâce à toi on réussira notre projet

[@felbtk9627]

Pierre t'es le meilleur, tu nous as vraiment aidé 🙏🏽👌🏼

[@nbuisness3984]

tu peux envoyer les codes stp

[@foxlyon8097]

c'est trop magnifique j'avais du mal avec ces module a l'ecole mais avec vos tuto j'ai plus de lakine merci beaucoup tu merite un like :)

[@calimero7538]

Merci pour le tuto. J'ai enfin un menu décent pour mon site. Et pour ceux qui sont juste incapable de recopier un code en écoutant Pierre puis en essayant de comprendre ce même code: achetez-vous un cerveau et de nouveaux doigts. Ce tuto n'est vraiment pas compliqué à suivre. Si ça ne marche pas c'est que vous vous êtes juste trompé quelque part dans votre code.

[@amosnguessan2872]

Merci à vous pierre.Grâce a vous je comprends mieux le binôme HTML et css .vous êtes un vrai maître.

[@coachlvr]

Merci Tu est le premier qui ne me ment pas dans les manu déroulant +1abo et 1like

[@hergyjeanbaptiste6971]

merci c'est un plaisir pour moi de suivre tes cours , félicitation !!!!!!

[@guychakabu4695]

Merci mille fois, vous êtes super comme professeur/pédagogue... votre vidéo m'a été extrêmement utile. MERCI

[@juniortayo7528]

Je suis choqué du comportement de Poutine en se moment mais suivre vos tuto de création html et css me donne de la joie merci papa Pierre Giraud

[@yvanadaye780]

excellent tes tutoriels je te dit dit bravo tu m'a beaucoup aider a m'ameliorer en tant que jeune developpeur et c'est formidable ton aide m'a ete tres precieuse encore une fois bravo

[@aeriah987]

Merci beaucoup !! Vos tutoriels m'aident beaucoup, merci !

[@kabatdonat5792]

salut maitre pierre je suis content de vos tuto merci!

[@aminebens3483]

Vraiment merci. Vous êtes excellent.

[@ericdeboise5520]

Bonjour Pierre, j'indique une méthode super simple *Poser un grand div qui va contenir les listes déroulantes. *Dans ce grand div, poser des petits div, qui sont ces listes déroulantes; à ces petits div, associer la classe "lien", et des informations de positionnement absolu. *Chaque petit div est constitué de deux paragraphes; le premier est la partie visible de la liste déroulante; le deuxième paragraphe est la partie cachée; associez lui la classe "liencache" qui contient essentiellement la déclaration "display:none", puis des déclarations décoratives (taille, cadre, fond de couleur) pour faire illusion; il contient la liste des liens, séparés par des retours. *Dans la feuille de style, déclarer .lien:hover .liencache{display:line-block} *Et c'est gagné: le survol du premier para entraine l'apparition du para caché, c'est à dire la liste déroulante de liens. Grand merci à toi, car j'étais informaticien assembleur dans les années 80, entretemps je m'étais fait larguer par tous ces trucs modernes, et grace à ton magnifique cours, j'ai remis le pied à l'étrier.

[@pascalgage2695]

Merci pour ces superbes TUTOS ! Vraiment !

[@nbuisness3984]

tu peux envoyer le code stp

[@LeosLearningAdventures]

très bon tutoriel, merci Maitre Pierre !

[@blockt347]

franchement... Super vidéo ! C'est génial !!!

[@andyberaharison]

Coucou, je fais exactement comme toi. J'ai également suivi plusieur tuto avant le tien mais toujours impossible de realiser la partie menu deroulante, vous pouvez savoir pourquoi ?

[@zakayadi1614]

pareil

[@andyberaharison]

Non non, le mien il s'affiche au bonne endroit, mais au moment où je veux mettre mon curseur dessus, elle disparait

[@abdramaneidriss7336]

merci vous etes un sauveur et continuer comca

[@pogo143]

tu m'as vraiment aidé merci beaucoup !!

[@pharouky]

body { font-family: verdana, sans-serif; margin: 0px; padding:0px; } nav > ul { margin: 0px; padding: 0px; } nav > ul > li { float: left; position: relative; } nav li { list-style-type: none; } .submenu { display: none; } nav li:hover .submenu { display: inline-block; position: absolute; top: 100%; left: 0px; padding: 0px; z-index: 1; } nav { position: fixed; width: 100%; background-color: grey; } nav > ul::after { content: ""; display: block; clear: both; } nav a { display: inline-block; text-decoration: none; font-weight: 500; } nav > ul > li > a { padding: 20px 30px; color: white; } .submenu li { border-bottom: 1px solid #ccc } .submenu li a { padding: 15px 30px; font-size: 13px; color: black; width: auto; } .Home:hover { background-color: green; border-top:5px solid black; } .Html5:hover { background-color: brown; border-top:5px solid black; } .Css3:hover { background-color: yellow; border-top:5px solid black; } .Javascript:hover { background-color: blue; border-top:5px solid black; } nav > ul >li:hover a { padding: 15px 30px 20px 30px; color: black; } .Home .submenu { background-color: orange; } .Html5 .submenu { background-color: red; } .Css3 .submenu { background-color: orange; } .Javascript .submenu { background-color: red; } .Home .submenu li:hover { background-color: grey; } .Html5 .submenu li:hover { background-color: grey; } .Css3 .submenu li:hover { background-color: grey; } .Javascript .submenu li:hover { background-color: grey; }

[@yasinkaya3976]

merci bcp

[@clementgirard3885]

bonjour. je me pose une question. Est ce que la balise nav est necessaire ? merci d'avance pour votre réponse. et aussi comment on fait pour créer un sous menu a 3 niveau tsp

[@houd_le_goat]

Clément Girard Salut, la balise nav n'est pas nécessaire physiquement mais est nécessaire lorsque que tu mets ton site en ligne car elle permet d'indiquer aux robots SEO de google que le contenu de nav est celui de la navbar de ton site. Bref, c'est une bonne habitude à prendre sur chacuns de tes sites et si tu veux savoir pourquoi, je te laisse le découvrir par toi même en fouillant sur le net : référencement naturel (SEO).

[@adnalebensaid7480]

Je dirai qu'elle est seulement nécessaire quand tu veux faire un menu de navigation c'est beaucoup plus simple d'ou les initiales nav de navigation en anglans et comme a dit Houdayfa c'est une bonne habitude à prendre en HTML

[@angeloniansi8091]

Vous êtes le meilleur

[@tecnomore7229]

Bonsoir cher ami je n' arrive pas a syncroniser html et CSS?

[@cousniseadam5362]

Bah il faut faire 2 fichier un fichier.html et un fichier.css

[@patchli]

C'est normal que quand je fais le float: left; j'ai tout le texte de ma page qui part à gauche ?

[@naciogomis7534]

bonjour je sais que la video date mais je suis en train de m'initier au codage et je suis tombé sur ces tutos qui sont en passant très bien fais mais je rencontre un problème que je n'arrive pas à resoudre lorsque je tape mon texte en css et que je veux le prévisualiser on ne me montre que ceux que je viens de taper et non pas le site j'ai tout revérifié mon fichier html pensant peut être mal linké ou oublié de fermer une balise mais rien je l'ai même tester sur jsbin et ça fonctionne je ne comprend pas.j'utilise Komodo édit une version gratuite je me dit peut être qu'il manque certaines fonctionnalités et qu'il faudrais que je passe à une version payante.Toute aide serait la bien venu merci d'avance

[@Filmsanalysis]

merci s'il vous plait Pierre jai deux questions la premiere est la suivante: pourquoi vous mettez nav>ul et dans des autres vous mettez nav li

[@sorybakaba8324]

nav>ul veut dire tout simplement ul qui est l'enfant direct de nav et nav li qui veut dire les li qui sont dans l'élément parent nav

[@curiositymonsieur674]

Bonjour, et merci pour vos tutos. J'essaie d'insérer un h1 dans la nav à gauche de la liste de liens mais le souci c'est que la liste de liens descend et je n'arrive pas à l'aligner à côté de mon h1. Une idée ? J'ai appliqué les propriétés CSS "display: inline-block; ainsi que vertical-align: top; sur le h1 rien n'y fait....

[@darsh3116]

est-il possible que des fonctions ne soient plus d'actualités ? J'ai l'impression d'avoir tout fait pareil mais le menu déroulant ne s'affiche pas.. :( Je n'ai pas du tout l'étape qu'on voit à 21:55 de la vidéo. Si je fais péter le .submenu{ display:none} je m'aperçois que mes sous menus existent bel et bien. J'en conclus que ca doit bloquer à l'affichage lorsqu'on passe dessus.. Pourtant j'ai bien ma class submenu et j'ai bien mit comme c'est écrit dans la vidéo : screen : zupimages.net/up/21/03/8h7b.jpg Si vous avez une astuce.. Je suis preneur. (les deux ## n'ont étés insérés que pour vérifier que j'avais mes sous menus, lorsque je les supprime, je n'ai plus que mon premier niveau du menu, pas les sous menus)

[@slash1222]

Salut Pierre, j'aimerais savoir comment faire pour centrer les onglets au milieu de la page

[@jjj-ho1kg]

bonjour je voudrez que ma bar avec les menu de navigation fasse tout la longueur?

[@professionalmeme1849]

Pk moi dans le nav dans background-color: white Sa marche pas

[@clementfourment6596]

tu as surement oublié un " ; ", probablement au "width: 100%;"

[@professionalmeme1849]

@@clementfourment6596 position: fixed; j'ai rajouter ca et sa a marcher

[@williambonneau1220]

Merci infiniment pour cette vidéo

[@edouardmorel125]

salut pour centrer le texte sur la bannière que faut il faire ?

[@LeFoireux]

Bonjour, j'ai une question à propos du web mais elle est hors sujet comparé à la vidéo désolé 🙂 Donc voilà j'ai fait un petit jeu codé en Python et je voudrais savoir comment on fait pour l'insérer sur mon site ?

[@florianbalthazard1567]

Bonjour, débutant dans le domaine je ne comprends pas pourquoi lorsque j'insère le code css suivant : nav{ width: 100px; background-color: #424558; } le menu ne reste plus sur la même ligne et repasse en mode colonne. Cela est la même chose sur chrome et sur microsoft edge. Merci pour votre aide

[@kaboreabdoulaye3842]

le meilleur des tuto

[@hocinehdd2677]

Excellent tuto, je te remercie beaucoup ^^

[@gbandagaouattara1874]

j'adore ce cours. merci a toi

[@ridialoulahiboromsam6434]

tuto clair et precis mais moi j'ai voulu créer un menu juste responsive dans lequel j'ai 8 argument le premier ce fixera totalement a gauche , les 7 autres totalement a droite avec le dernier qui sera un bouton.cependant j'ai de la difficulté a avoir cela.svp besoin d'aide

[@lexmega930]

Bonjour j'ai un problème je fais le menu déroulant sur notepad++ et quand j'écris les lignes de code pour faire dérouler le menu ça ne marche pas je suis perdu

[@daiselg2374]

Jusqu'à présent le cours html en 71 épisodes était parfait. Mais la, je fais cet exercice, et plus rien ne fonctionne...Plus moyen de centrer le menu, le truc des > ne fonctionne pas...

[@aylenos9402]

je n arrive pas a empecher la barre d en haut de descendre... quelqu'un peut il m aider...?

[@anonymoussaillon3677]

Comment je pourrai faire pour centrer les éléments du nav ?

[@itech40]

GÉNIALES TES VIDÉOS

[@adambougriene7213]

bonjour, je voudrais augmenter la taille du menu, comment faire ?

[@christinebetbeder6476]

Bonjour et merci pour ce super tuto ! Je rencontre juste un problème. Je ne comprends pas les codes du background-color pour l'onglet du haut => les RGBa (241, 211, 79, 0.15) Pourrait tu m'expliquer comment choisir les bons codes? As tu un site référence, avec les codes, à me conseiller stp? Merci d'avance..

[@Patriorche]

Merci beaucoup pour ce tuto. Malheureusement, le :hover ne fonctionne pas sous Android. Comment s'en sortir ?

[@vinsmoke134]

Salut , j'ai un petit problème avec la balises "background-color" les lettres s'écrivent bien dans la couleur que je souhaite mais le fond de ne se met pas en gris foncé comme il devrai le faire je ne comprend pas pourquoi ... help please mon css : pastebin.com/xFVSdNKw mon html : pastebin.com/RG3a80Sx

[@dark_w0lf96]

Bonjour je voulais savoir quel logiciel il utilise ??

[@amine-khodjamohsen2693]

Excellent tuto, par contre on ne trouve pas le script sur votre siteweb

[@dancekinghoseok4608]

AMINE-KHODJA Mohsen fait le toi meme non mais ho

[@kanteali7131]

superbe video !merci infiniment

[@soniagharsalli519]

Merci Pierre , Bravo

[@gmodalbissrp3862]

je te remerci pour c'est video je c"est que tu la sorti il y a longtemps mai croix moi que elle c'est bouctout merci encor ++

[@lachattedetonpereletrans6698]

apprend pas a coder apprend a écrire stp

[@yowshi5270]

@@lachattedetonpereletrans6698 apprends*

[@pepeemmanuelthea4874]

Merci vraiment Pierre

[@jeanrolandkei1664]

J'applique n'importe quel paramètre à en CSS, mes navigateurs n'affiche pas les modifications. Je travaille à partir de Komodo IDE 12 community.

[@Belvinard]

Bonjour Pierre. Merci pour ce cours particulièrement. Que Dieu vous bénisse. J'ai suivi le même cheminement que pour créer mon menu déroulant responsive mais le menu ne s'affiche pas les éléments ul ne s'affichent pas lorsque la case est coché. j'ai fait ceci : nav input[type="checkbox"] ~ul{ display : block} Svp aidez moi. Merci.

[@misterpoof3197]

quelle est la diferance entre nav li et nav > li svp

[@clemelec4803]

developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_descendant developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_enfant quand tu utilises > , seuls les classes enfant direct seront affectés, tandis que si tu met juste un espace, toutes les classes et sous classes enfants seront affectés

[@seakestrel9593]

je suis sous linux et ça ne marche pas l'alignement pouvez-vous m'aider ?

[@LaMinuteOM13]

Bonne vidéo je suis actuellement en formation dev, j'ai regarder quelques une de t'ai vdéo mais ya un petit soucis. J'utilise sublime text et quand je copie t'ai codage rien ne fonctionne mais quand je regarde un autre tuto d'une personne utilisant sublime text sa fonctionne !

[@TheAikidoka19]

Merci beaucoup pour ce tuto.

[@daienearraz471]

Génie. Mil merciiiii

[@romainfournier6909]

Bonjour, moi il me reste juste les points noirs à gauches des onglets/sous-onglets, si quelqu'un peut m'expliquer comment les retirer svp ?, merci d'avance

[@romainfournier6909]

je viens de trouver la réponse, pour ceux qui ont le meme probleme: j'ai mis "list-style: none" au lien de "list-style-type: none" à 11:20 dans tout mes blocs css, pas sur que ce soit le mieux mais ca marche, voila ;)

[@ahmedaljabre9455]

j'ai un problème avec la page Css avec les nav > ul > li elles ne s'affiche pas et le background ne s'affiche pas. si quelqu'un connait le problème il peut m'aider svp. merci

[@fragmeister]

Bonjour, j'ai suivi le tuto à la lettre mais j'ai pas le même résultat et je ne sais pas comment ça se fait.. Voici mon HTML : pastebin.com/LiLCf2z6 Voici mon CSS : pastebin.com/RYKMAquR Si tu pourrais me dire ce que j'ai fais de faux dans le code ce serait cool, Merci d'avance.

[@Hugo-ht8su]

Deja écris au lieu de

[@ellenikosellas3137]

Il ne faut pas ecrire mouahahah, une petite boutade :P

[@samossbeatzent7523]

hahahaha énorme tu m'as tué

[@tristanroy3416]

Salut tu referme pas des balise dans t'es sous menu, tu mes une mauvaise destination du style.css et il faut mettre voila ton code cours HTML et CSS HTML Cours complet HTML et CSS Référence des élénts HTML Rérence des attributs HTML Exemples et exercices CSS Cours complet HTML et CSS Réfénce des propriétés CSS Exemples et exercices Javascript Cours complet Javascript Exemples et exercices Contact

[@canondelatlas1660]

Je comprend pas le sous éléments After ici, son utilités

[@amrix10]

tu vas trop vite a mon gout mais j ai comprit merci

[@tariklancelot6748]

bonjour pierre, merci pour cette vidéo. Petit détail, j'ai l'impression que mon éditeur komodo ne reconnaît pas l'élément html . Je voudrais savoir comment l'intégrer, et si cela est possible d'ailleurs. Merci encore, j'ai appris des choses très intéressantes.

[@benjaminpernot6536]

Bonjour. J'ai suivi votre tutoriel et tout marche vraiment très bien. Cependant j'ai voulu mettre un sous-sous menu dans le sous menu mais quand je fais les mêmes opérations cela ne fonctionne pas. Puis-je vous montrer mon code afin que vous puissiez voir ou serait le problème ? Merci d'avance et super tutoriel.

[@fritzbertpierrepaul2806]

Merci pour ce bon tuto!!!!!

[@housseineh7677]

C'est quoi le nom de l'éditeur de texte que tu utilises?

[@jean-baptistewilfried7579]

komodo edit

[@AzDavai]

Merci beaucoup, super tuto

[@wagiegames7055]

cc super tuto mais j'ai une question ? comment le déplacer ( si on veut le placer sous une image) merci pour ta réponse

[@imam5077]

tu ke deplace avec les pixel

[@dancekinghoseok4608]

WagieGames

[@wagiegames7055]

Kaneki Ken oui ?

[@dancekinghoseok4608]

WagieGames lache moi

[@anpyre3735]

Quand Pierre efface tout j'ai envie de crier : nooooooooooooooooooon ! :O !!

[@leonl4051]

CSS Cours de francais cours d'allemand cours d'englais je vous savoir pourquoi dans cette ligne ..il m'afiche en rougle l"element class c est comme si il y a une erreur ..merci de m'aider

[@jimcosey.338]

c'est quoi ton logiciel pour coder

[@mackensonreginaldmichel399]

J'ai toujours du mal a cibler les sous-menus. Aidez-moi svp. Merci

[@misterpoof3197]

salut jamairais savoir quelle est lutilite de nav ici et merci c un tres tres bon tuto pour moi qui debute !

[@sorybakaba8324]

C'est un conteneur tout simplement tu aurais pu utiliser div à la place de nav puisque ils sont tous de type bloc mais pour les menus je te conseille souvent d'utiliser les nav

[@athancokonan98]

salut je n'arrive pas à télécharger vos tutos

[@ayedmehdy2545]

Merci bien Pierre ;)

[@mrnekoleconquerant6612]

c bien tout ça mais il aura fallu peut être faire la fin du programme comme par exemple quand on click sur HTLM ça explique, quand on cliques sur les sous catégories il y est le texte c pareil En gros, je dois trouver l'autre moitié du code moi même...

[@Monsteryoutube]

Salut tu as trouvé la suite du programme j'en ai actuellement besoin je suis en train de développer une page web Msi et pour le menu il me faudrait le reste du programme

[@dvs6149]

C'est quoi ton éditeur de texte?

[@oou2219]

komodo le sien

[@yanickobro477]

salu pierre et merci pour ce que tu fais c'est vraiment cool bon j'ai réussi le menu le problème est que mon sous menu affiche en dessous de ma bannière ,la haut j'ai mis mon header ou se trouve mon menu et en dessous de mon header j'ai mis ma bannière .la bannière cache mon sous menu aide moi

[@christopherg1457]

T'es un bon

[@ilyeshabki]

c'est un très bon tuto mais pour centrer les sections c'est comment en html j'ai mis qui englobe tous le nav et en css .centrer-menu{display: table; margin: 0 auto} comme le précédent tuto ca centre le menu mais ca le rétréci vous pouvez m'aider bonne continuation

[@ailig156]

Ne marche pas pour moi

[@zotiko2031]

Bonjour, Je voudrai savoir comment faire un MENU DEROULANT à partir d'une image au lieu d'un texte. Le menu doit être fermé et s'ouvrir quand on clique sur l'image. merci d'avance

[@giressem.kifouani9170]

Merci pour ce tuto

[@papymarvic]

Génial !... Grace à votre vidéo j'ai réussi à faire mon propre menu déroulant...et le mettre à "ma sauce". J'ai un petit soucis pour agrandir la police, comment fait-on ??,

[@storageinfo20]

Merci pour ce tuto. cela fait 10 jours que je me tire les cheveux car mon sous menu ne s'affiché pas totalement. Z-index m'a éclairer.

[@ogden_toto]

Le code source? un jour peut-être??

[@samiyahyabey4104]

4:17

[@vincentroi4464]

Merci beaucoup

[@antoinedav6183]

Salut très bon tuto mais pourrai tu faire un exemple de sous-sous-categorie?

[@dancekinghoseok4608]

Antoine Dav meme chose