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

Поделиться
HTML-код
  • Опубликовано: 3 дек 2024

Комментарии • 316

  • @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 ?

  • @williamjr5826
    @williamjr5826 Год назад +20

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

  • @jeanmoncher2661
    @jeanmoncher2661 Год назад +8

    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.

  • @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.

  • @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 .

  • @Tarik.lifestyle
    @Tarik.lifestyle 8 месяцев назад +2

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

  • @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 !

  • @zafer2562
    @zafer2562 2 года назад +8

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

  • @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 2 месяца назад +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 !

  • @rickwarel9935
    @rickwarel9935 4 месяца назад

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

  • @alexandrecampan3728
    @alexandrecampan3728 2 года назад +1

    Le retour de Live Code !!

    • @LiveCodeofficiel
      @LiveCodeofficiel  2 года назад

      Ça faisait un petit moment en effet 😌

    • @melissa8560
      @melissa8560 9 месяцев назад

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

  • @rhaadaamanthe_3727
    @rhaadaamanthe_3727 20 часов назад

    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

  • @chasseur7360
    @chasseur7360 2 года назад +6

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

  • @bobhakugei471
    @bobhakugei471 2 года назад +2

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

  • @Soukouna4252
    @Soukouna4252 2 года назад +3

    Ravi de te revoir mec et merci pour le tuto

  • @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

  • @JVMMY7
    @JVMMY7 2 года назад +1

    Ça faisait longtemps, content de te revoir 🙂

  • @tayebk6610
    @tayebk6610 11 месяцев назад

    un tuto simple et efficace comme ont les aime merci

  • @elde4975
    @elde4975 2 года назад +1

    Everything works perfectly

  • @law1928
    @law1928 2 года назад +2

    + de vidéo comme ça !

  • @justetk
    @justetk 2 года назад +1

    You have been a great help. Hello from Azerbaijan.

  • @cyriledouard9848
    @cyriledouard9848 2 года назад +1

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

  • @OnSakeez
    @OnSakeez 2 года назад +2

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

  • @domeshow
    @domeshow 2 года назад +2

    My Boss is de retour 😁

  • @franckngoubounkou9930
    @franckngoubounkou9930 8 месяцев назад

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

  • @SAMURAI232-u3q
    @SAMURAI232-u3q 8 месяцев назад

    best video on youtube so far !!!

  • @christophemillot5541
    @christophemillot5541 2 года назад +1

    Merci beaucoup. Je m’abonne direct !

  • @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

  • @BaNdong-q2o
    @BaNdong-q2o 5 месяцев назад

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

  • @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

  • @hiimifranco2840
    @hiimifranco2840 Год назад

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

  • @kevinnsapo8711
    @kevinnsapo8711 2 года назад +1

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

  • @mikedube
    @mikedube 2 года назад +1

    wow ! vraiment beau tuto !

  • @YASSINE_LRCS
    @YASSINE_LRCS Год назад +1

    gg legend je te jure c'est colle

  • @feelingnether158
    @feelingnether158 Год назад +1

    parfait merci beaucoup bien expliqué et très claire

  • @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);

  • @abdelkebirelguardi
    @abdelkebirelguardi Год назад +1

    Un tuto bien expliqué

  • @Squ4Moony
    @Squ4Moony Год назад

    Un tuto superbe ! Merci mec

  • @lawisgui
    @lawisgui Год назад

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

  • @rhayannejoseegangoua1525
    @rhayannejoseegangoua1525 Год назад

    Magnifique tutoriels

  • @Romixo_
    @Romixo_ 2 года назад +2

    Merci BG !!!

  • @SoumayaMoumni
    @SoumayaMoumni Месяц назад

    Merci beaucoup bonne explication❤

  • @Alex_3D
    @Alex_3D 2 года назад +1

    Ouais l'boss 👊🔥

  • @loshmy0215
    @loshmy0215 2 года назад +1

    Merci,respect!

  • @juleszanardi1140
    @juleszanardi1140 2 года назад +1

    Merci beaucoup, super tuto

  • @Blackismo
    @Blackismo Год назад +1

    merci pour cette formation tres instructif😀🙌

  • @young_bounty_8752
    @young_bounty_8752 Год назад

    Meilleur tuto ever. Merci pour cette magnifique vidéo

  • @mohamedamin2329
    @mohamedamin2329 2 года назад +1

    very talented teacher - cheers

  • @riadchoukairi1895
    @riadchoukairi1895 Год назад +1

    Merci !

  • @alesmazur7640
    @alesmazur7640 Год назад +1

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

  • @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

  • @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 !

  • @karbocrds
    @karbocrds Год назад

    Video incroyable!! Pourrais tu faire plus de tuto?

  • @daniel_youtubechannel8717
    @daniel_youtubechannel8717 Год назад +1

    Trop cool 👍

  • @lylypoupou5505
    @lylypoupou5505 2 года назад +1

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

  • @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"

  • @juvfried1584
    @juvfried1584 6 месяцев назад +1

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

  • @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

  • @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? RUclips recommendation ? Google ?😅

  • @mezhgansaadat3145
    @mezhgansaadat3145 Год назад

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

  • @belhadadhicham6080
    @belhadadhicham6080 2 года назад +1

    mercii

  • @yumikolikeit7782
    @yumikolikeit7782 Год назад

    Carrément top.... merci

  • @fur02687
    @fur02687 Год назад

    Limpide ! Merci

  • @theinsanebustle
    @theinsanebustle Год назад

    Language nahi samajh aayi but content pura dekh ke Sikh gaya

  • @serge-olivierouattara6932
    @serge-olivierouattara6932 2 года назад +1

    help, I'm definitely starting to get the hang of it. Just thought I'd share.

  • @hanuunshe
    @hanuunshe Год назад

    merci beaucoup

  • @KushWolf
    @KushWolf Год назад

    Très utile merci beaucoup pour le tuto ^^

  • @yeskouyesko3079
    @yeskouyesko3079 Год назад

    Merci infiniment

  • @SenhorNico
    @SenhorNico Год назад +1

    Top, mesmo eu não entendendo o idioma, consegui acompanhar e fazer o menu com sucesso.
    Top, even though I don't understand the language, I was able to follow and make the menu successfully.

  • @alexandernassar6619
    @alexandernassar6619 2 года назад +1

    Really amazing. Thanks

  • @ismailiakmalsaid3572
    @ismailiakmalsaid3572 11 месяцев назад

    Trop génial

  • @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

  • @yayaismailousmaneyaya4885
    @yayaismailousmaneyaya4885 2 года назад +1

    Super!

  • @Music-fg5dd
    @Music-fg5dd Год назад

    Ca régale

  • @Emile-r9o
    @Emile-r9o Месяц назад

    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 !

  • @kprirusse4641
    @kprirusse4641 2 года назад +1

    it work on my pc thx bro vеry much

  • @darknessssssssssssse
    @darknessssssssssssse 2 года назад +1

    great tutorial man. I'm Nice tutorialgh af and I understood tNice tutorials so well I was just hype to get to making s

  • @betelgeuse6388
    @betelgeuse6388 2 года назад +1

    Thank you so much for this tutorial.

  • @leviswizy3077
    @leviswizy3077 2 года назад +1

    Nice tutorial-5 Bro!

  • @zinoua9884
    @zinoua9884 Год назад +2

    Fantastic

  • @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,...

  • @user-xh7xw9kp6j
    @user-xh7xw9kp6j 2 года назад +1

    Top merci

  • @VictoriaDubois-ic8ws
    @VictoriaDubois-ic8ws Год назад +1

    merciiiiiiiiiiiiiii

  • @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 ?

  • @ziadhamri
    @ziadhamri Год назад +1

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

  • @DeezPure
    @DeezPure Год назад +8

    très bien expliqué mais la prochaine fois va moins vite, ça m’énerve de m’arrêter toutes les 5 secondes et j’pense pas être le seul, tu nous fais un tuto pas un speedrun

  • @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.

  • @tt4m
    @tt4m Год назад

    شكرا❤

  • @mortalanzang7567
    @mortalanzang7567 Год назад

    👍Good job Bro

  • @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

  • @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

  • @Daniel_Agostini
    @Daniel_Agostini Год назад

    mio padre🔥🔥

  • @yahyarechag8540
    @yahyarechag8540 Год назад

    Thank you !

  • @SlayzGf
    @SlayzGf 2 года назад +1

    Thanks