Sidebar & Dropdowns – CSS Only

By on November 24th, 2019 in   CSS Front-End HTML

Sidebars are found everywhere, weather it is a web-based app like Facebook, desktop app like Microsoft PowerPoint or engines like Steam, sidebar helps us to explore our options and categorize the related options within each dropdown or category.

In this article, I will demonstrate how to make a simple sidebar using only HTML and CSS. It is aimed at understanding the concept behind dropdowns and explore the options with CSS transitions.

This article will have the following:

The end product will have the following properties:

  • Responsiveness for all screen widths
  • Hover based dropdowns
  • On-demand sidebar for mobile devices (<768px)

Without further ado, let’s get started.

Complete code

Complete code (.zip) of sidebar can be found here.

Explanation of Sidebar

1. Creating basic structure

Hierarchy of elements:

Checkbox input
Checkbox label
  Sidebar menu div
    Sidebar content div
      Sidebar elements list
        List Items
          Dropdown Category Heading Link
          Dropdown Content div
            Dropdown Category elements links

Basic structure HTML:

<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"> 						  
  <span class="navicon"></span>
</label>

<div class="sidebar menu">
  <div class="sidebar-content">
    <ul>
      <li><a href="#">My Profile</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Posts</a>
        <div class="dropdown-content">
          <a href="#">New Post</a>
          <a href="#">All Posts</a>
        </div>
      </li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Users</a>
        <div class="dropdown-content">
          <a href="#">New User</a>
          <a href="#">All Users</a>
        </div>
      </li>
      <li><a href="#">Logout</a> </li>
    </ul>
  </div>
</div>

Given HTML will render a structure like this (nothing special):

Basic Structure
Basic Structure

2. Applying General CSS – Housekeeping

CSS:

/* **************** General Styling *************/
* {
    box-sizing: border-box;
}
html, body {
    height: 100%;
    margin: 0px;
    color: #cccbd0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
/* **************** Sidebar Styling *************/
.sidebar {
    position: absolute;
    width: 20%;
    height: 100vh;
    margin: 0px;
    padding: 0px;
}
.sidebar-content {
    background-color: #1e1e1e;
    width: 100%;
    height: 100%;
}

As a result of basic styling, a list-type look will be observed as shown:

Sidebar - Basic Styling
Basic Styling

3. Styling Sidebar Elements

Below CSS will make the following changes:

  • Apply padding and indenting to lists, list items and list links
  • Add arrows before and after dropdown list headings as indicators
  • Change before and after arrows on focus or hover
.sidebar-content ul {
    list-style-type: none;
    margin: 0px;
    padding: 20px 0px;
}

.sidebar-content li {
    padding: 10px 0px;
    cursor: pointer;
}
.sidebar-content a {
    width: 100%;
    display: inline-block;
    color: inherit;
    text-decoration: none;
    padding: 10px 20px;
}
.sidebar-content .dropbtn::before {
    content: "\21D2  ";
}
.sidebar-content .dropbtn:hover::before {
    content: "\21D8  ";
}
.sidebar-content li a:hover, .sidebar-content .dropdown:hover .dropbtn {
    background-color: #85939969;
}
.sidebar-content li.dropdown {
    width: 100%;
}
.sidebar-content .dropdown-content {
    font-size: 0.9em;
    width: 100%;
    background-color: #85939969;
}
.sidebar-content .dropdown-content a {
    color: inherit;
    display: block;
    text-align: left;
    width: 100%;
    padding: 0px 10px;
}

At this point, our sidebar is beginning to look somewhat acceptable as shown

Sidebar - without dropdowns
Without dropdowns

4. Creating Dropdown Effect With CSS Transition

Below CSS will make the following changes:

  • Initially all the dropdown divs and child anchors (links) have been set to opacity 0 and max-height 0px
  • When dropdown div is hovered, opacity and max-height of focused div are set to 100 and 100px respectively
  • The transition of opacity and max-height on hover will be done slowly giving an animation effect of dropping down
/* Menu Opening Effect*/

/* Settings without hover/focus */
.dropdown-content, .dropdown-content>a { 
    opacity: 0;
    max-height: 0px;
    display: block;
    /* Transition ON mouse over (hover) */
    transition: max-height 0s linear, opacity 0s linear;
}

/* Settings on hover/focus */
.dropdown:hover>.dropdown-content, .dropdown:hover>.dropdown-content>a {
    opacity: 100;
    max-height: 100px;
    /* Transition on mouse leaving */
    transition: max-height 0.5s linear, opacity 0.8s linear;
}
.dropdown:hover>.dropdown-content>a {
    padding: 10px 25px;
}

As a result of above menu-effect CSS, Sidebar will look like this:

Sidebar - without hover
Without hover
Sidebar - hovered
Hovered

5. Creating click-based show/hide button for mobile views

This small section will allow menu to be hidden or shown in smaller screens using following steps:

  • Setting menu button (check box) to hidden
  • Positioning the menu button icon
  • Making menu icon by drawing lines before and after a span element
  • Applying following styles when screen width becomes less than 48em or 768px:
    • Setting sidebar width to auto for responsiveness
    • Displaying menu Icon (menu button)
    • Setting width, height and opacity to 0, to hide sidebar
    • Setting width, height and opacity on focus/click so the sidebar becomes visible
.menu-btn {
    display: none;
}
.menu-icon {
    padding-left: 10px;
    position: absolute;
    z-index: 1;
    display: none;
}
.navicon {
    background: #cccbd0;
    display: block;
    height: 2px;
    position: relative;
    width: 18px;
    margin-top: 15px;
    margin-left: 10px;
    cursor: pointer;
}
.navicon:before, .navicon:after {
    background: #cccbd0;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.navicon:before {
    top: 5px;
}
.navicon:after {
    top: -5px;
}
@media(max-width: 48em) {
    .sidebar{
        width: auto;
    }
    .menu-icon {
        display: block;
    }
    .menu-btn~.menu {
        opacity: 0;
        max-width: 0px;
        height: 0px;
    }
    .menu-btn:checked~.menu {
        opacity: 100;
        max-width: 50%;
        height: auto;
        transition: all 0.3s linear;
    }
}

Viola! the transformation:

Sidebar - Closed
Hidden
Sidebar - Opened
Visible

Conclusion

In conclusion, this is how you can create a simple responsive sidebar using HTML and CSS only. It covers the concept of both static and animating sidebar. There can be many approaches to go about a single thing in the world of development, however the idea here is to keep it simple and complete with minimum lines of code. Moreover, you can alter it in anyway and give it any style to go with your design.

In addition, you can also check out my article on how to make a Navigation Menu with just CSS. Function of Navigation Menus and Sidebars is somewhat similar and any one may be used as per design.

Well I guess that is it for now.Final look is given below. Let me know if you have any questions. Till next time.

Sidebar - Mobile
Mobile
Sidebar - Desktop
Desktop

3 responses to “Sidebar & Dropdowns – CSS Only”

  1. […] Forms With Image Previews Understanding Sidebar & Dropdown Menus (No jQuery) function heateorSssLoadEvent(e) […]

  2. […] are interested in approach-based development using local resources, check out my other articles on Sidebar and Navigation Menu as […]

  3. […] are interested in approach-based development using local resources, check out my other articles on Sidebar and Navigation Menu as […]

Leave a Reply

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