Faire une Navbar Responsive en HTML & CSS - Expliqué de A à Z avec Menu Hamburger

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 ธ.ค. 2024

ความคิดเห็น • 318

  • @LiveCodeofficiel
    @LiveCodeofficiel  2 ปีที่แล้ว +41

    Les ressources de la vidéo : formation.live-code.fr/Ressources-Navbar
    Le code JS pour le menu : pastebin.com/KtXmqHCU

    • @farelandjandji8558
      @farelandjandji8558 2 ปีที่แล้ว

      bonjour comment je peux avoir le lien

    • @farelandjandji8558
      @farelandjandji8558 2 ปีที่แล้ว

      bonjour comment je peux avoir le lien

    • @amandinehoudbert9554
      @amandinehoudbert9554 2 ปีที่แล้ว +1

      C'est quoi le code de déchiffrement?

    • @GVAC-MUSIC
      @GVAC-MUSIC 2 ปีที่แล้ว

      besoin du lien que faire

    • @jmerlouthekson6638
      @jmerlouthekson6638 ปีที่แล้ว

      Bonjour .
      Je suis nouveau dans le domaine informatique . comment tu fais pour faire sortir la console du développeur ? Pour insérer le menu ?

  • @Saya.misri_aussi-tha01
    @Saya.misri_aussi-tha01 หลายเดือนก่อน +2

    J'ai adoré, merci, je vais m'en servir pour ma première soutenance dans notre projet à trois. Encore merci.

  • @jeanmoncher2661
    @jeanmoncher2661 ปีที่แล้ว +9

    Un tuto bien expliqué et commenté du début jusqu'à la fin; ce qui permet aux débutants et aux seniors de mieux comprendre le concept en arrière de ce menu.

  • @Tarik.lifestyle
    @Tarik.lifestyle 9 หลายเดือนก่อน +2

    Franchement je viens de tomber sur ton profil je trouve que ta vidéo explicative est vraiment intéressante, merci beaucoup.👍

  • @williamjr5826
    @williamjr5826 ปีที่แล้ว +20

    Un tuto au top ! Quand on a quelques bonnes bases, on comprend relativement rapidement comment tout s'imbrique. Merci !

  • @user-lb1gt6tu9l
    @user-lb1gt6tu9l ปีที่แล้ว +11

    Je m'intéresse à la création Web suite à un tp dans mon école.
    Et je dois dire que t le meilleur tuto sur lequel je suis tombé et de très loin.
    Merci pour ton temps et ton expertise.

  • @OutongOutong-zh3zw
    @OutongOutong-zh3zw 10 หลายเดือนก่อน +1

    Frerot, franchement, t'es le best. J'avais téléchargé la vidéo pour pouvoir le réaliser. Mais à la fin, je me dis que ne pas laisser un like et un commentaire serait un péché. Force à toi .

  • @zafer2562
    @zafer2562 2 ปีที่แล้ว +8

    Merci tu me sauves la vie mon gars , je n'arrivais pas a faire se truc trop con :)

  • @lempereurgeek3172
    @lempereurgeek3172 2 ปีที่แล้ว +5

    franchement le premier tuto sur des navbar responsives que je trouve simple, pratique et fonctionnel ! merci beaucoup !

  • @Judaak_
    @Judaak_ ปีที่แล้ว +1

    Après de nombreuses recherches, j'ai enfin trouvé parfaitement ce que je cherchais ! Tu me sauves la vie Mr, merci beaucoup ! Keep going !

  • @alloaluile3608
    @alloaluile3608 2 ปีที่แล้ว +2

    went through when I first started video editing, now it's taking a whole new switch and learning soft will only boost my courage for the

  • @amoweb2409
    @amoweb2409 ปีที่แล้ว +2

    incroyable j'ai galéré à l'adapter à mon site mais une fois bien compris ça marche super bien

  • @pastiille7467
    @pastiille7467 ปีที่แล้ว +2

    salut, je suis en pleine formation et tes vidéos m'aide beaucoup meerci

  • @XeOneDash
    @XeOneDash 3 หลายเดือนก่อน +2

    Merci, c'est très concis et bien expliqué.

  • @Endermax_
    @Endermax_ ปีที่แล้ว +1

    merci pour la vidéo grâce à toi j'ai compris comment fonctionne le responsive !

  • @rhaadaamanthe_3727
    @rhaadaamanthe_3727 15 วันที่ผ่านมา

    C'est le premier tuto de ta part que je regarde mais t'es déjà le goat ! D'ailleurs je trouve pas mais est-ce que tu auras fais une vidéo de présentation de tes extensions ? Elles ont l'air super

  • @rickwarel9935
    @rickwarel9935 5 หลายเดือนก่อน

    merci infiniment car grâce a tes vidéos j'ai compris le responsive en HTML-CSS.

  • @bobhakugei471
    @bobhakugei471 2 ปีที่แล้ว +2

    vraiment cool tes videos , je suis étudiant en premiere année . tes explications sont claires ....MERCI !!!

  • @franckngoubounkou9930
    @franckngoubounkou9930 9 หลายเดือนก่อน

    😊Bien expliqué ça me décourage même de faire du css tuto car y a des goat comme toi .

  • @SAMURAI232-u3q
    @SAMURAI232-u3q 9 หลายเดือนก่อน

    best video on youtube so far !!!

  • @chasseur7360
    @chasseur7360 2 ปีที่แล้ว +6

    Excellente chaîne pour apprendre et se perfectionner au code ! Merci !

  • @law1928
    @law1928 2 ปีที่แล้ว +2

    + de vidéo comme ça !

  • @justetk
    @justetk 2 ปีที่แล้ว +1

    You have been a great help. Hello from Azerbaijan.

  • @JVMMY7
    @JVMMY7 2 ปีที่แล้ว +1

    Ça faisait longtemps, content de te revoir 🙂

  • @OnSakeez
    @OnSakeez 2 ปีที่แล้ว +2

    très bonne vidéo avec très gros glow up niveau montage, motion design !

  • @Minia-Elychat
    @Minia-Elychat 2 ปีที่แล้ว +7

    Salut et encore merci pour cette vidéo très intéressantes j'aime bien ton style de vidéo et de contenue il permet d'évoluer et de mieux comprendre certaines choses. :D

  • @alexandrecampan3728
    @alexandrecampan3728 2 ปีที่แล้ว +1

    Le retour de Live Code !!

    • @LiveCodeofficiel
      @LiveCodeofficiel  2 ปีที่แล้ว

      Ça faisait un petit moment en effet 😌

    • @melissa8560
      @melissa8560 10 หลายเดือนก่อน

      @@LiveCodeofficielet on attend ton retour aujourd’hui !!

  • @christophemillot5541
    @christophemillot5541 2 ปีที่แล้ว +1

    Merci beaucoup. Je m’abonne direct !

  • @cyriledouard9848
    @cyriledouard9848 2 ปีที่แล้ว +1

    merci pour cette video une fois de plus simple a comprendre et a reproduire pour des projets

  • @hiimifranco2840
    @hiimifranco2840 ปีที่แล้ว

    Thank you, i dont understand nothing about french but i got all the message! Hi from Venezuela buddy!

  • @tayebk6610
    @tayebk6610 ปีที่แล้ว

    un tuto simple et efficace comme ont les aime merci

  • @Soukouna4252
    @Soukouna4252 2 ปีที่แล้ว +3

    Ravi de te revoir mec et merci pour le tuto

  • @BaNdong-q2o
    @BaNdong-q2o 5 หลายเดือนก่อน

    Bonjour et merci beaucoups j'ai réussi à le faire grâce à votre tuto .

  • @maydew
    @maydew 2 ปีที่แล้ว +4

    Merci beaucoup pour tes explications claires et précises ^^

    • @carabistouille_
      @carabistouille_ 2 ปีที่แล้ว +3

      T'as réussi à reproduire le code ?

    • @Romixo_
      @Romixo_ 2 ปีที่แล้ว

      @@carabistouille_ Perso Yes

  • @YASSINE_LRCS
    @YASSINE_LRCS ปีที่แล้ว +1

    gg legend je te jure c'est colle

  • @cyrice1890
    @cyrice1890 2 ปีที่แล้ว +1

    Bonjour, merci beaucoup pour cette vidéo. J’ai étudié et reproduire la même chose c’est magnifique. Seulement j’ai essayé d’avancer en y ajoutant des paragraphes et autres. Enfaite quand on est sur mode pc tout va bien mais en mode téléphone les écritures de paragraphe sont superposés au contenu du menu principal ! Vraiment je me sent limité. Merci beaucoup

  • @domeshow
    @domeshow 2 ปีที่แล้ว +2

    My Boss is de retour 😁

  • @nanok-mornigstar
    @nanok-mornigstar 2 ปีที่แล้ว +1

    when you’re in the channel rack, click on gms to open up the gms nu, in the light blue screen on the top left look where it says

  • @mikedube
    @mikedube 2 ปีที่แล้ว +1

    wow ! vraiment beau tuto !

  • @Alex_3D
    @Alex_3D 2 ปีที่แล้ว +1

    Ouais l'boss 👊🔥

  • @Blackismo
    @Blackismo ปีที่แล้ว +1

    merci pour cette formation tres instructif😀🙌

  • @kevinnsapo8711
    @kevinnsapo8711 2 ปีที่แล้ว +1

    très bien expliquer ca m'a beaucoup aidée merci !!

  • @feelingnether158
    @feelingnether158 ปีที่แล้ว +1

    parfait merci beaucoup bien expliqué et très claire

  • @loshmy0215
    @loshmy0215 2 ปีที่แล้ว +1

    Merci,respect!

  • @SoumayaMoumni
    @SoumayaMoumni หลายเดือนก่อน

    Merci beaucoup bonne explication❤

  • @mohamedamin2329
    @mohamedamin2329 2 ปีที่แล้ว +1

    very talented teacher - cheers

  • @lawisgui
    @lawisgui ปีที่แล้ว

    Super vidéo, elle m'a bien aidée merci chef

  • @Romixo_
    @Romixo_ 2 ปีที่แล้ว +2

    J'ai une question, si on veut faire commme pour ici : 9:25 . J'ai envie que quand un onglet est affiché par exemple support bah je veux qu'il soit rouge etc etc
    Merci d'avance !

    • @LiveCodeofficiel
      @LiveCodeofficiel  2 ปีที่แล้ว

      Pour faire ça il suffit d'un petit script en JS qui ajoute la class "Active" au bon onglet quand la section en question est dans le viewport, tu pourras trouver tout ce qu'il te faut sur internet avec cette recherche : "Howto: add class when section is in viewport"

  • @omegaaxel5759
    @omegaaxel5759 ปีที่แล้ว

    merci beaucoup j'ai tellement appris sur cette videos si tu peux en faire sur les flexbox ça va vraiment m'aider merci !

  • @abdelkebirelguardi
    @abdelkebirelguardi ปีที่แล้ว +1

    Un tuto bien expliqué

  • @Romixo_
    @Romixo_ 2 ปีที่แล้ว +2

    Merci BG !!!

  • @TeddyWrestling
    @TeddyWrestling 2 ปีที่แล้ว +2

    Est-il possible de faire une suite de ce tuto en monrant comment faire pour implementer du texte au dessous de cette navbar et sur l'image en background

  • @juvfried1584
    @juvfried1584 6 หลายเดือนก่อน +1

    Bonjour, super tuto..
    Puis-je avoir le code CSS & HTML ?

  • @ivanzq21
    @ivanzq21 ปีที่แล้ว +1

    en 15:40 ca marchais pas, (sur Safari) il fauta ajouter le -webkit- alors il est comme ca par example:
    -webkit-backdrop-filter: blur(1.8px);

  • @glodikalala8919
    @glodikalala8919 ปีที่แล้ว +5

    Merci pour la vidéo. Ce ne serait pas mieux de mettre à notre disposition le code CSS et HTML dans la description ? Car j'ai des difficultés au niveau du mobile-menu.

    • @jonathanzadi9571
      @jonathanzadi9571 ปีที่แล้ว

      rajoute des ";" après les variables dans le script

  • @rhayannejoseegangoua1525
    @rhayannejoseegangoua1525 ปีที่แล้ว

    Magnifique tutoriels

  • @karbocrds
    @karbocrds ปีที่แล้ว

    Video incroyable!! Pourrais tu faire plus de tuto?

  • @Emile-r9o
    @Emile-r9o 2 หลายเดือนก่อน

    Merci pour cette vidéo très utile et bien expliquée, comment pourrait t on adapter ce menu pour en faire un menu déroulant avec des sous catégories ? Merci d'avance !

  • @Squ4Moony
    @Squ4Moony ปีที่แล้ว

    Un tuto superbe ! Merci mec

  • @elhadjtuto1644
    @elhadjtuto1644 9 วันที่ผ่านมา

    superbe video merci bcp

  • @alesmazur7640
    @alesmazur7640 ปีที่แล้ว +1

    I dont understand france but i like you video! Good luck! cute tutorial

  • @Manu_Gallagher
    @Manu_Gallagher 9 วันที่ผ่านมา

    Merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii, bien soigneee

  • @juleszanardi1140
    @juleszanardi1140 2 ปีที่แล้ว +1

    Merci beaucoup, super tuto

  • @lylypoupou5505
    @lylypoupou5505 2 ปีที่แล้ว +1

    very helpful and simple man.. i tNice tutorialnk i'm gonna see all your videos

  • @elde4975
    @elde4975 2 ปีที่แล้ว +1

    Everything works perfectly

  • @rhayannejoseegangoua1525
    @rhayannejoseegangoua1525 ปีที่แล้ว +1

    Bonjour et merci pour cette vidéo
    Que faire lorsque le mobile menu fonctionne bien mais lorsqu'on essaie sur un télephonne ça n'apparaît plus ?

  • @riadchoukairi1895
    @riadchoukairi1895 2 ปีที่แล้ว +1

    Merci !

  • @skewridg356
    @skewridg356 2 ปีที่แล้ว +1

    Salut LiveCode Merci pour tout , très bien expliqué mais mon image ne veut pas se mettre en sous les boutons de la navbar , elle se met plus bas sur la page meme apres vérifications du code

  • @nightblood1253
    @nightblood1253 2 ปีที่แล้ว +3

    bien explique bravo a toi si tu peux faire une video ou tu crerai un portfolio responsive

    • @LiveCodeofficiel
      @LiveCodeofficiel  2 ปีที่แล้ว +2

      Peut être pas un portfolio car c'est l'un des projets que je créer dans ma formation mais je vais voir ce que je peux faire. Je pense peut être plus me tourner vers des vidéos moins longues (pas des vidéos de 1h-2h comme avant) mais plus vers des vidéos comme j'ai pu faire sur ma chaine ces derniers temps.

  • @assiabensaada1852
    @assiabensaada1852 ปีที่แล้ว

    merci bcp pour la vidéo j'avais besoin de savoir comment mettre le background color en transparent et la je comprends mieux merci bcccpppp. Est t-il possible de mettre des vidéos avec Bootstrap svp?

  • @oliverparis7703
    @oliverparis7703 2 ปีที่แล้ว +1

    Salut Livecode, dis moi, tes ressources que tu partages, il y a juste le JS et 2 imgsdans le rar... mais ou est donc passer le code ? xD tu peux les mettre à dispo stp ?
    Merci

  • @young_bounty_8752
    @young_bounty_8752 ปีที่แล้ว

    Meilleur tuto ever. Merci pour cette magnifique vidéo

  • @daniel_youtubechannel8717
    @daniel_youtubechannel8717 ปีที่แล้ว +1

    Trop cool 👍

  • @NerdjesSouici
    @NerdjesSouici 7 หลายเดือนก่อน +1

    please comment ouvrir le fichier de programme!

  • @adriendonnadieux8548
    @adriendonnadieux8548 2 ปีที่แล้ว +6

    Salut, super vidéo ! J'ai tout compris 😁
    Il ne serait pas mieux de mettre des % au lieu des px afin que ça puisse être réellement responsive entre tout les types d'écrans ?
    Encore merci 😉✌️

    • @LiveCodeofficiel
      @LiveCodeofficiel  2 ปีที่แล้ว

      Hello, c'est pas forcément nécessaire car on utilise concrètement les PX pour positionner le menu hamburger que sur format mobile donc pas réellement besoin de faire en sorte qu'il s'adapte pour des écrans plus grands

  • @trgiahuy1874
    @trgiahuy1874 2 ปีที่แล้ว +1

    thank you man although i didnt understand such a word you said haha. btw the code has worked so thank you

    • @LiveCodeofficiel
      @LiveCodeofficiel  2 ปีที่แล้ว

      Thanks aha, how did you find my video if you don't speak French? TH-cam recommendation ? Google ?😅

  • @yumikolikeit7782
    @yumikolikeit7782 ปีที่แล้ว

    Carrément top.... merci

  • @belhadadhicham6080
    @belhadadhicham6080 2 ปีที่แล้ว +1

    mercii

  • @leviswizy3077
    @leviswizy3077 2 ปีที่แล้ว +1

    Nice tutorial-5 Bro!

  • @mortalanzang7567
    @mortalanzang7567 ปีที่แล้ว

    👍Good job Bro

  • @smart7760
    @smart7760 ปีที่แล้ว

    Merci beaucoup ❤ pour la vidéo.
    J'ai envie de faire une navbar responsive comme ça, mais que l'on clique sur une classe de la NB que sa affiche des photos. Peux-tu m'aider 😅

  • @fur02687
    @fur02687 ปีที่แล้ว

    Limpide ! Merci

  • @noahlegras2002
    @noahlegras2002 ปีที่แล้ว

    Excellent tutoriel. Sur cette meme base, ca serait possible d'expliquer comment faire un menu déroulant ? Quand je passe sur le support par exemple, que des sous parties s'affiche. Merci :)

  • @Adimarcel2006
    @Adimarcel2006 ปีที่แล้ว +1

    salut ! je n'arrive pas à inclure "@media screen and (max-width: 900px) { }" dans mon fichier .css ( il me le marque comme erreur). merci d'avance !

  • @alexandernassar6619
    @alexandernassar6619 2 ปีที่แล้ว +1

    Really amazing. Thanks

  • @kprirusse4641
    @kprirusse4641 2 ปีที่แล้ว +1

    it work on my pc thx bro vеry much

  • @hanuunshe
    @hanuunshe ปีที่แล้ว

    merci beaucoup

  • @borderline2745
    @borderline2745 2 ปีที่แล้ว +1

    Excellente vidéo. A la fin le centrage de Adventure il y a pas moyen de faire mieux que avec un top:40px peut-être avec un vertical align middle ?

    • @LiveCodeofficiel
      @LiveCodeofficiel  2 ปีที่แล้ว

      Tu peux oui mais ça ne changera presque rien car la taille de ta navbar au final restera toujours la même en hauteur. Par contre c'est mieux un vertical align si jamais tu comptes redimensionner ta navbar au scroll pour qu'elle prenne moins de place oui

  • @dlooz7058
    @dlooz7058 11 หลายเดือนก่อน

    C est quoi ton logiciel de développement si visuel studio code quel extension

  • @MichelMambuku
    @MichelMambuku ปีที่แล้ว

    Salut, je suis vraiment satisfait de cette vidéo . Cependant, je vous conseillerais plutôt d'agrandir un peu la taille de votre écran car j'ai eu par la suite du mal à voir certains codes.
    Donc,...

  • @betelgeuse6388
    @betelgeuse6388 2 ปีที่แล้ว +1

    Thank you so much for this tutorial.

  • @ImMr.Muffin
    @ImMr.Muffin ปีที่แล้ว

    Bonjour, quel logiciel tu utilises à 7:59 pour prendre les mesures ? Est-ce qu'il est payant ? Si oui, en existe t-il des gratuits ? J'en voit que des payants :/
    Merci d'avance !

    • @buckdanny1588
      @buckdanny1588 10 หลายเดือนก่อน

      C'est un sélecteur de pixels
      Tu en as des gratuits

  • @ziadhamri
    @ziadhamri ปีที่แล้ว +1

    Heee frérot ca fait longtemps que t'avais publie une nouvelle vidéo

    • @LiveCodeofficiel
      @LiveCodeofficiel  ปีที่แล้ว +1

      C'est vrai 🙏😅

    • @ziadhamri
      @ziadhamri ปีที่แล้ว

      @@LiveCodeofficiel mais t’attends quoi haha?

  • @mezhgansaadat3145
    @mezhgansaadat3145 ปีที่แล้ว

    I really like how you did work on this responsive Navbar . Can you make such a great video in English too?

  • @Johnnystar973
    @Johnnystar973 ปีที่แล้ว

    Tuto au top !
    J'ai commencé à coder il y à vraiment pas longtemps,
    Je suis toute tes étapes mais va savoir pourquoi le Blur ne s'applique pas du tout...
    Si jamais tu as une idée du pourquoi ? (J'ai tout mis exactement comme toi et au même endroit)

  • @AndryFushicho
    @AndryFushicho 2 ปีที่แล้ว +2

    Bonjour, superbe vidéo, clair et simple ! Serait-il possible de faire une vidéo nav responsive mais avec un bouton recherche et un bouton connexion en plus? J'avous que je trouve ça super compliqué . Sinon c'est top !

    • @LiveCodeofficiel
      @LiveCodeofficiel  2 ปีที่แล้ว +1

      Ce n'est pas très compliqué pour ajouter un bouton de connexion, il suffit de styliser une balise avec du CSS, par contre pour qu'il fonctionne réellement et que l'on puisse accéder à un espace dédié à son compte il faut se pencher sur le backend, ce que je ne fais pas. 👍

    • @AndryFushicho
      @AndryFushicho 2 ปีที่แล้ว

      @@LiveCodeofficiel Oui je comprends pour le backend, ce n'est pas un problème. C'est juste que quand je veux ajouter un bouton recherche et connexion, j'utilise space around, et à ce moment le responsive se casse la figure 😂 parce que j'ai directement un logo avec une dimension précise je pense. Mais je vois plus où moins le truc. Merci encore

  • @uikielle
    @uikielle 2 ปีที่แล้ว +1

    Très bonne vidéo!
    Quel est ta playlist des musiques de fond ?

    • @LiveCodeofficiel
      @LiveCodeofficiel  2 ปีที่แล้ว

      Très bonne question, à chaque fois je prends des musiques libres de droits un peu aléatoirement sur des sites avec comme thème "Lofi / Chill Beat"😅

  • @damienibi-mossot
    @damienibi-mossot 3 หลายเดือนก่อน

    salut a toi le codeur ca va faire déja plus de 2 ans et demi que je suis tes tutos qui sont très instructif mais je ne suis toujours pas abonné parceque je voudrais que tu me reponde ,comment a tu apris toutes ces propriétés , ces balises et autres ,dans une école ?

  • @ismailiakmalsaid3572
    @ismailiakmalsaid3572 ปีที่แล้ว

    Trop génial

  • @VOLT-www
    @VOLT-www 2 ปีที่แล้ว +1

    Super tuto merci beaucoup ! j'ai une question, comment est ce qu'en cliquant sur support par exemple je peut acceder a une autre page svp ?