Animated Sidebar Menu Using HTML & CSS & JavaScript | Responsive Dashboard Side Navigation Bar
Responsive Animated Sidebar Menu Using HTML & CSS & JavaScript | Dashboard Side Navigation Bar
In this tutorial, I'll be showing you how to make a responsive side navigation bar using just HTML CSS and vanilla Javascript. We're going to learn how to make a sidebar sticky, how to add a cool active effect to the links, how to smoothly shrink and expand the sidebar menu, not only that, we're also gonna learn how to add an animated tooltip that shows up when we hover on one of sidebar links. Now this side navigation bar leads to a really fun project that covers a bunch of css technologies ( flexbox, grid, transitions, white-space ... ), and also a lot of Javascript concepts ( lastElementChild, children, HTMLCollection, forEach ... )
Now if you find this video valuable, please make sure to leave a like, and subscribe to the channel, this is the best way you can support me to make more videos like this.
Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.
💖 Please feel free to donate any amount you think is equal to the value you received from my tutorials. Donation link : https://paypal.me/truecoder
📄 SOURCE CODE : https://bit.ly/3CBqFKo
🚫 DON'T CLICK THIS : https://bit.ly/2SuCfW3
✉️ For Business inquiries : truecoder.business@gmail.com
👇 Timestamps:
0:00 - Intro
0:57 - Setup
1:22 - Sidebar Header
6:54 - The shrink button
14:21 - Search Bar
17:30 - Sidebar Links
31:06 - Sidebar Footer
38:53 - Tooltip
Видео Animated Sidebar Menu Using HTML & CSS & JavaScript | Responsive Dashboard Side Navigation Bar канала True Coder
In this tutorial, I'll be showing you how to make a responsive side navigation bar using just HTML CSS and vanilla Javascript. We're going to learn how to make a sidebar sticky, how to add a cool active effect to the links, how to smoothly shrink and expand the sidebar menu, not only that, we're also gonna learn how to add an animated tooltip that shows up when we hover on one of sidebar links. Now this side navigation bar leads to a really fun project that covers a bunch of css technologies ( flexbox, grid, transitions, white-space ... ), and also a lot of Javascript concepts ( lastElementChild, children, HTMLCollection, forEach ... )
Now if you find this video valuable, please make sure to leave a like, and subscribe to the channel, this is the best way you can support me to make more videos like this.
Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.
💖 Please feel free to donate any amount you think is equal to the value you received from my tutorials. Donation link : https://paypal.me/truecoder
📄 SOURCE CODE : https://bit.ly/3CBqFKo
🚫 DON'T CLICK THIS : https://bit.ly/2SuCfW3
✉️ For Business inquiries : truecoder.business@gmail.com
👇 Timestamps:
0:00 - Intro
0:57 - Setup
1:22 - Sidebar Header
6:54 - The shrink button
14:21 - Search Bar
17:30 - Sidebar Links
31:06 - Sidebar Footer
38:53 - Tooltip
Видео Animated Sidebar Menu Using HTML & CSS & JavaScript | Responsive Dashboard Side Navigation Bar канала True Coder
sidebar sidebar menu side navigation bar html sidebar menu sidebar menu using html css side bar menu css responsive side navigation bar in html css javascript sidebar menu html css css side navigation bar sidebar html css responsive sidebar sidebar animation dashboard sidebar menu css sidebar html css javascript
Комментарии отсутствуют
Информация о видео
22 сентября 2021 г. 17:50:17
00:48:01
Другие видео канала
