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