How to Create a POP OUT SIDE PANEL with HTML, CSS & JavaScript

View the SOURCE CODE:
codepen.io/dcode-software/pen...
In today's video I'll show you how to build a pop out (or collapsible) side panel using HTML, CSS & JavaScript. This is easy to do, and uses CSS3 Flexbox and JavaScript Class Toggles.
Google Material Icons Library:
fonts.google.com/icons?icon.q...
Google Material Icons Usage Guide:
developers.google.com/fonts/d...
Chapters:
0:00 Overview
1:58 Writing the HTML
5:10 Writing the CSS
13:15 Writing the JavaScript
14:07 Finishing Up
🏫 My Udemy Courses - www.udemy.com/user/domenic-co...
🎨 Download my VS Code theme - marketplace.visualstudio.com/...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript

[@j3z741]

Thank you for this easy-to-follow video also bringing some interesting extras like google font icons which i didn't know about! Enjoying your videos a lot as you make it all very comprehensible. Thanks!

[@envadd.6556]

Thank you sir! Simple, clean and works like a charm.

[@CreativeTutorialsWeb]

Hi Dom. Amazing videos 🙂💙😁

[@senseicodes]

Great video. Quick one. Why not use svg icon instead of loading all of Google's material icons?

[@AndreasLepsuch]

Thank you for this. With some changes it is ideal as custom component.

[@cached7466]

Thank you for the tutorial!!!
Quick question! The button is causing a gap between the background that is in "main" and the side bar.
how could i remove it so they are side by side? and that the button floats over the background of my contents in "main"
Thank you!

[@ahh170]

Hi Dom!
I have a few Questions!!
how do i animate the side panel?
how do i make it initially closed?

[@sayeed__ajmal]

Thank You Sir. Can You please tell me what vscode color theme you are using and which font you are using..ThankYou.

[@mikaelfarro]

Underrated

[@gownat]

great bro.pls continue your good work.

[@dcode-software]

Awesome :) thank you.

[@glow8017]

Awesome Video, it help me a lot! However, I found it difficult or almost impossible to place the panel on the left for my website, as well as when the website starts I wanted the side panel to be hidden. Would you be able to help me with that? Thanks.

[@maneth3448]

Coooool

[@abubalo]

Hi Dom, please can you make a tutorial on how build multi-step form including validation with Javascript?

[@dcode-software]

Hey, absolutely - I've got a couple of upcoming videos about creating forms so I hope you can find value in those :)

[@abubalo]

@@dcode-software Thank you so much, I was not wrong when I said you are the best teacher on RUclips.

[@Parken26]

How to change this so it appears from the left side, rather than the right ?

[@DanielEscasa]

This will be on the left and will hide or pop-out as determined by the
JavaScript just before the end tag

keyboard_double_arrow_left
keyboard_double_arrow_right

Main, fixed panel now on the right
…

[@dellbecker3657]

hi BOSS, I am one of your subscribers,
I greatly appreciate your availability ...
I also have a favor to ask, can you make a multi-level form with conditions for entering the names of the children ...
For example :
Last name :
First name :
But if they are twins, we must have
Name 1:
First name 1:
and
Name 2:
First name 2:

[@dcode-software]

Hey, thanks. I'll note it down - I've got a couple of upcoming videos about building complex forms so maybe they can help you out.

[@vitorgouveia5378]

@@dcode-software 👑 here king, you dropped it

[@S-Lomar]

🤩🤩🤩😍😍😍😍😍😍😍😍🤩

[@olegpupkin6892]

With transitions will be better

[@moneyfr]

Error 404 on your udemy course