Build A Responsive Sidebar Menu in HTML, CSS, & Javascript - Beginner
Vložit
- čas přidán 2. 01. 2023
- 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/ - Věda a technologie
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!!
Thank you for this bro!
Thank you so much!!
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).
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;
I'm wondering, do you keep the nav absolute, don't allow the body to scroll, but allow main-content to scroll with overflow? I think google analytics does something like this.
Great work 👏
awesome video. saved my life
Amazing stuff as always!
Thank you Yahya!
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.
Great. How do we add pages though for each one?
Your explanations were very clear. Thank you! Can't wait to see more tutorials on your channel. ❤❤ Love from India..
Thank you so much!
youbare awesome.... ❤️🔥
please bring big reactjs project which covers everysingle concept of reactjs 🔥
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.
how did you get the divs to fall under each other when writing .sidebar on css?
How did you get your window controls next to the tabs on your mac?
Thank you very much mannnn
Thank you
Çok teşekkür ediyorum sağ ol.
When i go to another site and the sidebar is not active, or the other way, how can i keep it?
@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?
Thanks for the tutorial bro!
One question, how to make a dropdown on the sidebar?
I’m having issues with the overlay contents for each sidemenu item
Where do I place the divs
Nice keep going
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
Very good bro
Thank you so muchhhh saved my life :D
Glad it helped!
Awesome work
How do I add a toogle button??
Being a very beginner this is just what i was looking for!
However can't get de script working when clicking on btn
Thank you!
You're welcome!
26:00 excellent 👌👍
Do u plan doing that in react js it would be perfect. Also u can show method how to integrate these components irl projects.
salamat lods
Brother, one issue, when i resize the height of the window, it clips the bottom menu links. Any fix?
Good stuff. Its a sub.
Lets see what other goodies you have on the channel.
Thanks dude!
tq, very helpfull
Thank you :)
you didnt mention when it will goes on mobile how it will behave?
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.
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;
}
nice
Not working collapse in bootstrap 5
Hi guys, I'm having challenge here, I'm getting this error:
Uncaught
TypeError: Cannot set properties of null (setting 'onclick')
After adding this code piece:
let btn = document.querySelector('#btn');
let sidebar = document.querySelector('.sidebar');
btn.onclick = function () {
sidebar.classList.toggle('active');
};
What could be the problem.
dont you have a download pls ?
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
Just think about you and notification drop
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
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 👍🏻✌🏻
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
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
source code please
user-img not vorking 😢
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. :)
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
Where's the download?
nice bro
Thank you my friend!
Id is not working anymore
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
Square the image.
8:11
source code?
👌👌👌👌💪💪💪👍👍
code source ?
Create a rubike's cube app
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
@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. :)
nice