# How to Make a Collapsible Menu using only CSS

There are many ways to design a menubar (or sometimes called as a navbar) with CSS, and it is quite simple and easy to understand. The requirements are that you should know the basic fundamentals of HTML and CSS and you are good to go with the article.

## Implementing A Pure CSS Collapsible

In this article, I will show a simple way to make a collapsible menu bar using CSS

### Skelton HTML

<div class="collapsible-menu">
<ul>
<li><a href="#"></a>Home</li>
<li><a href="#"></a>Services</li>
<li><a href="#"></a>Projects</li>
<li><a href="#"></a>Blog</li>
<li><a href="#"></a>Contacts</li>
</ul>
</div>
</div>

Next, we’ll add a checkbox with a label of Menu above the div that holds the menu content. We’ll style this later to trigger the opening and closing of the menu.

<body>
<ul>
<li><a href="#"></a>Home</li>
<li><a href="#"></a>Services</li>
<li><a href="#"></a>Projects</li>
<li><a href="#"></a>Blog</li>
<li><a href="#"></a>Contacts</li>
</ul>
</div>
</div>
</body>

Here’s what the menu looks like without any style indented.

.menu-content {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
background-color: rgb(255, 255, 255);
border-bottom: 3px solid #CDE700;
}
list-style-type: none;
}
display:block;
text-decoration: none;
}


It looks similar to this

We’ll style the label for the checkbox by adding a background image for the hamburger menu. We also want to make the label look like it’s a link even though it’s not, so we’ll use . Lastly, we’ll hide the checkbox using .

.collapsible-menu label {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 56px;
display: block;
cursor: pointer;
}
display: none;
}

After implementation, the result will look similar to this.

NOTE: I have used the menu bar icon from font awesome CDN.

### Collapse and Expand

Now we just have to set the default state of the menu to be collapsed when when checkbox is not checked. We do this by changing the max-height of  to , but have it display a  of  when the checkbox is checked.

.menu-content {
max-height: 0;
overflow: hidden;
}
/* Toggle Effect */
input:checked ~ label {
}
}