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
Icons: https://boxicons.com/
Font: https://fonts.google.com/
Background Image: https://tinyurl.com/5ecc56at
🔗 Source code
https://github.com/hosseinnabi-ir/Res...
🔔 Subscribe Now!
/ @codewithhossein
⏱ 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: • #66 Anywhere (Official)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • BEAUZ & JVNA - Crazy | Electronic Pop | NC...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Jordan Schor & Harley Bird - Home
Music provided by NoCopyrightSounds.
Watch: • Jordan Schor & Harley Bird - Home | Futur...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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: • Lost Sky - Where We Started (feat. Jex) | ...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Thanks for watching, I appreciate it 🙏
Made with 💗 by Hossein
Auf dieser Seite können Sie das Online-Video Responsive Glass Sidebar using CSS & JavaScript mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer CODE WITH HOSSEIN 12 November 2022 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 134,022 Mal angesehen und es wurde von like den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
