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

Подписаться 18 тыс.

Просмотров 318 тыс.

50% 1

🎁 Rejoindre la formation offerte : bit.ly/formation-offerte-live...
👑 Aller plus loin avec la formation complète : bit.ly/formation-complete-liv...
▬▬▬▬▬ Ressources de la vidéo à télécharger ▬▬▬▬▬
Les ressources de la vidéo : bit.ly/3panecB (Si le lien ne fonctionne pas, passe par celui-ci : formation.live-code.fr/Ressou...)
Le code JS pour le menu : pastebin.com/KtXmqHCU
▬▬▬▬▬ Réseaux sociaux & contenu exclusif ▬▬▬▬▬
⭕️ TikTok : @Livecode_
⭕️ Instagram : @Livecode_
👉🏼 Abonne-toi pour plus de contenu chaque semaines !
👉🏼 Éditeur de code utilisé : Visual Studio Code
👉🏼 Outil utilisé pour prendre des mesures : GreenShot
▬▬▬ Sommaire ▬▬▬
0:00 | Introduction
1:21 | On setup le projet
3:59 | On créer la Navbar !
9:25 | On s'occupe du reponsive !
21:09 | Outro - N'oublie pas de t'abonner

Опубликовано:

14 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 302

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

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

@farelandjandji8558 Год назад

bonjour comment je peux avoir le lien

@farelandjandji8558 Год назад

bonjour comment je peux avoir le lien

@amandinehoudbert9554 Год назад

C'est quoi le code de déchiffrement?

@GVAC-MUSIC Год назад

besoin du lien que faire

@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 Год назад

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

@jeanmoncher2661 Год назад

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.

@judaak1042 10 месяцев назад

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

@lempereurgeek3172 Год назад

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

@LiveCodeofficiel Год назад

🙏🙏

@Sxxturne Год назад

Un des seuls tuto qui ai marcher pour moi. Merci beaucoup !

@zafer2562 Год назад

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

@Minia-Elychat Год назад

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

@TariktechVlog 3 месяца назад

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

@chasseur7360 2 года назад

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

@OutongOutong-zh3zw 4 месяца назад

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 .

@amoweb2409 Год назад

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

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

Un tuto superbe ! Merci mec

@user-lb1gt6tu9l Год назад

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.

@LiveCodeofficiel Год назад

🙏🙏🙏

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

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

@kevinnsapo8711 Год назад

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

@pastiille7467 Год назад

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

@christophemillot5541 Год назад

Merci beaucoup. Je m’abonne direct !

@alloaluile3608 Год назад

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

@mikedube Год назад

wow ! vraiment beau tuto !

@Blackismo Год назад

merci pour cette formation tres instructif😀🙌

@feelingnether158 Год назад

parfait merci beaucoup bien expliqué et très claire

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

un tuto simple et efficace comme ont les aime merci

@JVMMY7 2 года назад

Ça faisait longtemps, content de te revoir 🙂

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

👋

@juleszanardi1140 Год назад

Merci beaucoup, super tuto

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

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

@franckngoubounkou9930 3 месяца назад

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

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

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

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

Merci ! 🙂

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

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

@SKS744 3 месяца назад

best video on youtube so far !!!

@law1928 Год назад

+ de vidéo comme ça !

@KushWolf Год назад

Très utile merci beaucoup pour le tuto ^^

@cyriledouard9848 2 года назад

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

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

😉

@maydew Год назад

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

@carabistouille_ Год назад

T'as réussi à reproduire le code ?

@Romixo_ Год назад

@@carabistouille_ Perso Yes

@rhayannejoseegangoua1525 Год назад

Magnifique tutoriels

@YASSINE_LRCS Год назад

gg legend je te jure c'est colle

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

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

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

😀

@justetk Год назад

You have been a great help. Hello from Azerbaijan.

@omegaaxel5759 Год назад

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

@hiimifranco2840 Год назад

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

@mohamedamin2329 Год назад

very talented teacher - cheers

@cyrice1890 Год назад

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

@loshmy0215 Год назад

Merci,respect!

@alexandernassar6619 Год назад

Really amazing. Thanks

@Alex_3D 2 года назад

Ouais l'boss 👊🔥

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

😂

@yumikolikeit7782 10 месяцев назад

Carrément top.... merci

@young_bounty_8752 Год назад

Meilleur tuto ever. Merci pour cette magnifique vidéo

@betelgeuse6388 Год назад

Thank you so much for this tutorial.

@mich98el 7 месяцев назад

Merci beaucoup.

@laminediallo4252 2 года назад

Ravi de te revoir mec et merci pour le tuto

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

😀

@alexandrecampan3728 2 года назад

Le retour de Live Code !!

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

Ça faisait un petit moment en effet 😌

@melissa8560 3 месяца назад

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

@abdelkebirelguardi Год назад

Un tuto bien expliqué

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

Merci BG !!!

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

👍Good job Bro

@daniel_youtubechannel8717 Год назад

Trop cool 👍

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

Trop génial

@chakabani123taftouf7 6 месяцев назад

Merci beaucoup

@musseridwan7542 Год назад

merci beaucoup

@aryasenarm 10 месяцев назад

Thanks so much, sir.

@riadchoukairi1895 Год назад

Merci !

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

My Boss is de retour 😁

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

😅

@karbocrds 7 месяцев назад

Video incroyable!! Pourrais tu faire plus de tuto?

@yahyarechag8540 Год назад

Thank you !

@Blunty94 Год назад

Salut et merci beaucoup pour tout ce temps que tu passes pour nous faire découvrir tout ca. Chez moi ca fonctionne, je suis happy :-) Par contre je me demandais, il y'a t'il un moyen de changer l'image du menu hamburger une fois le menu ouvert afin de le remplacer par une croix pour indiquer à l'utilisateur que c'est ici qu'il doit recliquer pour fermer le menu s'il veux finalement rester sur cette page? Encore merci à toi.

@yayaismailousmaneyaya4885 Год назад

Super!

@lylypoupou5505 Год назад

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

@skewridg356 Год назад

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

@SenhorNico Год назад

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.

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

Ca régale

@wes_333 10 месяцев назад

merciiii

@leviswizy3077 Год назад

Nice tutorial-5 Bro!

@fur02687 Год назад

Limpide ! Merci

@yeskouyesko3079 Год назад

Merci infiniment

@TeddyWrestling Год назад

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

@lvt2665 Год назад

Bonjour ! Grâce à tes vidéos j'ai décidé de me réorienter dans le développement web (front end pour commencer) et pour cela je dois faire remplir un questionnaire pour connaître un peu plus le métier, j'aurais aimé savoir s'il était possible pour toi de le remplir ? Si tu n'as pas le temps c'est pas grave en tout cas merci pour tes vidéos et continue comme ça c'est top !

@nanok-mornigstar Год назад

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

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

شكرا❤

@wazaari2601 Год назад

Worked, thx

@user-xh7xw9kp6j Год назад

Top merci

@belhadadhicham6080 Год назад

mercii

@kprirusse4641 Год назад

it work on my pc thx bro vеry much

@elde4975 Год назад

Everything works perfectly

@user-zv6kq3gp1i 4 месяца назад

merci

@trgiahuy1874 Год назад

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

@LiveCodeofficiel Год назад

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

@noahlegras2002 10 месяцев назад

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 :)

@zinoua9884 Год назад

Fantastic

@VictoriaDubois-ic8ws Год назад

merciiiiiiiiiiiiiii

@nowblac Год назад

Tank you for this vídeo 👍👍👍👍👍👍💻🖥️

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

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 ?

@RedYacuat Год назад

Bonjour j'aimerais savoir quelle extension de visual studio code vous utiliser pour pour avoir les quickstarter les logo et les couleur de votre code merci. ps: si vous utiliser autre chose merci de me le dire en com merci

@hrslayz3385 Год назад

Thanks

@yglee8198 Год назад

Thank you

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

@Adimarcel2006 Год назад

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 !

@jeanmoncher2661 Год назад

J'ai une question: Pourquoi le bouton menu-hamburger n'est pas placé dans le tag ou dans navbar?

@Daniel_Agostini Год назад

mio padre🔥🔥

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

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

@aatroxlincurve8249 10 дней назад

Bonjour, j'ai un petit problème de mon coté, lorsque je clique sur mon bouton, j'ai bien navlink qui s'affiche dans le meni developpeur, cependant, le volet ne disparait pas, meme un installant des marges, pourriez-vous m'aider s'il vous plaît ?

@Tahaamedia Год назад

Salut mec je suis perdu pour cacher la navbar, quand tu as mis @media screen and (max-width: 900px) et bien mon "and" n'a pas de fonction c'est comme ci je tapais le texte dans le vide.