3 Ways to Create Responsive Sidebars With Pure CSS HTML

INTRODUCTION

EASY TECHNICAL SIDEBARS

Welcome to a quick tutorial on how to create a sidebar with CSS and HTML. Yes, there are literally tons of sidebar plugins on the Internet these days. So let us do something a little different in this guide. Instead of giving “nice-looking” sidebars without explanation, let us walk through a few “ugly-looking” technical barebone examples instead.

Learn the mechanics behind how responsive sidebars work, and you will be able to create as many as you wish – Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

 

PREAMBLE

DOWNLOAD & NOTES

First, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

There is nothing to install, so just download and unzip into a folder. If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

SECTION A

SIMPLE RESPONSIVE SIDEBAR

Let us start with the simplest design – A 2 columns main-sidebar layout on big screens. Then, let it collapse into a single column on smaller screens.

 

THE HTML

1-basic.html
<div id="demoA">
  <div id="demoAMain">MAIN</div>
  <div id="demoASide">SIDE</div>
</div>

Yep, this is as simple as it can get.

  • Create the main container <div id="demoA">.
  • Sandwich the main content <div id="demoAMain"> and sidebar inside <div id="demoASide">.

 

CSS FOR THE BIG SCREENS

1-basic.html
 /* (A) BIG SCREEN - 2 COLUMN LAYOUT */
#demoA { display: flex; }
#demoAMain {
  width: 70%;
  background: #ffe0de;
}
#demoASide {
  width: 30%;
  background: #deffff;
}

To create a 2 column layout, all we need is:

  • Set the main container #demoA to display: flex.
  • Define a percentage width for the main content #demoAMain { width: 70% } and sidebar #demoASide{ width: 30% }

That’s all. CSS will do the rest of the magic.

 

 

CSS FOR THE SMALL SCREENS

1-basic.html
/* (B) SMALL SCREEN - 1 COLUMN LAYOUT */
@media screen AND (max-width:768px) {
  #demoA { flex-wrap: wrap; }
  #demoAMain, #demoASide { width: 100%; }
}

To collapse the 2 columns layout:

  • We will use CSS media query to apply a different set of styles on the smaller screens – @media screen AND (max-width:768px).
  • #demoA { flex-wrap: wrap; } will allow the main and sidebar to break into 2 different rows if their width is wider than the screen.
  • #demoAMain, #demoASide { width: 100%; } does the exact magic of collapsing into a single column.

 

SIMPLE SIDEBAR DEMO

MAIN
SIDE

 

SECTION B

DRAWER SIDEBAR

Following up, let us create a more “modern” drawer sidebar – Show the “full” sidebar on big screens, and “minimized” on smaller screens.

 

THE HTML

2-drawer.html
<div id="demoB">
  <!-- SIDEBAR -->
  <div id="demoBSide">
    <button id="bTog" onclick="document.getElementById('demoB').classList.toggle('open')">
      &#9776;
    </button>
    <div class="item">
      <span class="ico">&#9728;</span> 
      <span class="txt">FOO BAR</span>
    </div>
    <div class="item">
      <span class="ico">&#9729;</span> 
      <span class="txt">HELLO WORLD</span>
    </div>
  </div>
 
  <!-- MAIN CONTENTS -->
  <div id="demoBMain">MAIN</div>
</div>

No need to panic. Keep calm and look carefully – This is literally the same as the simple sidebar.

  • Create the main container <div id="demoB">, sandwich the sidebar <div id="demoBSide"> and the main content <div id="demoBMain" inside.
  • The sidebar does have some “extra goodies”.
    • A button <button id="bTog"> to toggle full size/minimized on smaller screens.
    • Take note of the one-line Javascript. The button toggles a open CSS class on the main container <div id="demoB"> when pressed.
    • Menu items <div class="item">, each containing an icon <span class="ico"> and text <span class="txt">.

 

CSS FOR BIG SCREENS

2-drawer.html
/* (A) BIG SCREEN */
/* (A1) 2 COLUMN LAYOUT */
#demoB { display: flex; }
#demoBSide {
  width: 200px;
  background: #deffff;
  transition: all 0.3s;
}
#demoBMain {
  width: 100%;
  background: #ffe0de;
}
/* (A2) HIDE DRAWER BUTTON */
#bTog { display: none; }

Yep, quite literally the same as the simple sidebar.

  • Set the main container #demoB to display: flex.
  • Set the width of the sidebar #demoBSide and the main content #demoBMain.
  • Some of you sharp code ninjas should have noticed width: 200px and width: 100%. Why didn’t this break into 2 different rows? Remember flex-wrap: wrap? That’s a trick to learn about flexible containers. If we don’t allow wrapping, CSS will try it’s best to fit everything into a single line. So width: 100% effectively turns into “whatever screen space is left after 200 pixels on the left”.
  • Lastly, hide the drawer button #bTog with display: none.

 

 

CSS FOR SMALL SCREENS

2-drawer.html
/* (B) SMALL SCREEN */
@media screen AND (max-width:768px) {
  /* (B1) SHOW DRAWER BUTTON */
  #bTog { display: block; }
  /* (B2) CLOSED DRAWER BY DEFAULT */
  #demoBSide { width: 50px; }
  #demoBSide .ico { font-size: 30px; }
  #demoBSide .txt { display: none; }
  /* (B3) OPEN DRAWER */
  #demoB.open #demoBSide { width: 200px; }
  #demoB.open .ico { font-size: inherit; }
  #demoB.open .txt { display: inline; }
}

Nothing much for the CSS changes on the small screens actually… Literally just:

  • Making the drawer button visible #bTog { display: block; }
  • Minimize the width of the sidebar #demoBSide { width: 50px; }, hide the text #demoBSide .txt { display: none; }, and show a bigger icon #demoBSide .ico { font-size: 30px; }.
  • Lastly, remember that a .open CSS class will be added to the main container when the button is clicked? We can use that to transform the sidebar accordingly… Literally just reverting the width of the sidebar, and showing the menu text.

 

DRAWER SIDEBAR DEMO

FOO BAR
HELLO WORLD
MAIN

 

SECTION C

FULLSCREEN SIDEBAR

Lastly, let us go through another “modern” responsive sidebar solution – Show a 2 column layout on big screens, but hide the sidebar on small screens; The sidebar becomes a full-screen menu and can be toggled by pressing a button.

 

THE HTML

3-fullscreen.html
<div id="demoC">
  <!-- SIDEBAR -->
  <div id="demoCSide">
    <button class="cTog" onclick="document.getElementById('demoC').classList.toggle('open')">
    X
    </button>
    <div>SIDEBAR</div>
  </div>
 
  <!-- MAIN CONTENTS -->
  <div id="demoCMain">
    <button class="cTog" onclick="document.getElementById('demoC').classList.toggle('open')">
    &#9776;
    </button>
    <div>MAIN</div>
  </div>
</div>

Once again, don’t panic. This is quite literally the same old “container to sandwich the sidebar and main”. But as you can see, the only difference here are 2 buttons <button class="cTog"> to toggle the fullscreen sidebar on small screens.

 

BIG SCREEN CSS

3-fullscreen.html
/* (A) BIG SCREEN */
/* (A1) 2 COLUMN LAYOUT */
#demoC { display: flex; }
#demoCSide {
  width: 30%;
  background: #deffff;
  transition: all 0.3s;
}
#demoCMain {
  width: 70%;
  background: #ffe0de;
}
/* (A2) HIDE TOGGLE BUTTONS */
.cTog { display: none; }

I think you guys should be bored of this by now… Same old 2 columns layout, hide the toggle buttons.

 

 

SMALL SCREEN CSS

3-fullscreen.html
 /* (B) SMALL SCREEN */
@media screen AND (max-width:768px) {
  /* (B1) SHOW TOGGLE BUTTONS */
  .cTog { display: block; }
  /* (B2) TRANSFORM TO FULL SCREEN */
  #demoC { display: block; }
  #demoCMain { width: 100%; }
  #demoCSide {
    position: fixed;
    top: 0; left: 0;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    visibility: hidden;
    opacity: 0;
  }
  /* (B3) SHOW SIDEBAR */
  #demoC.open #demoCSide { 
    visibility: visible;
    opacity: 1;
  }
}

The CSS transformation for small screens is a little tricky, but still relatively straightforward nonetheless.

  • Show the toggle buttons .cTog { display: block; } Doh.
  • #demoC { display: block; } and #demoCMain { width: 100%; } will literally break the 2 columns layout, leaving only the main section on the screen.
  • To turn the sidebar into a fullscreen menu:
    • The old trick of position: fixed; top: 0; left: 0; z-index: 999; will fix the sidebar on the screen, on top of all elements.
    • To make the sidebar fill up the entire screen – width: 100vw; height: 100vh;
    • Of course, we will have to hide the (now) fullscreen sidebar by default – visibility: hidden; opacity: 0;
  • Lastly, remember that  an open CSS class will be toggled on the container again? We simply use that to trigger the show.hide with visibility: visible; opacity: 1;

That’s all.

 

FULLSCREEN SIDEBAR DEMO

SIDEBAR

MAIN

 

 

EXTRA

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

INFOGRAPHIC

Responsive CSS Sidebar (click to enlarge)

 

CLOSING

WHAT’S NEXT?

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *