Hamburger menu for Blogger

People out there ambitious of turning their navigations into hamburger which is quite a old right now.  But I've finally here to throw out a simple way of converting your Blogger's navigation to hamburger. This menu hides all the links of navigation until user clicks a button looks like hamburger. Its quite simple lets make it.

See the Pen Hamburger menu by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

What is hamburger menu?

Hamburger is derived from the design of the navicon (3 lines icon) that looks like hamburger. Navigation is remain hidden, unless user clicks the navicon. The navigation appears and can be closed by clicking the navicon again. I've seen many demos with pure CSS solution but I am not in favour since that one required a specific markup. Therefore I am going for Javascript solution, just few lines.

Javascript just toggles the classes, CSS transitions are responsible for animations takes place in menu. Using some transform to make sure that navicon looks good. Lets begin with it.

Integrate with Blogger

Before we start, backup your template for safety reason. Go to Blogger > Template > Edit HTML and click on Jump to Widget. Select PageList, locate the code and close block - see screenshot below:

Above the closed block of code put the following code:

<div class='hamburger-outer'>

  <div class='PageList'>
    <button class='hamburger'>
      <span class='a'></span>
      <span class="b"></span>
      <span class="c"></span>
    </button>

Below the closed block of code put the following code:

</div>

Now find the following text by click Ctrl+F.

</head>

Above it put the following code.

<script type='text/javascript'>//<![CDATA[
function toggleClasses(e){
  if(this.classList.contains('active')){
    this.classList.remove('active');
    e.classList.remove('active');
  }else{
    this.classList.add('active');
    e.classList.add('active');
  }
}
var ham=document.querySelector('.hamburger'),
    nav=document.querySelector('.PageList');
ham.addEventListener('click',function(){
  toggleClasses.call(ham,nav);
});
//]]>
</script>

Now finally find ]]></b:skin> and put following code above it.

.hamburger-outer{
  position:relative;
}
.hamburger{
  width:40px;
  height:40px;
  background:transparent;
  border:none;
  padding:5px 0;
  cursor:pointer;
}
.hamburger span{
  width:40px;
  height:5px;
  border-radius:2.5px;
  display:block;
  background:#222;
  margin:4px 0;
  -webkit-transition:all 300ms ease-in-out;
  -moz-transition:all 300ms ease-in-out;
  transition:all 300ms ease-in-out;
}
.hamburger.active{
  transform:scale(0.8);
}
.hamburger.active span.a{
  transform:rotate(45deg);
  margin-bottom:-8px;
}
.hamburger.active span.b{
  opacity:0;
}
.hamburger.active span.c{
  transform:rotate(-45deg);
  margin-top:-8px;
}
.PageList ul{
  opacity:0;
  visibility:hidden;
  position:absolute;
  left:0;
  top:100%;
  width:200px;
  -webkit-transition:all 300ms ease-in-out;
  -moz-transition:all 300ms ease-in-out;
  transition:all 300ms ease-in-out;
}
.PageList.active ul{
  opacity:1;
  visibility:visible;
}
.PageList ul{
  padding:0;
  margin:0;
  list-style:none;
}
.PageList ul li a{
  display:block;
  padding:0 10px;
  background:#ea6153;
  color:#fff;
  font:700 15px 'segoe ui',sans-serif;
  text-decoration:none;
  line-height:50px;
  text-transform:uppercase;
  -webkit-transition:all 300ms ease-in-out;
  -moz-transition:all 300ms ease-in-out;
  transition:all 300ms ease-in-out;
}
.PageList ul li a:hover{
  background:#222;
}

Not working well?

Following are the possible problems that menu is not working well:

• You might have performed any step wrong.
• Blogger's native changes may integrate with code.
• Any widget code is already added in template.
• Custom Blogger template may be the problem.

You can comment below for any bugs.