Responsive Navbar HTML CSS, Responsive Navbar HTML CSS JavaScript
HTML-код
- Опубликовано: 14 июн 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
Best and easiest way.
There are some tutorials on RUclips 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!
Definitely subscribing! You are amazing!
THE BEST! 👑 Huge respect & love for you from Nepal 💗
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
Thanks bro this was one of the useful tutorials I have ever watched. And it's shorter and informative Thanks a lot!
Thanks man. Leaves a lot of room for customisation.❤❤❤
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.
Thank you 💗 simple and clean
Nice tutorial and clean code🥰very helpful❤Thank you for sharing❤❤
JazakAllah brother this helped me so much
Thank you for spending your valuable knowledge .. Thanks
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?
Good video man
Thank you i give a like 👍
Uzi ubwenge
Brother kindly thank you I use my mothertongue to say that you're intelligent. I loved you tutorial.
💯💯💯💯💯💯💯💯💯💯💯💯💥💥💥💥
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?
Thank you so much! You help me a lot😍😍
nice tutorial thanks a lot for your sharing
شكراااا لقد كان مفيدا جدا 🌹🌹🌹🌹🌹🌹🌹🌹
Thanks for this video!
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.
Exactly looking for the same. Thanks mate
thank you so much for the help!
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
class active on nav didn/t appear when i clicked on it, so the slide down menu didn't show.. what's the problem..?
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
Thanks for the help! :)
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
great bro keep it up love you.
Nice work here 👍
modern clean & very nice nav bat
thank you very much, your tutorial is incredible!!!!
Me sirvió durísimo gracias mano
Great tutorial!
I was just wondering, how to get the nav bar longer ? because I have 12 stuff in the menu and it doesn't fit 😅
Thanks, you help me learn
Amazing dude!
it was very useful thx
You’re the best ❤
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
amazing i like this navbar because use simple code
Thank you❤
how to move to script.js or external file??? please answer quickly
unable to get the slide down animation for this navbar
Thanks brother/sister!
o repositório da descrição não leva para o mesmo projeto do vídeo
I don't understand that part, when I press the navbar it doesn't respond
Thanks video :D
thank you very much
Awesome Video
thankyou fam!
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
Thanks lot
what's the red star in the css?
nice , i need help in this you know how put a hero.class backround image in my nav bar? yep Transparent
Cool
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 ?
great
\
Nice video, very clear i like it
Nice ❤
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");
}
Nice
gracias mi bro / thanks bro
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
unable to get the drop down animation!!!!!!!!!!!
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
While adding hamburger its not working
Hii mera 3 bar mese scroll down nahi ho rha he
Plz help my humberger not showing
No
drop down animation doesnt work.....
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
look good but when you add source code then please mention in title
Bro source code is for magic menu?
Give source code for this
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
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
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
3:03
??????
div hamburger which has 3 line is the menu icon
source code is not opening bro
bro it takes 10min to copy that cmon
Hello! Do you have a chat group in Telegram?