Simple Responsive Dropdown Navigation Menu Using Pure HTML And CSS Only
ฝัง
- เผยแพร่เมื่อ 6 ต.ค. 2024
- how to make a simple responsive dropdown navigation menu with hover effect using pure html and css only.
create a responsive dropdown navbar with toggle menu effect using html and css only.
Images Credit:
unsplash.com/p...
New To My Channel Subscribe Now And See More Stuff Like This:
/ @mrwebdesigneranas
#PureCSS
#DropDown
#NavigationMenu
These tutorials would be so much better without the annoying music, a verbal explanation and not 12 showings of the menu before you get into the details.
Honestly
Bruh…. Everyone’s just posting speed runs these days
God bless you more my mentor. I love you. Just exactly how my client wanted his navbar to be.
Thank you so much!!! After hours & hours struggling to understand, you helped me. Your method is logic and easy to follow.
Glad it helped!
Amazing content sir...
nicely done by html and css...
can you please provide the source code of the project ?
Muito bom! parabéns! Menu responsivo, prático e fácil de fazer. Congratulations!
Thank you so much for this beautiful and informative video.
This is what I exactly needed to build my physics website.
AWESOME SIR, ITS SAVE ME THIS IS VERY HELPFUL CONTENT
THANKYOU SIR🙏🙏
Outstanding 👍👌
I always watching your videos and I've learned a lot of new things. Please keep making such a great videos.
Thanks...
Thanks, will do!
Please provide us the link in description of code written so that it is easy to decode and implement. Thanks
@Benjabbj se te salio el spanish del enojo, carnal?
@Benjabbj yo no dije eso jaja, es lo que tu quieras entender al final del dia, ademas el codigo gratis ya lo da en el video carnal :v
@Benjabbj te lo repito al final del dia tu crees lo que quieres creer
Amazing tutorial, helps me a lot, thanks
Hello, can you make a drop-down menu for blogger, yeah I know it can also be useful for blogger, but it is annoying if you wish to add content to this menu, you need to go to the theme and then you add it, but if you make a drop-down menu in then, we can add any content through layout tab, so please make a video on this topic 🙏
This was incredibly helpful! Thank you very much ❤
This is Amazing 🤩😍 Sir I Using your Design In My Project
Your every tutorial teach something good stuff 👍🙏🙏
Thank you so much for this. Great video! Helped a lot
Amazing tutorials. Just used it for a project and it working fine with some little edits though👍👍
thank you so much may allah bless you and give to you what you want
Hello sir. I have a suggestion:
Can you make a responsive nav bar like this but with the search field and search button between the logo and nav links?
If you agree with this suggestion, I appreciate that.
thanks for the suggestions
maybe I have used this method somewhere!
watch this video : th-cam.com/video/1ouRuUE3BR4/w-d-xo.html
GREAT!!!
Thank a lot bro. You save my life. 😉
Blessings from Venezuela.
You're welcome!
How do you make the user add stuff to the drop down please?
Really Excellent ,only with html and css. Great
Great concept, but how do you suggest I go about this with a bit of adjustment if I don't want the header to be fixed and for those drop-down content should only have that z-index factor? Would really appreciate your help.
you can use 'position:sticky;' instead of fixed and z-index is important if you want your navbar above of your rest of the contents
Super Mister!
Incredibly nice, I'm just wow
how to make drop down smooth and when i hover also smooth animation? also great tutorial, thanks.
Thank you for this easy to follow video! ♥
In mobile view, is there a code where clicking anywhere else (other than the Menu button) leaves the menu?
Thanks for making this guide. I used your basic concepts and adapted it to be used in React!
Thank you for sharing. You did an amazing job with the video, code and background music!
Glad you liked it!
Great video! Can someone please help me, after you have the menu ready, what is the code to reedirect to the page you want to link when you click in "News" or about, etc.
thank you for sharing such helpful code!!
can you please share the code for use. l.ol
There is nothing in the menu items - you have only made them. Do you know how to do that?
Thank you so much for this. Great video!
How do I get a copy of source code?
This Channel deserve 10 m subs
thank you
Hello sir...... Nicely made but after creating this landing page if we want to create another section it overlaps with the home section. Can you tell what is wrong?
you have to use position:fixed for .header with z-index:1000;
you can also try to change
position: fixed; to position: sticky;
@@MrWebDesignerAnas its not working
Simple and profesional. Thanks.
You're welcome!
When you click a link on the small screen, the drop-down menu should close. How can we do that?
muchas gracias compadre, me ayudo bastante
I like video and channel you. Keep up the spirit of making good videos!
really really really thank you you are at the top of all others
please post a simple shopping cart design video with cash on delivery and online payment API integration with checkout form...html css javascript ...
:focus-within, tanks bro
This was great.
Thanks Sir
Thank you so much for this video.
amazing. I have a question. Could I have 2 columns in small screen 991px?
well you can if you use media queries
@@MrWebDesignerAnas I tried to change width to 50 percent. It's working for me
hey brother very good video, can you put the template please?
Bro Which software using for screen recording?
in media query, my nav bar shows at the bottom of the page after set the top to 100%
Thanks very useful
Are you available to apply this video tutorial to an existing website running on Textpattern CMS? Paid work obviously. Please let me know. Thanks.
Respected Sir
i can link bootstrap with custom css fil.
Link bootstrap file the navbar drop-down is not properly work. Please provide some solution sir ji
Thank's for this video
How to make when you click on that UL again that LI will be disappear, I don't want to click on blank page to make it disappear. You know what I mean right? do I need to learn Java on that request?
great suggestion, I will try to improve on my next video.
Brilliant ! Thanks bro
Great tutoriel ❤
Excellent video!! somebody could help me? i am making my navbar and it doesn't recognize me the second ul, it only recognizes the main one, so i can't make the dropdown. can anyone help me?
try to give a class name to the second ul and target it and style it
Create a website and show it of Dropdown Navigation Menu pleace
How do I now add a paragraph or some kind of text? Because the text stays behind the logo and i cant move it. any tips?
use position:sticky for the header tag
OMGG THANKYOUU SSOOO MUCH for thiss vidd
Thank you very much for your help :)
You're welcome!
can you give mecode of this ✌
Phenomenal 🎉
good and awesome work
and decent background music
What color theme is it?
Nice Drop down Menu Sir.. keep Rocking Sir...
Excellent !
muito obg cara, o unico q deu certo no meu projeto!!1
Subscribed! Content is amazing
Awesome, thank you!
How do you connect tabs to those dropdowns ?
You should have created shorts rather than this. In long video also you are doing so fast that it's difficult to follow
Thank u so match for tutorial :3
No problem 😊
mobile view menu button is now working and not displaying the links
Very much nice content very pog
nice one impressive
Thanks but I never got the focus-within to work. Checked it over and over
which browser you are using? it doesn't support all the browsers yet
Selectors like "header .navbar ul li ul li ul" look a bit daunting. I'd better apply some classes.
Yes, you are right
Grt sir ! Can u provide source code ?
for me the ".navbar" on css, had to be just "nav"
Hello, is the code on github? Or somewhere else? Thank you.
Sorry, no.
@@MrWebDesignerAnas It's ok, thank you for response
Great content brother, keep it up!
Source code pls
The code is not working.... checked 5times the code is same as yours
thanks a lot
Cool !!!! excellent idea.
Excelente como siempre!
Thanks
Menu button is not properly working
Please provide source code
vai client ke amaka bola daba tar project a ami ke deia navigation make korbo ? pleace answer me ?
um sir I don't get it what are you saying?
Superb 😍
Perfect
What is the song name in the beginning of the video?
the song name is written in the videos
In Mobile view not scrollable dropdown menu?????
you have apply 'overflow-y:scroll; height:600px'; to the .navbar class container when mobile responsive
@@MrWebDesignerAnas Thanks Brother It's Work For me. Best Simple Method
Provide Source code .... Please
Awesome!!!!
thanks
awesome❤️❤️❤️
checkbox button not working sir please help
write the exact code as shown in the video!
@@MrWebDesignerAnas its exactly same...it is working on more than 1300 px screen size but not in smaller size
nice