How To Create a Collapsed Sidebar | collapsible html
/*Thesidebarmenu*/.sidebar{ height:100%;/*100%Full-height*/ 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.5secondtransitioneffecttoslideinthesidebar*/}/*Thesidebarlinks*/.sidebara{ padding:8px8px8px32px; text-decoration:none; font-size:25px; color:#818181; display:block; ...
/* The sidebar menu */.sidebar { height: 100%; /* 100% Full-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 sidebar */ }/* The sidebar links */.sidebar 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 */.sidebar a:hover { color: #f1f1f1;}
/* Position and style the close button (top right corner) */.sidebar .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px;}
/* The button used to open the sidebar */.openbtn { font-size: 20px; cursor: pointer; ...