Responsive Glass Sidebar using CSS & JavaScript

Hello everyone 😊 I'm here again with another CSS tutorial, this time, mixed with JavaScript. If you're looking for a complete Glass Sidebar design using CSS & JS, this video's made for you. I've also considered Responsive Design rules in this project and you will definitely find it useful 😉

📂 Assets

🔗 Source code

🔔 Subscribe Now!

⏱ Timestamps
00:00 Glass Sidebar Preview
00:58 Sidebar Logo Elements
01:13 General Styles
01:51 Sidebar Glass Effect
02:55 Sidebar Logo Styles
04:26 Adding Nav Title & Items
05:37 Nav Title & Items Styles
08:25 Adding More Nav Items
09:37 Sidebar Line Styles
09:57 Sidebar Closed Mode
10:27 Adding Toggle Icon
10:47 Toggle Icon Styles
10:58 Sidebar Opened Mode
15:00 Enabling Toggling using JS
16:58 Sidebar Items Click Effect
18:11 Thanks For Watching :)

🎵 Music
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Ikson - Anywhere [Official]
Music provided by Ikson®
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Jordan Schor & Harley Bird - Home
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Song: Levianth & Axol - Remember (feat. The Tech Thieves)
Music provided by NoCopyrightSounds
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Lost Sky - Where We Started (feat. Jex)
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Thanks for watching, I appreciate it 🙏
Made with 💗 by Hossein

[kiddhkane]

The design is really cool and modern. Good job man.

[samannoyb]

You are really cool bro! You always reply to people's comments, and simultaneously make awesome projects!! Keep it up!

[enzog_]

Wow, that's awesome 🥰
Love from Italy 💚🤍❤

[HICjump]

Grafana 9 uses the same concept. Nice video!

[ruslansergeyuvic]

Wow omg nice video, very wll my dear friend 🥰♥️

[PHPRunnerTipsAndTricks]

@CodeWithHossein Can I please share this tutorial with my subscribers? It is such a good example of how to do this and I believe that most of them can learn a lot from you. Please?

[KINTUALEXLADWONG]

What are some of the Extensions you are using sir?

[ghostrider]

Thank You Brothers For Your Amazing Videos which give us helps. May Allah Bless You ❤❤❤❤❤❤❤❤

[vivoichsan]

Do you have responsive HTML CSS and JS only

[henxed]

People using firefox are crying :D

p.s. backdoor-filter: blur still doesn't work by default

[rashidbinzaiyed]

How to use the GitHub? I created an account on that, it's been the 3rd year, and i don't even understand and know how to use it...!