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
Icons: https://boxicons.com/
Font: https://fonts.google.com/
Background Image: https://tinyurl.com/5ecc56at

🔗 Source code
https://github.com/hosseinnabi-ir/Responsive-Glass-Sidebar-using-CSS-and-JavaScript

🔔 Subscribe Now!
http://www.youtube.com/channel/UCUUA81SSpwJjRl3zp4DZXRQ?sub_confirmation=1

⏱ 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®
Listen: https://youtu.be/zwPhqU29rWQ
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Track: BEAUZ & JVNA – Crazy [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/xgcLwtGlgLU
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Track: Jordan Schor & Harley Bird – Home
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/KmwpogFtb4Q
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Song: Levianth & Axol – Remember (feat. The Tech Thieves)
Music provided by NoCopyrightSounds
Free Download/Stream: http://ncs.io/remember
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Track: Lost Sky – Where We Started (feat. Jex)
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/U9pGr6KMdyg
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

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