Another hamburger menu

Picture designed by me (sorry), using a random hamburger image from Google and HTML/CSS

A few years ago there was a fever about these web pages with a button at their top, and when you click it shows a menu in a slider effect. They were (and still are) called Hamburger Menus. Even though there are some articles saying you should avoid them, they are still in high usage and I decided to develop one, by myself, to put it in my website later.

The button

First, I have to code the button. I decided to use a round, blue, fixed at the top left of the page, with a little of box-shadow button. For the symbol I used font-aweseome:

#menu-button:before {
position: relative;
top: 8px;
left: 12px;
font-family:'FontAwesome';
font-size: 25px;
content:"\f0c9";
color: white;
}
#menu-button {
width: 45px;
height: 45px;
background-color: rgba(52, 152, 219,1.0);
position: fixed;
top: 10px;
left: 10px;
cursor: pointer;
border-radius: 50%;
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.3);
z-index: 1;
}

The Menu

The menu is just a div with a list. Likewise the button, you can use whatever design, here’s mine:

#menu {
width: 250px;
height: 100%;
position: fixed;
left: -250px;
top: 0;
background-color: rgba(52, 73, 94,1.0);
z-index: 0;
}
#menu.opened {
left: 0;
}
#menu ul{
padding: 0;
margin: 0;
}
#menu li{
list-style: none;
}
#menu a {
display: block;
padding: 10px 15px;
color: white;
border-bottom: 2px dashed white;
text-decoration: none;
font-weight: 600;
}
#menu a:hover {
color: rgba(255,255,255,0.8);
border-bottom: 2px solid rgba(255,255,255,0.8);
}

Disclaimer about usage of ID instead of classes

I don’t believe that IDs are demons and you must avoid them to the death. Beyond this fact, I like to use IDs because it easy to manipulate the elements with them, you’ll see below.

The effect

I thought about a simple effect on the menu. First the button should roll down to the bottom of the menu, and the symbol would be replaced by an X. At the same time, the menu would just slide smoothly and show itself. Now I used a class, to represent this state: .opened

#menu-button.opened:before {
content:"\f00d";
}
#menu-button.opened {
top: 90%;
left: 200px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
#menu.opened {
left: 0;
}

Look at the pixels math, the button has 45px of width, the menu has 250px, so when I move the button to a left of 200px, it’s now at the edge of the menu. But for these animations work, you should add in the #menu-button and #menu the transition property, ex: trasition: all .5s linear;

The behavior/action

To give the button an action, I had to add an event listener and, therefore I used JavaScript. As I said before, I rather use IDs in my elements because it’s easier to manage the elements:

document.getElementById("menu-button")
.addEventListener("click",function(){
this.classList.toggle("opened");
document.getElementById("menu").classList.toggle("opened");
});
//For the desk
document.addEventListener("keyup",function(e){
if(e.keyCode == 27){
document.getElementById("menu-button")
.classList.toggle("opened");
    document.getElementById("menu")
.classList.toggle("opened");
}
});

The result

Codepen didn’t work in my smartphone, so I used this http://portfolio.sheldonled.com/menu.html

Did you like it? Please hit the heart below and share this tip with your network =)