Simple Responsive Dropdown Navigation Menu Using Pure HTML And CSS Only
HTML-код
- Опубликовано: 4 июн 2021
- 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/photos/78A265wPiO4
New To My Channel Subscribe Now And See More Stuff Like This:
/ @mrwebdesigneranas
#PureCSS
#DropDown
#NavigationMenu
Muito bom! parabéns! Menu responsivo, prático e fácil de fazer. Congratulations!
God bless you more my mentor. I love you. Just exactly how my client wanted his navbar to be.
This was incredibly helpful! Thank you very much ❤
Thank you so much!!! After hours & hours struggling to understand, you helped me. Your method is logic and easy to follow.
Glad it helped!
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!
Amazing tutorials. Just used it for a project and it working fine with some little edits though👍👍
I like video and channel you. Keep up the spirit of making good videos!
Your every tutorial teach something good stuff 👍🙏🙏
Really Excellent ,only with html and css. Great
GREAT!!!
Thank a lot bro. You save my life. 😉
Blessings from Venezuela.
You're welcome!
Thank you for sharing. You did an amazing job with the video, code and background music!
Glad you liked it!
good and awesome work
and decent background music
Thank you so much for this. Great video!
Super Mister!
Incredibly nice, I'm just wow
This is Amazing 🤩😍 Sir I Using your Design In My Project
Great content brother, keep it up!
Nice Drop down Menu Sir.. keep Rocking Sir...
Thank you so much for this. Great video! Helped a lot
Thanks for making this guide. I used your basic concepts and adapted it to be used in React!
thank you for sharing such helpful code!!
Thank you so much for this video.
This is what I exactly needed to build my physics website.
Cool !!!! excellent idea.
AWESOME SIR, ITS SAVE ME THIS IS VERY HELPFUL CONTENT
THANKYOU SIR🙏🙏
This Channel deserve 10 m subs
Amazing content sir...
nicely done by html and css...
can you please provide the source code of the project ?
Excelente como siempre!
muchas gracias compadre, me ayudo bastante
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?
Amazing tutorial, helps me a lot, thanks
This was great.
Thanks Sir
Thank you so much for this beautiful and informative video.
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
Great tutoriel ❤
Subscribed! Content is amazing
Awesome, thank you!
OMGG THANKYOUU SSOOO MUCH for thiss vidd
nice one impressive
Phenomenal 🎉
Brilliant ! Thanks bro
Very much nice content very pog
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
muito obg cara, o unico q deu certo no meu projeto!!1
Simple and profesional. Thanks.
You're welcome!
Superb 😍
:focus-within, tanks bro
Awesome
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 🙏
really really really thank you you are at the top of all others
awesome❤️❤️❤️
Awesome!!!!
thank you so much may allah bless you and give to you what you want
Thank's for this video
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 very much for your help :)
You're welcome!
Thanks very useful
how to make drop down smooth and when i hover also smooth animation? also great tutorial, thanks.
Thank u so match for tutorial :3
No problem 😊
nice
hey brother very good video, can you put the template please?
super, danke
Perfect
When you click a link on the small screen, the drop-down menu should close. How can we do that?
thanks a lot
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
good ... ok ...
thanks
How do you make the user add stuff to the drop down please?
DAT SIMPLE!
Bro Which software using for screen recording?
Are you available to apply this video tutorial to an existing website running on Textpattern CMS? Paid work obviously. Please let me know. Thanks.
in media query, my nav bar shows at the bottom of the page after set the top to 100%
Thanks
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 : ruclips.net/video/1ouRuUE3BR4/видео.html
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
Grt sir ! Can u provide source code ?
There is nothing in the menu items - you have only made them. Do you know how to do that?
How do you connect tabs to those dropdowns ?
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
thank u
Welcome
Show my Friends 👍
Create a website and show it of Dropdown Navigation Menu pleace
please post a simple shopping cart design video with cash on delivery and online payment API integration with checkout form...html css javascript ...
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
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
cool next time post source code
noted!
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
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?
What color theme is it?
How do I get a copy of source code?
Hello, is the code on github? Or somewhere else? Thank you.
Sorry, no.
@@MrWebDesignerAnas It's ok, thank you for response
can you give mecode of this ✌
3awdih
for me the ".navbar" on css, had to be just "nav"
mobile view menu button is now working and not displaying the links
Source code pls
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
Provide Source code .... Please
The code is not working.... checked 5times the code is same as yours
Menu button is not properly working
Please provide source code
What is the song name in the beginning of the video?
the song name is written in the videos