How To Make Drop-down Profile Menu Using HTML CSS & JavaScript | Toggle Menu For Website
ฝัง
- เผยแพร่เมื่อ 18 ก.ย. 2024
- Learn How To Make Drop-down Profile Menu Using HTML CSS & JavaScript | Toggle Menu For Website Using HTML CSS JS Step by Step
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this video we will learn to create a drop-down menu for user profile. If I click on this profile icon, It will open a drop down menu and if we click again it will hide this drop down menu. I have added some Hover effect in this menu link. Wen I move cursor over this link, the font gets bold and the arrow icon moves right side.
We will make this user profile menu design using HTML, CSS and very simple JavaScript.
Download Image: drive.google.c...
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialsp...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialsp...
My recommended tools and tutorials
👉 easytutorialsp...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Images Credit:
www.pexels.com/
-------------------------------------
Like - Follow & Subscribe us:
◼️ TH-cam: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
It helps us to achieve the dropdown menu, but I think you should explain why you need multiple divs and some of the css syntax. We're just following blindly instead of understanding the whole process.
A good tutorial if you're doing dropdown menu once in a while but horrible if you want to understand the fundamentals behind achieving a dropdown menu.
basically, we need multiple divs accordingly, for example if you wanna position 2 or 3 things in one wrapper, you gotta add multiple divs for "wrapping" them, a main boss div then a positioning div then your element personal div, it depends on what you wanna make, if you feel confused add multiple divs and give them all different color borders, padding and margin, it'll help, and I suggest you to gain more information about newfound things so that you can understand and won't be needing tutorial for the next time.
Learning a lot from you dude and the best thing ab ur tuts are you explain very well what and why u r doing and provides us the resources to practice with u as well....Much love and respect For you❤
Wow I have a project that I need something like this for and I got this notification you keep saving lives bro
Kudos to you my Boss and Tutor. I have so much learnt from you and infact, you are the one who made me understands coding. Please can you make a mini project with a touch of BackEnd?
Thanks
on initial level HTML CSS taking more time to learn
You are so sharp. I thought to search this title , but you already uploaded ⚡
You are THE MAN!
Thank you so much for this quick and easy explanation! I greatly appreciate this video and your help!
+1 subscribed!
Loved it❤
Loved it ❤️, thank you!👏
I'm your fan bro ...
But pls can you make for us how to integrate payment method on e-commerce website
Thank you very much! I was trying for a long time to make this menu and your video was super cool, explained without rolling and very well! I managed to do it!
Nice
Thank you! 😊
Love from Nepal bro ❤️
Easy Tutorials, i love your youtube tutorials don't stop champ.
Je peux que te dire merci car tes vidéos sont de très bonne qualités et me sont d'une très grande aide
thanks bro you're the best
its really helpful and if you can more explain about the css classes or ids its will be more helpful thanks carry on.
Great Video, It was really helpful, i copied everything you did and i understood it, Keep it up
man i could kiss u rn, ive got an assignment due and this was on the distintion page, thanks sm man, now i can finally rest
Amazing 🤩
Thanks for beautiful tutorial's. Your tutorials are all ways on the point. And ui is super clean and fresh and bigginer freindly & cool thing.
your video is great you write simple code i easy understand
Now how to link that elements to get the content? I mean how it will navigate to other page( like editing the profile)
Hi, could you shoot the following video about logging in and registering on the site, it would be interesting
you'r really great, man. thanx a lot.
Thank you sir
Respect sir. you helped me understand a lot
thanks for sharing this information
Thanks man, please make a tutorial on how to authenticate the LOGIN page!!!! To the folks around here, hit a like if you have to reduce the speed upto 0.75 and 0.5 as well anytime as the video was going on😂😂😂😂
Thanks bro👍
Welcome 👍
Good job
Amazing it really really helped thank you so much
Thanks bro Allah bless you 🙏
Thanks you so much
I like this!
Thank you🙏🙏
Awesome
Super helpful. Thanks!
bro pls make a content out with slide out multilevel fixed sidebar with vanilla js!
Nice 🤗
Thank you!
Is it compatible with mobile and tablet screens?
i love you man❤❤😂😂
Op bro🔥
Can you make a portfolio for intermidiates
Ap logo that means image Kase banate ho sir please reply me!!
Its Amazing! But How to hide(Toggle) the menu when the user click somewhere else not on profile ?
thank you
Very good!
Thank You so much , you solved ,my big problem tqtqttqtq
Can you drop a video on the admin page for a buying and selling website
best video
Sir can you design a user profile dropdown menu it should only work when the user is successfully logged in to the website and profile dropdown should be displayed on click user icon❤❤
Do you have any website projects
Gracias!!!!!
Awesome lesson. Was easy to follow & straightforward👍
❤❤❤ nice
great
Thanks
Bro make a tutorial video on javascript
helpful :)
there is no source code link in channel community, How I access the source code
Source code link th-cam.com/video/Th_S7kHnm1g/w-d-xo.html
Please make admin panel Completely like metronic template using only html css js
thx ❤
Can u make this in react js?
Hii Sir can you tell me how to keep this if we click anywhere in empty page that should be gone the profile dropdown please sir tell me
I'm a newbie. the dropdown menu not working. it's showing ( Uncaught ReferenceError: menu is not defined )
PLEASE what are u pressing to duplicate a code
Cannot read properties of null (reading 'classList') Please help me sir 🙏🙏🙏🙏
Someone else might see this so... make sure the class name is written correctly. Try doing console.log(document.getElementsByClassNames("yourelementsname")) to see if your spellings the same
Theme name u use in vs code ?
brackets
Source code please
Thank you so much ❤️🙏🏻
I have question
Q:-can we use flex box and CSS
grid together
If(Ans is yes)
Then sir please make a project using CSS flex box and CSS grid
Flex box is basically CSS, it's just a 2 dimensional layout approach
@@olalekanemmanuel6767 then make a project using CSS flex box and CSS grid together
@@VikasKumar00125 I don't understand what you mean
We can add css grid and flexbox in website
But flexbox is more easy and responsive
is it responsive ..?
Its not work drop down in last stage
give me code css and html please
no source code??
I mean meek was in jail guys. He was missing some male booty outside so diddy offered. We can't be mad at him
source code ?
plz provide the source code
source code ???
Not just look functioning also 😡
Bro this not at all responcive
When to apply in inline block and flex or it's our personal preference??? Reply
Thank you