Pure CSS collapsible menu

A CSS only collapsable menu is convenient for many reasons. When you use only CSS and HTML (without JavaScript), there’s very little effect on you page load time. It’s also very clean, and can expand from a small icon in the corner to a larger menu with as many options as you want. Here’s a step by step coding tutorial for this CSS menu:

Here’s an example of what we’ll be making:

View on CodePen

Step 1: The HTML

To create a the HTML for the menu, we’ll use a checkbox to keep track of the state of the menu (open or collapsed) and a ul for the list of links. We’ll use a label to display the icon for the menu, either a burger icon or a close button.

Here’s the HTML we’ll be using:

<nav>

  <input type="checkbox" id="menuToggle">

  <label for="menuToggle"><span>&times;</span><span>&#9776;</label>

  <ul>

    <li><a href="#home">Home</a></li>

    <li><a href="#about">About</a></li>

    <li><a href="https://maxpelic.com" target="_blank">Developer</a></li>

  </ul>

</nav>

Next, let’s start adding the CSS…

Step 2: CSS

We’ll start by adding the core functionality to the menu, and then we can add some style to it.

First, let’s hide the checkbox element. We’ll only use it to keep track of the state of the menu, so we don’t need the user to see it.

nav input{

   display:none;

}

Next, we’ll hide the menu icon when the menu is open, and hide the close icon when the menu is closed. We’ll use the sibling combiner ~ to change the visibility when the checkbox is checked.

nav input:checked ~ label span:last-child{

    display:none;

}

nav input:not(:checked) ~ label span:first-child{

   display:none;

}

Let’s position the menu in the top left corner of the page. We’ll also hide any overflow so the options aren’t displayed when it’s collapsed.

nav{

    position:fixed;

    top:20px;

    left:20px;

    min-width:40px;

    min-height:40px;

    overflow:hidden;

}

Last but not least, we’ll make the menu expand and collapse depending on the state of the checkbox. We’ll also set some basic styling to make it look like a menu.

nav ul{

    overflow:hidden;

    width:0;

    height:0;

    padding:0;

    margin:0;

    transition:width 0.5s, height 0.5s;

    list-style:none;

}

nav input:checked ~ ul{

    width:200px;

    height:90px;

}

That’s it for the basic functionality. You can check out the CodePen example for some styling ideas.

You can email me with any feedback/questions at [email protected]