How To Create a Collapsed Sidepanel | collapsible css
/*Thesidepanelmenu*/.sidepanel{ height:250px;/*Specifyaheight*/ width:0;/*0width-changethiswithJavaScript*/ position:fixed;/*Stayinplace*/ z-index:1;/*Stayontop*/ top:0; left:0; background-color:#111;/*Black*/ overflow-x:hidden;/*Disablehorizontalscroll*/ padding-top:60px;/*Placecontent60pxfromthetop*/ transition:0.5s;/*0.5secondtransitioneffecttoslideinthesidepanel*/}/*Thesidepanellinks*/.sidepanela{ padding:8px8px8px32px; text-decoration:none; font-size:25px; color:#818181; ...
/* The sidepanel menu */.sidepanel { height: 250px; /* Specify a height */ width: 0; /* 0 width - change this with JavaScript */ position: fixed; /* Stay in place */ z-index: 1; /* Stay on top */ top: 0; left: 0; background-color: #111; /* Black*/ overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 60px; /* Place content 60px from the top */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */ }/* The sidepanel links */.sidepanel a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s;}
/* When you mouse over the navigation links, change their color */.sidepanel a:hover { color: #f1f1f1;}
/* Position and style the close button (top right corner) */.sidepanel .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px;}
/* Style the button that is used to open the sidepanel */.openbtn { font-size: ...