Build A Responsive Sidebar Menu in HTML, CSS, & Javascript - Beginner

Подписаться 40 тыс.

Просмотров 91 тыс.

50% 1

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/

Наука

Опубликовано:

2 янв 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 98

@SaintHanappi 8 месяцев назад

Jesus Christ, absolutely stunning as a beginner. Thank you so much, for your extraordinary and well explained content.

@zedolok4508 5 месяцев назад

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

@antoniogomezruiz2700 4 месяца назад

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!!

@sharumathi4162 Год назад

Nice and clean Explanation, thanks for your efforts

@hugopinho9534 Год назад

This is amazing! Really helped!!

@dev_ression Год назад

Thank you for this bro!

@giorgiagdgomelashvili423 8 месяцев назад

Great work 👏

@seancurrie-chicago Год назад

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.

@juniorjose06 6 месяцев назад

Thank you so much!!

@tarin6131 Год назад

awesome video. saved my life

@niteshprajapat7918 Год назад

youbare awesome.... ❤️🔥 please bring big reactjs project which covers everysingle concept of reactjs 🔥

@yahyamohamoud7290 Год назад

Amazing stuff as always!

@codecommerce Год назад

Thank you Yahya!

@aboutselphy 4 месяца назад

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;

@ershe 12 дней назад

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.

@illicitbeaver 9 месяцев назад

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.

@nahuelpiguillem2949 Месяц назад

Thank you very much mannnn

@basse9914 Год назад

Great. How do we add pages though for each one?

@arillavigne 5 месяцев назад

Thanks for the tutorial bro! One question, how to make a dropdown on the sidebar?

@iclx7844 11 месяцев назад

When i go to another site and the sidebar is not active, or the other way, how can i keep it?

@geovanyhernandez8640 7 месяцев назад

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!

@johnpaulmejia6259 5 месяцев назад

Wow! Thanks for sharing! I had the same issue when adding space on nav text (2 words).

@Fth.44 5 месяцев назад

Çok teşekkür ediyorum sağ ol.

@AmazingCreationsStudio 5 месяцев назад

lot's tutorial on this topic.. but unique in this channel is that with voice guide.. which is very important and also helpful..

@codecommerce 5 месяцев назад

Thanks a ton

@user-es9es8gm7l 6 месяцев назад

How did you get your window controls next to the tabs on your mac?

@viniciusandrade4941 10 месяцев назад

Thank you so muchhhh saved my life :D

@codecommerce 10 месяцев назад

Glad it helped!

@prashlovessamosa Год назад

Thank you

@rammah Год назад

Nice keep going

@timurturgunov7991 Год назад

Very good bro

@MrLDNTOWN Год назад

how did you get the divs to fall under each other when writing .sidebar on css?

@mtsurov Год назад

Good stuff. Its a sub. Lets see what other goodies you have on the channel.

@codecommerce Год назад

Thanks dude!

@sonyman12 Год назад

Great video as always! Any plans to do a Shopify development tutorial?

@codecommerce Год назад

I haven’t really, but I do have quite a bit of experience with Shopify.

@peterbridge7519 6 дней назад

Being a very beginner this is just what i was looking for! However can't get de script working when clicking on btn

@manjunathmyaleshi4399 Год назад

@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?

@damsan7777 Год назад

Thank you!

@codecommerce Год назад

You're welcome!

@kelubboy 18 дней назад

Awesome work How do I add a toogle button??

@user-yz2ct2sy3l Месяц назад

Do u plan doing that in react js it would be perfect. Also u can show method how to integrate these components irl projects.

@peacesoundsstuff Год назад

I’m having issues with the overlay contents for each sidemenu item Where do I place the divs

@user-yz2ct2sy3l Месяц назад

26:00 excellent 👌👍

@thomas_1611 Год назад

awesome video, thank you. One question: how can we make this sidebar sticky so that it is visible when you scroll the page?

@josephpercival9629 11 месяцев назад

css - .sidebar { position: fixed; }

@smawubay Год назад

tq, very helpfull

@codecommerce Год назад

Thank you :)

@sharifahmed1925 Год назад

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 👍🏽

@codecommerce Год назад

Thank you Sharif. You’re 100% right. Tailwind would be difficult if you don’t first understand CSS.

@joaomendes8294 11 месяцев назад

You cant use react if you dont know javascript People sometimes forget about the roots

@coderush24 Год назад

Hey bro, can you make a spaceX clone using ReactJS/NextJS and Tailwindcss/Material UI. It will be super challenging and fun 🤟🏻✌🏻

@codecommerce Год назад

Will do! They have an awesome site!

@coderush24 Год назад

@@codecommerce yes 👍🏻✌🏻

@codebite590 Год назад

Just think about you and notification drop

@newfort970 Месяц назад

Brother, one issue, when i resize the height of the window, it clips the bottom menu links. Any fix?

@BurNJoE Год назад

salamat lods

@justkailash Год назад

you didnt mention when it will goes on mobile how it will behave?

@user-zt1tm5vx4i 7 месяцев назад

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

@geovanyhernandez8640 7 месяцев назад

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

@hugosantos8907 Год назад

nice

@devlayton Год назад

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?

@JJFlores25 Год назад

React > next js

@speedster784 Год назад

@@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

@JJFlores25 Год назад

@@speedster784 oh really, so you suggest someone who recently been building on react eventually transition to nextJS ?

@codecommerce Год назад

They are very similar. No need for react-router for multi-page apps when using NextJS. :)

@muhammadxuleman6460 Год назад

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

@odessa.ukraine 9 месяцев назад

replace opacity: 0 to display: none and opacity: 1 to display: inline

@Deus-lo-Vuilt Год назад

nice bro

@codecommerce Год назад

Thank you my friend!

@hubesh716 Год назад

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

@varswe Год назад

source code please

@TshepoMokgoatjane 3 дня назад

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.

@techtamil3180 9 месяцев назад

Not working collapse in bootstrap 5

@mudgalz Год назад

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 . . .

@Hacking-NASSA-with-HTML Год назад

Just use cdn then if it works 🤷🙂

@mudgalz Год назад

@@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

@lolilol. 5 месяцев назад

dont you have a download pls ?

@jekaterinakljukina9816 10 месяцев назад

I have a problem with my image, it has the shape of an ellipse instead of circle

@TheTrueHuang 9 месяцев назад

I also have this issue when I collapse it

@peterbridge7519 6 дней назад

Square the image.

@nonewiorem Год назад

user-img not vorking 😢

@daltonrandall4348 6 месяцев назад

Where's the download?

@user-hr6te1ch5q 4 месяца назад

👌👌👌👌💪💪💪👍👍

@user-hf6yb2ru4k 3 месяца назад

8:11

@user-ki7ks6fm5d 5 месяцев назад

Can you provide you code? (a.k.a what you wrote for your code)

@codecommerce 5 месяцев назад

ah sorry, I'm not sure I saved this one..

@user-ki7ks6fm5d 5 месяцев назад

@@codecommerce If you can, can you follow what you did and do it?

@syauqihusin12 5 месяцев назад

Id is not working anymore

@JJFlores25 Год назад

Surprised there isn’t a project video about e-commerce given that your name is code commerce lol

@codecommerce Год назад

Haha funny - most ecommerce now days is styling within shopify, wordpress, or bigcommerce.. I guess I could do a theme with shopify or wordpress. :)

@nikebelias7527 Год назад

Create a rubike's cube app

@zsaruultugs Год назад

source code?

@ghassenbeddouihech2657 3 месяца назад

code source ?

@elvinrossfabella692 8 месяцев назад

@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

@elvinrossfabella692 8 месяцев назад

this is now okay. i have a typo on the onClick method. :)