Responsive Animated Navigation Bar With Multi-level Dropdown Using Only HTML & CSS
HTML-код
- Опубликовано: 8 фев 2025
- Responsive Animated Navigation Bar With Multi-level Dropdown Using Only HTML & CSS
In today's video, We're going to make a responsive navigation bar with animated multi-level dropdown . Also we're going to learn how to make an animated hamburger menu on small screens. In addition to this, we're going to make some cool animations that I decided to add to make our menu more awesome.
Please feel free to donate any amount you think is equal to the value you received from my tutorials .
DONATION : paypal.me/true...
SOURCE CODE : github.com/sef...
Don't forget to smash the like button and share the video with your friends if you found the video useful.
Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.
Make sure to SUBSCRIBE for more tutorials just like this one !
Wooooow You are awesome! I dug the whole net for the responsive navigation menu. Yours is the best!
Thank you bro ! I appreciate that
Thanks for your video. I really appreciate it. That's what I'm looking for. Keep up the good work! 🔥
Thank you bro :)
Great contribution to the community, my friend, already a faithful follower of the channel .... Greetings from Nicaragua
Thank you :)
❤️ From *india (bharta)* 🇮🇳
Thank you for giving such a great or true coder idea 💡
I definitely want to make it
it's not "bharta", it's "Bharat" 🇮🇳
I have an assignment about creating website and all of your videos are useful. Thank you very much!
You're welcome :)
The input to toggle hamberger menu is very creative bro
Today I, m so happy to see such a talent behind your work
Thank you bro
Astonish tutorial. Thank you for you contribution. Hope you reach sky high subscriber. Subscribed.
Awesome custom drop-down menu.
The best I've ever seen. Great work.
Thank you :)
Best one I've seen about navbar. It's amazing. Keep on rocking bro...
Thanks Bro !
A few animations are a bit too much imo, but apart from that this is the new best Dropdown Tutorial.
It could be even better with a bit slower pace (had to set speed to 0.5 and turned off music) and with more explanations, so that I can make the adjustments I want, but aside from that really good tutorial.
Thanks mate ! Glad it was helpful !
I Love your Channel because you also provide the Source codes thank you so much you are great.
Thanks bro !!!
You are a true artist!
Thank you !!
Grandioso!, un menu moderno, bonito, funcional y sin usar javascript. Muchas gracias, te ganaste un suscriptor, sigue haciendo videos de esta calidad y tu canal va a crecer. Saludos desde México.
Thank you 😊
Impressiv... thank you. Good job!
thanks :)
such a great tutorial thanks it helped so much
thats great! this what i was looking for.
Thank you
totally a masterpiece..... much inspired by your work.... keep it up
Thank you bro !
We prefer that you explain and talk instead of music and thank you very much
LOVE FROM INDIA
Thanks for the tutorial. It's really helpful.
Most welcome!
THANK YOU VERY MUCH, FRIEND
Muchas gracias, excelente trabajo.👌
de nada
Thank you, it's really nice!
You're welcome, and thank you too for your kind words !!
Thank you so much !!! Keep up the good work !
Thank you bro !
You're top! I wish you a million subscribers )
Вы топ! Желаю вам миллион подписчиков )
Thank you !!
Thank you!!!!!! It's awesome!!!
Most welcome !!
Thanks. Pretty good option.
good job sir..............................................💡
thank you bro !!
amazing design.
Thank you very much sir you're great
You're welcome bro !
Brother thanks alot for this 💕💕💕
Most welcome !
Thank you very much, its so helpful
You're welcome bro !
Good creativity nice job
Thanks a lot
Masterpiece
Thank you so much
You're welcome bro !!
Excelente Contenido..!
que groso sos!!! muchas gracias!!!
it's really great
Genial, buen video
the GOAT 🙌🙌🙌
i really like it sir...
but it seems only for intermidiate web developer...
some stuff is really alien for now... but i'll learn it sooner...
thanks!
You're welcome
God LEVEL
I will have follow it to make profolio .
Ótimo vídeo parabéns ✌.
thamks sir/madam
Top das galáxias, muito bom.
Thank you !!
nice work
Awesome!! Once the drop down is clicked in mobile, is there a CSS fix to collapse the clicked menu?
THANKS!
You're welcome!
Thank you a looot ❤
Most welcome !
thank u
Can I use this code for my website and make some changes of course. I am asking for permission. This fit perfectly for my website. You are awesome and I wish you the best. Just keep going
Thank you br, yes you can use it
what apps do you use for writing the code?
And thank you for your hard work
vs code
Hey, I was able to create drop down menu using HTML and CSS but the problem is, it is only working when the page is empty. As soon as I add some content to the website, the drop down menu doesn't stay when hovered. can you help?
Friend is incredible what you do thank you very much I have learned a lot with your videos .... can you tell me what version you use from the visual studio? or what program are you using please
Thank you bro !!
I am using the last version of visual studio code
Awesome...🔥
Thank you !!
keep bringing them
Thank you bro !!
Good job 👍
Thank you
Great job Bro. keep it up. Can u please upload javascript front end application with animated design
@True Coder how to already highlight the link 3(even before we hover over this) of services which contains more link
Do you have a full responsive website html,css with javascript?
Yes, I will make a tutorial about that soon
Looks great, works great but . . . when i use this in any way the page it's on won't scroll down. The "page down" key or even arrow keys won't work either. I made a real simple example but of course, can't post links here. Ideas?
Good BRO♡
Thank you !!
Buscando bronce encontré oro! muchas gracias por el tutorial, de verdad muy bueno te felciito. Podría agregar iconos a los submenus también cierto? y si este lo quisiera de izquierda a derecha ya que el que muestra abre de derecha a izquierda...
Hi awesome can i use your code for my own website?
which theme are you using
Hello my friend, would you allow me to take the code, change some specifications, and republish it on RUclips platform?
which theme you useing in the vs code?
Matherial theme
@@TrueCoder oky thanks for gived the reply❤️
Sir ji ...the bran logo or name...i want to get it in left corner how can i do that....its not moving
hi can you show how to collapse the submenu when the parent menu click once the submenu is shown
This is fantastic! Thank you so much! I am running into one odd issue. I have some longer menu titles that I'd like to keep on a single line, but if I increase the dropdown width from 10rem to 16rem, the hamburger menu does not align correctly when I test it in various mobile views. Sometimes it is cut off, and sometimes it disappears altogether. Any idea how to make it behave without having to set the dropdown width back to 10rem?
try to give "nav-btn" element a flex of 4
@@TrueCoder That worked perfectly! Thank you! : D
@@AngelaRoquet You're welcome !!
@@TrueCoder I spoke too soon... once I refreshed my browser, the error reappeared. : / It's not the menu itself but rather the 3-line hamburger icon that is being cut off or disappearing, depending on the media screen size. Very odd.
@@AngelaRoquet remove width: 16rem
Hi, first of all I really like your vids... Im really new to web dev and in the process of learning i tried to add a footer to this code right after the closing main tag but i cant get it to display properly, at first it didnt display at all and it has something to do with the CSS code: height: calc(100vh - 3rem); that belongs to the section in the main. Then by changing these values im able to see the footer but i would like to know how to add a footer that would be part of the whole layout without having to go inside this calc method and setting up values until it looks the way i want it. Thanks in advance.
If we make a donation are we free to attribute and use in our own sites?
yes, of course
@@TrueCoder
I am watching this on my phone now away from my laptop.
I saw a dot js file referenced in the video.
Does this navigation menu require Javascript or does the Javascript just add elegance?
@@christopherjohnchapman No Ididn't use javascript in the video, what you saw was the font awesome cdn
When i added my logo in place of brand-name then the logo is sticking on the top left
Please reply
Thank you for this great work! I have tried to make changes (delete the div with the sign in buttons and set the other buttons to flex-end. Now the toggle is out of screen on mobile devices... What I am doing wrong???
Please make the same features with bootstrap
ok, i'll try
Color and cube change ,when ":hover" :)
.btn {
padding-bottom: 1rem;
padding-top: 1rem;
padding-left: 1rem;
padding-right: 1rem;
position: absolute;
display: inline-block;
font-size: .8rem;
border: 2px solid #fff;
border-radius: 2rem;
line-height: 1;
margin: -0.5rem;
transition: .3s;
text-transform: uppercase;
}
.btn.solid, .btn.transparent:hover{
border-radius: 2rem;
position: absolute;
background-color: #fff;
color: #69bde7;
}
.btn.transparent, .btn.solid:hover{
border-radius: 2px;
color: crimson;
position: absolute;
background-color: transparent;
}
like it
Thank you very much for sharing to us this cool work! I really appreciate it. can we use this code and make changes? but before I do this I'm asking for your permission thank you ^_^
yes you can
Hiii sir,I am new to css can we apply background color to the empty div without mentioning height in css
Please make footer for this navbar and edit the image and overlay.
Thanks Bro.
But, please may I ask what the inline styles: --i: 0.6s;, mean?
we just put the delay of each element in variable "i"
Does anybody know, why when Iam in mobile version and I click on the arrows It just realods the page and close the menu? Wheres the problem?
Thanks True Coder, awesome code, functional and good looking interface. Excuse me, do you know why multi-level dropdown and background-color in overlay div doesn´t work in Chrome 49.0.2623.112 (64-bit). All Responsive Animated Navigation Bar doesn't work on Safari (iOS 12.4.8) either. Is there any way to make it work on those browser´s versions?.
Thank you 🙂 for this
Pls wats d name of the background music
Can't toggle on and off visibility of menu
can i use this code in website
What's the song do it was bangin!
Hi. I got problem with buttons. I don't know why I can't click them :/
Fixed:
Buttons position:
position: absolute;
make sure you give him z-index
@@TrueCoder z-index: 100000000;
And working :D
anyone else getting side scrolling on the body on mobile? After translateX on the .nav-btn, I am getting side scrolling. Even tho the position is absolute
hellyeah
Bro is this sticky navbar!?
Background music?
I'm going through the code for the second time, but I still have the same issue. when I review the page the dropdowns show... I'm using Video studio code, and this time I am making the code as I follow along on your tutorial... still same problem. I know I must be missing something, but for the life of me...
check if you hide the dropdowns in css
Too many divs, and the site navigation bar becomes untappable..
watch it at 0.5 speed
robot is doing designing
I see you did not add any content. Nor in your code did you make an area for adding content. Is there a reason for this? If it is an over site can you update your github page to include it?