Un menu responsive simple ( idéal pour débutants ! ) avec HTML, CSS et JAVASCRIPT !
HTML-код
- Опубликовано: 9 июл 2024
- Une très bonne façon pour un débutant d'apprendre le développement Front-End est de réaliser des menus. Dans cette vidéo, nous combinerons HTML, CSS (Flex, positions) et JAVASCRIPT pour réaliser un menu simple, compréhensible par les débutants.
-------------------------------------------------------------------------
🌍 Communauté & soutien :
- Rejoignez mon Discord (plein de bonus !) : / discord
- Soutenez-moi sur Patreon : / benbk
- Soutenez-moi avec un don en cryptos sur mon adresse Ethereum : 0x06fCEd3C170534fB5304724Df4aE0E3C5Ad2e111
⏱️ Chapitres :
0:00 : Introduction
0:09 : Résultat final
0:28 : Mise en place
01:46 : HTML
04:32 : CSS Partie 1
09:53 : JAVASCRIPT
10:43 : CSS Partie 2
🔎 L'image de fond : unsplash.com/photos/d0Sl3AH8Tlg
🔎 Le cdn de Font Awesome : cdnjs.com/libraries/font-awesome
🔎 Le GitHub du menu complet : github.com/BenBktech/Menu-res...
🤵 Je suis Ben BK, formateur en développement front-end, back-end et blockchain. Mon objectif ? Vous aider à devenir des développeurs Blockchain !
💭 Mes réseaux / Mon site :
Twitter : / benbktech
Twitch : / benbktech
Tiktok : / imbenbk
Site Web : benbk.io/
Instagram pro avec des infos exclusives : / benbktech
Instagram perso : / imbenbk
#menu #html #css #navigation #responsive #debutant #tuto
Super tuto ! Le background de la navbar et du menu sont changeables facilement, contrairement aux autres tutos qu'on peut trouver sur youtube ! Merci tu m'as beaucoup aidé !😄
Avec plaisir, content que tu aies pu progresser 🚀
Merci beaucoup, tu expliques clairement bien les choses comme elles le sont. Tout est bien claire.
Merci pour ce tuto! Je vois en toi un véritable plaisir à transmettre et rendre accessible au plus grand nombre des choses qui à la base peuvent rapidement devenir fastidieuses et compliquées pour qui n'a pas un sens aigu de la logique et une mémoire d'éléphant. Sois bénis, je te souhaite plein de bonheur :)
Merci mec ton commentaire me touche beaucoup :) ! plein de bonheur à toi :) !
Merci beaucoup pour ce tuto. Je bloquais sur la mise en place d'un menu burger pour la version ordi et mobile d'un site et tu m'as sauvé😄. Le menu est simple à mettre en place sans compter tes explications claires. Merci encore et je m'abonne à ta chaine.😁
MErci :D !
Merci pour ce tuto ! C'est très simple à comprendre.
Bonjour Professeur, vraiment infiniment pour ce beau tuto. Very great 👌👌👌
Merci à toi :) !
Tuto avec des explications très claires. Top !
Merci 😇
Excellente vidéo ! Très claire ! Merci beaucoup !
Merci à vous 😊
Simplet et efficace, merci
Merci 🙏
cool
Top du top, Al dente le petit tuto!
Merci 🙂
J'ai pas encore regarder toute la déo mais 🤤 wouah chui épaté
Excellent vidéo
Merci Toto :D !
in-croy-a-ble merci beaucoup !
Salut comment on peut faire si l'on veut faire ouvrir ce menu par un texte ? En gros je cherche à quand je clique sur un mot qui est tt en haut de ma page d'accueil il y ait un menu qui apparaisse. merci
merci pour vos effort bon travail.
petite remarque il faut ajouter un user select none pour le header nav.
merci encore et bonne continuation.
❤
Hey, merci ! User select none ?
@@BenBK merci à vous infiniment pour le partage de l'information.
pour la commande user-select: none; elle va interdire la sélection du texte qui représente les icones cliquables par l'utilisateur ou les visiteurs du site.
merci
@@bankalma3louma Intéressant merci pour l'astuce l'ami ;)
@@BenBK tes vidéos son vraiment une banque d'informations et merci à vous
Bonjour ! Merci pour ce tuto.
J'ai une question. Comment faire pour que la barre de menu se referme quand on clique sur un des liens ou ailleurs sur le site ? Car il n'y a que les boutons ouvrir/fermer qui permet cela. Merci
Pour cela, il faut, dans la version tablette et mobile, que au clic sur un de tes liens, on remove la class open. Ainsi, il faut d'abord que tu puisses séléctionner tes liens avec un document.queryselectorall qui va selectionner tous tes liens a. Puis que tu fassesz une boucle forEach pour que pour chacun de ces élements la, au clic, tu removes la class open.
merci pour ça mon frère
Merci Ben pour ce tuto et j'ai réalisé pour une tablette. Cependant, quand je mets le navigateur en mode "tablette", bon tout fonctionne, mais à côté de l'icône à 3 barres, il y a celui de la croix. J'aimerai que quand il y a les 3 barres, que la croix n'apparaisse pas. Peux-tu m'aider stp ? Merci beaucoup.
Hello normalement la croix ne devrait pas être là si il y a les barres. N'hésite pas à venir poster ton code sur le Discord, sans le code c'est compliqué 🙏😉
@@BenBK Bonsoir Ben. Mon problème est résolu.😀😀😀
Petit tips : li copier coller li li li non ! on oublie li*5 et hop 5 li, pas de class secondary mais plutôt nth child ;)
merci pour le tuto mais si on veut que le menu soit a gauche quand on l'ouvre on fait comment
left: 1rem au lieu de right: 1rem
salut ben quand je charge la page dans la page html il y a bug d'icone fermer et ouvrir s'affiche tout les deux mais quand je charge la page dans le menu css sa marche parfaitement
Hey, difficile de dire sans code, essaie de voir le lien GitHub pour voir les éventuelles différences avec ton code et regarde aussi si ya des bugs dans la console de ton navigateur
J'ai le même problème, pourtant j'ai rien modifier actuellement....
Super!
Il reste de mettre le code a la disposition de tes folwers
Aussi fainéant que ça ?
Le code et dans la description ta le github ....
Yo Ben , est ce que tu pourrais juste nous expliquer quelle transition ou transform modifier afin de faire en sorte que le menu se déroule de haut en bas / de bas en haut au lieu de gauche droite / droite gauche stp ?
transform: translateY(100%); pour le bas et pour le haut transform: translateY(-100%);
Super ta vidéo !!
Petite question, comment tu fais pour voir les résultats de tes modifications sur la page html en temps réel sans la réactualiser ?
Merci ! C'est grâce à l'extension LiveServer de VSCode :)
@@BenBK Top merci beaucoup ;)
bonjour est ce que tu peux agrandi le code stp parce que quand je agrandi avec ctrl + le code est trop petit merci d'avance de agrandi le code
Tu peux retrouver le code dans le github dans la description
Ca fonctionne parfait cependant lorsque l'on rétrécit la page de mode ordi à tablette l'animation se fait alors qu'il ne devrait pas y avoir lieu... On le voit toi aussi sur ta vidéo à 14:13. Aurais-tu une solution pour cela ?
C'est pas un problème, on s'en rend compte nous parce que l'on fait des tests, mais les users ne vont pas s'amuser à faire ça. Et perso je trouve pas ça gênant du tout 🙏
Pour le menu c'est parce que tu mets un height 100vh que le menu arrive au milieu
Merci enormément pour ce tuto si bien expliqué mais qq pourrait m'aider car sur mobile je n'arrive a cliquer sur le logo et ainsi afficher le menu
Hello, tu as bien fait le JavaScript ? Il y a t'il des erreurs en console ?
Salut merci pour la vidéo j'ai fais exactement comme toi sauf qu'il y avais un souci au niveau de la croix et du burger.
Car j'avais les deux en visible et impossible d'avoir le burger seul et d'avoir l'effet de disparition au clic.
Du coup j'ai mis des visibility :hidden.
. toggle{
display: block;
font-size: 1rem;
cursor :pointer;
}
.fermer{
display :none;
visibility :hidden ;
}
.ouvrir{
display:block;
}
. open .ouvrir{
display:none;
}
.open . fermer{
display:block;
visibility:visible;
}
}
tu as encore le dossier complet ?
Bonjour et merci pour ce tuto trés enrichissant, cependant je rencontre un pb avec la partie toogle malgré le JS, impossible d'activer le burger en position X , merci par avance de votre retour, Fma67
Hello, tu peux venir poster ton code sur notre discord, en attendant, regarde si tu n'as pas une erreur dans la console ;)
Salut j'ai un problème je n'arrive pas à utiliser font awesome. J'ai fait comme toi avec d'abord le cdn puis ensuite la balise mais dans mon navigateur (chrome) il n'y a qu'un carré qui s'affiche. Ca fait ça avec toutes les icones je ne comprends pas ce que je fais de faux. Ce serait très sympa de ta part de me répondre et sinon c'est une super vidéo continue comme ça !!
Vérifie que les icônes choisit soit gratuite si tu n'as pas de licence payante et vérifie aussi que tu as bien link toutes les feuilles de style en vérifiant les versions nécessaires, perso il me faut 5 liens pour voir les icônes que j'ai sélectionné.
@@93BaH93 Merci pour ta réponse, j’ai réussi
il y a pas de class open dans le html
si c'est le js qui le déclenche.
ca ne fonctionne pas pour moi et j'ai fais exactement comme toi
Étrange
idem
salut j'espère que tu vas bien .
j'ai reproduit a l'identique ce que tu nous montre et malheureusement j'ai supprimer mon dossier hier alors que j'ai un devoir a rendre dessus :(
pourrais-tu m'envoyer le copier coller de l'html et css que je ne repasse pas 1000 ans dessus ? sincèrement tu ça serais vraiment super gentil de ta part !
au passage super tuto !!
Hey, le code est disponible en description. :)