HTML CSS

SIMPLE RESPONSIVE SIDEBARS

(quick guide & example)

<div id="main">MAIN</div> <div id="side">SIDE</div>

SIMPLE SIDEBAR HTML

01

2 COLUMNS ON BIG SCREENS body { display: flex; } #main { flex-grow: 1; } #side { width: 30%; }

1 COLUMN ON SMALL SCREENS @media screen AND (max-width:768px) {   body { flex-wrap: wrap; }   #main, #side { width: 100%; } }

SIMPLE SIDEBAR CSS

01

<div id="side">   <button id="tog" onclick="   document.getElementById('side')   .classList.toggle('open')"> TOGGLE   </button> SIDE </div>

DRAWER SIDEBAR HTML

02

<div id="main">MAIN</div>

2 COLUMNS ON BIG SCREENS body{ display: flex; } #main { flex-grow: 1; } #side { width: 200px; }

DRAWER SIDEBAR CSS

02

HIDE TOGGLE BUTTON #tog { display: none; }

ON SMALL SCREENS @media screen AND (max-width:768px) {   SHOW TOGGLE BUTTON   #tog { display: block }   COLLAPSED SIDEBAR BY DEFAULT   #side { width: 50px; }   EXPAND SIDEBAR   #side.open { width: 200px; } }

DRAWER SIDEBAR CSS

02

<div id="main">   <button class="tog" onclick="document.   getElementById('side').classList.remove   ('open')"> CLOSE </button>  MAIN </div>

FULLSCREEN SIDEBAR HTML

03

<div id="side">   <button class="tog" onclick="document.   getElementById('side').classList.   add('open')"> OPEN </button> SIDE </div>

2 COLUMNS ON BIG SCREENS body { display: flex; } #main { flex-grow: 1; } #side { width: 30%; }

FULLSCREEN SIDEBAR CSS

03

HIDE TOGGLE BUTTONS .tog { display: none; }

ON SMALL SCREENS @media screen AND (max-width:768px) {   SHOW TOGGLE BUTTONS   .tog { display: block }

FULLSCREEN SIDEBAR CSS

03

  FULLSCREEN SIDEBAR   #side {     position: fixed;     top: 0; left: 0; z-index: 999;     width: 100vw; height: 100vh;     visibility: hidden; opacity: 0;   }   #side.open { visibility: visible; opacity: 1; } }