Build A Responsive Sidebar Menu in HTML, CSS, & Javascript - Beginner
HTML-код
- Опубликовано: 29 апр 2024
- In this video I build out a fully responsive collapsible sidebar menu using HTML, CSS, and about 4 lines of Javascript. This is a beginner level project great if you are learning web development!
🔥 Hostinger🔥
bit.ly/HostingerCodeCommerce
ZeroTo Mastery:
Master React JS Course - bit.ly/Learn-React-JS
Complete Web Developer in 2023 - bit.ly/Complete-Web-Developer
💻 Solve EDABIT coding challenges - BEGINNER! 💻
bit.ly/Code-Challenges
🔥 Connect with me on IG 🔥
/ fireclint
☕ Support the channel ☕
www.buymeacoffee.com/clintbriley
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj
Icons used from Box Icons
boxicons.com/ 
Наука
man i was searching for something like this, you have no idea how long i search and now i finally learn, i am learning on my own tks man god bless you
Jesus Christ, absolutely stunning as a beginner. Thank you so much, for your extraordinary and well explained content.
Man this tutorial is awesome! Currently I did a backend application, and I am not very familiar to the frontend development, therefore my server looks awful... But with this tutorial my server looks much much better in an instant. I´ve learned a lot with this video about div, classes and ids, now I am testing new views, thanks a lot again!!
Nice and clean Explanation, thanks for your efforts
This is amazing! Really helped!!
I'd love to see how to make this kind of side bar in react. I've tried recreating and think im close. But would love to see how you do it.
Thank you for this bro!
youbare awesome.... ❤️🔥
please bring big reactjs project which covers everysingle concept of reactjs 🔥
Thanks for the tutorial bro!
One question, how to make a dropdown on the sidebar?
Thank you so much!!
awesome sidebar :) but i would chage all the PX stylings into Rem
for people with scrolling problems:
insteat of position: absolute use fixed.
for the tooltips also dont use position,top,left and transform.
move the tooltip span into the and in css just add margin-left: 1rem;
awesome video. saved my life
Great work 👏
How did you get your window controls next to the tabs on your mac?
This is a brilliant guide, I am currently self-teaching myself html / css / js- but often find myself struggling to work out a process. I feel like I'm learning a lot, but then forgetting the structure - or ever wanting to achieve something that is beyond possibility.
Amazing stuff as always!
Thank you Yahya!
Great. How do we add pages though for each one?
I’m having issues with the overlay contents for each sidemenu item
Where do I place the divs
Hey Bro
Make the font-size bigger on your VScode editor so we can see you code better.
Thank you.
how did you get the divs to fall under each other when writing .sidebar on css?
Thank you so muchhhh saved my life :D
Glad it helped!
@Code Commerce if side menu scroll added in the sense pop-up values are hiding behind the screen can you please help me regarding this?
lot's tutorial on this topic.. but unique in this channel is that with voice guide.. which is very important and also helpful..
Thanks a ton
When i go to another site and the sidebar is not active, or the other way, how can i keep it?
Thank you
Çok teşekkür ediyorum sağ ol.
Slight modification that I did to the styling for my specific use case.
Since we are setting the nav-item name's opacity to 0, when collapsed, hovering above its position will trigger the tooltip.
This took care of that:
.sidebar .nav-item {
display: none;
}
.sidebar.active .nav-item {
display: inline-block;
}
My nav-item texts are long, so when the tooltip was being triggered, it would keep the 80px as width and increasing the width would increase all the tootips.
This will help with the dynamic width, plus it helped with alignment:
.sidebar ul li .tooltip {
position: fixed;
...
display: none;
}
.sidebar ul li:hover .tooltip {
display: inline;
}
Hope this helps anyone who was experiencing the same issues!
Wow! Thanks for sharing! I had the same issue when adding space on nav text (2 words).
Nice keep going
Very good bro
Great video as always! Any plans to do a Shopify development tutorial?
I haven’t really, but I do have quite a bit of experience with Shopify.
Good stuff. Its a sub.
Lets see what other goodies you have on the channel.
Thanks dude!
Thank you!
You're welcome!
nice
Just think about you and notification drop
Great to see html and css tutorials
You can’t use tailwind if you don’t know how to use css so thank you very much 👍🏽
Thank you Sharif. You’re 100% right. Tailwind would be difficult if you don’t first understand CSS.
You cant use react if you dont know javascript
People sometimes forget about the roots
salamat lods
Hey bro, can you make a spaceX clone using ReactJS/NextJS and Tailwindcss/Material UI. It will be super challenging and fun 🤟🏻✌🏻
Will do! They have an awesome site!
@@codecommerce yes 👍🏻✌🏻
awesome video, thank you. One question: how can we make this sidebar sticky so that it is visible when you scroll the page?
css - .sidebar {
position: fixed;
}
you didnt mention when it will goes on mobile how it will behave?
tq, very helpfull
Thank you :)
Plzz make ecommerce project in tailwind css with Redux toolkit plz bro becuz there is no ecommerce project in your channel so am waiting for your response
Could you make a ecommerce shop from top to bottom with built in stripe api maybe? Nextjs and tailwindcss with the new 13v of nextjs with font optimization etc?
React > next js
@@JJFlores25 next js is a react framework my guy with alot more advantage over pure react. next js handles routing by default, increase SEO which helps to increase search index along and with many more stuff
@@speedster784 oh really, so you suggest someone who recently been building on react eventually transition to nextJS ?
They are very similar. No need for react-router for multi-page apps when using NextJS. :)
dear sir , thanks so much for your effort 😊😊, need help for something if i need to move this project from left to right view , what i need to change in code
In the sidebar styling, so .sidebar {...}, instead of having left: 0; do right: 0;
Also, you will need to adjust all the other stylings to the right
Not working collapse in bootstrap 5
I am facing a problem. Whenever I add a space in the text of tooltip or the nav-item like "Add Question" the tooltip keeps shrinking even if I increase the width or som,ething it remain the same. Could you look into it
replace opacity: 0 to display: none and opacity: 1 to display: inline
In react app Tailwind css classes doesn't work when I pass through props in component as bgc="red" -> className={`bg-${props.bgc}-500`} but work if I pass whole class name like "bg-red-500"
One more thing if I use cdn link of tailwind css then it works but not with installed tailwind css
I've read somewhere that tailwind doesn't support dynamic classes it compile only given classes...
What to do
Please reply . . .
Just use cdn then if it works 🤷🙂
@@Hacking-NASSA-with-HTML but what if I've to build classes and at last when I will run npm build it will miss the undefined classes
I have a problem with my image, it has the shape of an ellipse instead of circle
I also have this issue when I collapse it
dont you have a download pls ?
nice bro
Thank you my friend!
user-img not vorking 😢
source code please
8:11
Where's the download?
Id is not working anymore
code source ?
👌👌👌👌💪💪💪👍👍
Create a rubike's cube app
source code?
@codecommerce, the .sidebar.active ~ .main-content is not working for me :")
I hope you can explain more about the .sidebar.active.
from my understanding, .notation is used to access class but this time, you have .active. so it's different
this is now okay. i have a typo on the onClick method. :)
Can you provide you code? (a.k.a what you wrote for your code)
ah sorry, I'm not sure I saved this one..
@@codecommerce If you can, can you follow what you did and do it?
Surprised there isn’t a project video about e-commerce given that your name is code commerce lol
Haha funny - most ecommerce now days is styling within shopify, wordpress, or bigcommerce.. I guess I could do a theme with shopify or wordpress. :)
This is not responsive right? There are not any media Querries used
nice