Pure CSS hamburger menu without Javascript

Photo by Christopher Gower on Unsplash

CSS - Cascading Style sheet used to display the presentation of a document written in a markup language like HTML. It transforms a web page and formats the way how it will be presented.

As a beginner, working with CSS is amazing; although there are lots of frameworks available online, it's still the best thing to practice from scratch before jumping to available frameworks.

I'd been searching for a Pure CSS hamburger menu without using Javascript until I found one. I want to share this cause I think this is best for beginner.

See Demo here for your reference.

HTML Structure

<div class="navbar">
<input type="checkbox" class="checkbox" hidden id="click">
<div class="sidebar">
<label for="click">
<div class="menu-icon">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
</label>
</div>
</div>code-box

First, we need to structure the menu-icon class; note that menu-icon class serves as container for line class item. we set the container to;

<div class="menu-icon"></div>alert-info
.menu-icon{
margin-top: 3rem;
cursor: pointer;
}code-box

Bloggersph - Pure CSS Humburger menuSecond, we will set all line class to the following code below to create a hamburger menu.

<div class="line line-1"></div>alert-info

.line{
height: .2rem;
width: 2.5rem;
margin-bottom: .6rem;
background-color: #222;
}code-box

Third, we will set line-1 and line-3 class to 1.8rem. (see screenshot above)

.line-1, .line-3{
width: 1.8rem;
transition: all .4s;
}code-box

In addition, we set hover selector to line class; Please note that the default with of line-1 and line-3 class are shorter that line-2 class. So whenever we hover the mouse to menu hamburger the with of all lines will be set to 2.5rem. See  Demo here for your reference.

.menu-icon:hover .line{
width: 2.5rem ;
}code-box

Lastly, here is the pure CSS code that will transform hamburger menu without using JavaScript code.

As you can see we set an input element checkbox on the HTML structure that holds click id and checkbox class and we set this to hidden.

<input type="checkbox" class="checkbox" hidden id="click">alert-info
Whenever the user click the hamburger menu, click id will now look for the label tag which contains for="click" attributes.

Note: label tag holds all line class. (see structure below).

<label for="click">
<div class="menu-icon">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
</label>code-box

In CSS we have checked attribute; so in this case, we use checked attributes together with checkbox class. sounds confusing?

We set an input element with class="checkbox" and we also used checked pseudo element.

<input type="checkbox" class="checkbox" hidden id="click">alert-info
Whenever the checkbox is checked line-1 and line-3 class will rotate as per CSS structure below; and set line-2 to opacity 0, means it will be hidden.

.checkbox:checked ~ .navigation{
left: 8rem;
}

.checkbox:checked ~ .sidebar .line-1{
transform: rotate(-405deg) translate(-5px, 6px);
width: 2.5rem;
}

.checkbox:checked ~ .sidebar .line-2{
opacity: 0;
}

.checkbox:checked ~ .sidebar .line-3{
transform: rotate(405deg) translate(-5px, -6px);
width: 2.5rem;
}code-box

Copy all codes provided below  alert-success

HTML Code

<div class="navbar">
<input type="checkbox" class="checkbox" hidden id="click">
<div class="sidebar">
<label for="click">
<div class="menu-icon">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
</label>
</div>
</div>code-box

CSS Code

.menu-icon{
margin-top: 3rem;
cursor: pointer;
}

.line{
height: .2rem;
width: 2.5rem;
margin-bottom: .6rem;
background-color: #222;
}

.line-1, .line-3{
width: 1.8rem;
transition: all .4s;
}

.menu-icon:hover .line{
width: 2.5rem ;
}

.checkbox:checked ~ .navigation{
left: 8rem;
}

.checkbox:checked ~ .sidebar .line-1{
transform: rotate(-405deg) translate(-12px, 6px);
width: 2.5rem;
}

.checkbox:checked ~ .sidebar .line-2{
opacity: 0;
}

.checkbox:checked ~ .sidebar .line-3{
transform: rotate(405deg) translate(-12px, -6px);
width: 2.5rem;
}code-box


Thank you for taking time to read this published article, and please submit a comment down below if you sincerely like the content.

You can also follow me on social media(s) for more updates.

Post a Comment

Much appreciated for gently taking so much personal time to respectfully submit a published comment on BloggersPh. If you sincerely want to submit some ethical questions, I will be delighted to respond appropriately them here or via private email. Please do not submit a mean or disrespectful comment; they will be eradicated. Enjoy!

Previous Post Next Post