ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- 📂 Source Code Files...
bit.ly/source-code-filez
💬 Join Our WhatsApp Group...
chat.whatsapp.com/J4P6V2QQkRa...
___________________
Description...
In this video, we will learn how to create a responsive navigation menu using HTML, CSS, and JavaScript. We will start by creating the basic structure of the navigation menu using HTML and styling it using CSS. Then, we will use JavaScript to make the menu responsive. We will use media queries in CSS to change the styling of the menu based on the screen size. JavaScript will also be used to add or remove elements from the menu or to toggle a mobile-style menu. By the end of the video, you will have a fully functional responsive navigation menu that looks great and is easy to use on all devices.
___________________
Chapters...
00:00 First Look! (Demo)
01:01 Writing HTML Code
02:12 Writing CSS Code
09:34 Writing the script
11:17 Final View
____________________
Click here for more...
/ @evlearn
____________________
Also Watch These...
/ @evlearn
____________________
Tags...
responsive navbar,
responsive navbar html css,
responsive navbar html css javascript,
responsive navbar using html and css,
responsive navbar html css in hindi,
responsive navigation,
responsive navigation bar with html css and javascript,
responsive navigation bar with html and css,
mobile-friendly navigation,
mobile navigation menu,
responsive menu design,
responsive website navigation,
navigation bar tutorial,
navbar design tips,
html css navigation menu,
css dropdown menu tutorial,
javascript menu tutorial,
responsive menu animation,
responsive menu design ideas,
adaptive navigation bar
Hash Tags...
#responsive #navigation #menu #html #css #javascript
![[LIVE] : ONE ลุมพินี 69 | คู่เอก "กุหลาบดำ vs นาบิล"](http://i.ytimg.com/vi/PNM6U8e_HMo/mqdefault.jpg)
Best and easiest way.
There are some tutorials on TH-cam that take hours to build the same navbar
i was asking how to do something like this to every people in some communities, and no one explain like you! THANK YOU!!
excellent tutorial for anyone who wants a modern, clean, simple navigation bar! works exactly like it needs too!
you didn´t say any word and I understand all, easy and rapid, some others tutorials take a while but this, is really helpful thanks!
great tutorial! You could make the hamburger animated by adding this in the media query:
.hamburger.active .line:nth-child(2){
opacity: 0;
}
.hamburger.active .line:nth-child(1){
transform: translateY(8px) rotate(-45deg);
}
.hamburger.active .line:nth-child(3){
transform: translateY(-8px) rotate(45deg);
}
and this in the js in the hamburger fuction:
hamburger = document.querySelector(".hamburger");
hamburger.classList.toggle("active")
and also if there isn't already one, a transition in the .hamburger .line
Intente varias formas de solucionar este problema que tenia con JS ya que no podía hacer que el menú fuera visible y esta fue la solución, muchas gracias.
Definitely subscribing! You are amazing!
Thanks bro this was one of the useful tutorials I have ever watched. And it's shorter and informative Thanks a lot!
THE BEST! 👑 Huge respect & love for you from Nepal 💗
Thanks man. Leaves a lot of room for customisation.❤❤❤
Thank you 💗 simple and clean
JazakAllah brother this helped me so much
Thank you for spending your valuable knowledge .. Thanks
Uzi ubwenge
Brother kindly thank you I use my mothertongue to say that you're intelligent. I loved you tutorial.
💯💯💯💯💯💯💯💯💯💯💯💯💥💥💥💥
Nice tutorial and clean code🥰very helpful❤Thank you for sharing❤❤
Hola muchas gracias por el aporte me sirvio muchisimo, perdon si no escribo en ingles, voy a guiarme de tu proyecto para mejorar el mio
modern clean & very nice nav bat
Thank you so much! You help me a lot😍😍
Thanks for this video!
Great code. I have been using this as a template for all my navbars for a while now, I just got a macbook and noticed the css does not render the display: flex the same as it does on chrome on my linux or windows PCs. Does anyone have any advice on what I may be doing wrong?
thank you so much for the help!
Me sirvió durísimo gracias mano
nice tutorial thanks a lot for your sharing
Thanks, you help me learn
شكراااا لقد كان مفيدا جدا 🌹🌹🌹🌹🌹🌹🌹🌹
Exactly looking for the same. Thanks mate
Nice work here 👍
Good video man
Thank you i give a like 👍
amazing i like this navbar because use simple code
Great tutorial!
it was very useful thx
Teşekkür ederim siz mükemmelsiniz
Thanks brother/sister!
Thanks for the help! :)
great bro keep it up love you.
thank you very much, your tutorial is incredible!!!!
Thank you❤
You’re the best ❤
Amazing dude!
I wrote almost the same code you wrote., I made a slider from another tutorial video under the navbar. I have a problem like this: when I open the toggle navbar, the navbar stays above the content, that is, the slider, the content does not scroll down. I guess there is content under the navbar even when the toggle navbar is closed. The codes are also very confused and I don't know what to do.
thank you very much
great tutorial like Oscar said you didn't say anything and i understood everything. Thank you for sharing your knowledge :)
Bro but when we add text in page navbar become transparent what should I do
Thank you very much!!! Amazing navbar
@@evlearn when clicking on an item the menu should close automatically, how would you do that?
@@marcoantoniovalencia8694 It's simple just make it not active just like when you click again the menu thingy
I was just wondering, how to get the nav bar longer ? because I have 12 stuff in the menu and it doesn't fit 😅
hola buenas, una duda. después de hacer esto quería colocar un carousel debajo, al hacerlo todo bien.
pero cuando se despliega el menú con las opciones, este se despliega debajo del caruosel y me gustaría que se despliegue pero por encima de este, algún consejo?
how to move to script.js or external file??? please answer quickly
thankyou fam!
class active on nav didn/t appear when i clicked on it, so the slide down menu didn't show.. what's the problem..?
Thanks lot
if I use the published site from my phone, the media query unfortunately doesn't work. It only works if I narrow down the page from the web browser from my computer. How can I fix?
Thank you
Awesome Video
Thanks video :D
unable to get the slide down animation for this navbar
Nice video, very clear i like it
what's the red star in the css?
gracias mi bro / thanks bro
I don't understand that part, when I press the navbar it doesn't respond
nice , i need help in this you know how put a hero.class backround image in my nav bar? yep Transparent
Thanks a lot 🙏🙏 but when I add active class to navbar it toggles but doesn't work
Have you checked the z-index when you toggle on the nav-bar ?
Nice
Nice ❤
o repositório da descrição não leva para o mesmo projeto do vídeo
Bro js is not working
Whenever I click menubtn then in browser active classname showing but not show navlinks
Please help i am try to solving last 3 days
great
\
The whole code worked fine for me but the javascript part is not running for. On clicking the hamburger, the dropdown menu is not appearing for me. Please solve my query!!!
Declare hamburger and navBar as constant values i.e
const hamburger = document.querySelector(".hamburger");
hamburger.onclick = function(){
const navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
}
I'm confused about the class with hamburger, and the div with a class line. There's nothing inside what's the purpose?
To create the menu icon
look good but when you add source code then please mention in title
To put the menu on the left, what code would I have to change?
i think on the button thing you can add transform: translateX(-(whatever); to move the button to the left or if you are talking about the like size of the menu and want it to only show left and not the whole width of the screen you can make a div container and set its vw to like 20 or any number that is below 100 to make it not take the whole screen and change the nav menu width to like 100% or 50% of that container or you can just make the navbar width like 20vw and this would only take up only 20% of the screens width and you can use the transform: translateX(-) to make it go left or you can use the top: and left: methods to move it as well if this is what you are talking about
unable to get the drop down animation!!!!!!!!!!!
Plz help my humberger not showing
No
drop down animation doesnt work.....
Cool
Bro but when navbar come down background text is visible from nav bar what should I do ?
Plz help me 🥲
@@evlearn sorry but it's not working 😐
it cant not responsive 3 line Why Answer me
Bro source code is for magic menu?
Give source code for this
While adding hamburger its not working
how do you put content on each navbar button???
@@evlearn for example you will click the "about" on navbar then a content will appear then on "home" button another will appear
@@evlearn ohh yeahh I remember on others template they have another html which they put together on a compressed file am I right? Omg can you guide me please? I really need it for our project 😭❤️
@@evlearn do you have the video uploaded with your source code? I wanna watch it if you have video
@@evlearn it's okay thank you very much❤️
Can you give me the css source code because somethings don't work btw nice vid
How to make a description appear when clicking About
Use tag
when i put the javascript code in it doesn't work, anyone know why?
@@evlearn i was doing that but now the tabs aren’t showing up on the burger menu
@@evlearn ok i joined and sent
Hii mera 3 bar mese scroll down nahi ho rha he
??????
div hamburger which has 3 line is the menu icon
Friend, I watched your video and copied it, but it didn't work, so can you look at my code and see where it's wrong?
I'm currently using the latest version, but I can't do drop-down animation
@@evlearn Oh thanks bro i solved it just now
and thank you always fot the good video
source code is not opening bro
bro it takes 10min to copy that cmon
3:03
Hello! Do you have a chat group in Telegram?