HTML CSS

SIMPLE HTML CSS HIDDEN SIDEBAR

(quick & simple example)

LEFT : SIDEBAR <nav id="page-side">   <a href="#">First</a>   <a href="#">Second</a> </nav>

THE HTML

01

RIGHT : CONTENTS <main id="page-main">   <button id="side-button"   onclick="sidebar()">&#9776;</button>   <p>Contents</p> </main>

function sidebar () {   document.getElementById   ("page-side").classList.toggle("show"); }

THE JAVASCRIPT

02

FLEX LAYOUT BODY body {   display: flex; min-height: 100vh;   padding: 0; margin: 0;  }

THE CSS

03

TOGGLE SIDEBAR SHOW/HIDE #page-side { width: 0; visibility: hidden; } #page-side.show { width: 150px; visibility: visible; }

FLEX GROW MAIN CONTENTS #page-main { flex-grow: 1; }