Create Mobile Responsive HamBurger Drop Down Menu


Mobile Responsive hamburger drop down menu

 One of the biggest hurdle that I had to go through was making a mobile responsive navigation menu for my template because when your template already has its own navigation then it becomes difficult to make your own but thanks to 'isMobileRequest.' 

When I came across the uglier version of my drop down menu then I decided to style it using CSS and share it with you all. In this post you will learn to create mobile responsive hamburger drop down menu for blogger. Before I come up to the coding part, let me tell you the features of this amazing and responsive hamburger drop down menu. For live demo, reduce the size of browser.


  • Fully Mobile Responsive
  • Will appear only in mobile devices - ( isMobileRequest )
  • Uses beautiful CSS transition effects
  • Drop down menu tabs can be added as many as desired
  • It includes your blog logo as well - (You can easily remove if you don't want it)

 

What you need to do?

As this particular HamBurger drop down menu will appear only in mobile version of your template so just surround your desktop menu with isMobileRequest conditional tags. In this way your desktop menu will appear only in desktop devices and this particular menu will appear only in mobile devices. 

<b:if cond="data:blog.isMobileRequest == &quot;false&quot;"> 
     
Your Desktop Menu
        
</b:if>

 

Create HamBurger Drop Down Menu:

  • Go to your Blogger account > Theme > Backup Template.
  • Now click on Edit HTML 
  • Now Search for <body> tag and just below it paste the following code. 

  •  <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>     
    <div id='mobheader'>
    <div class='container'>
    
    <meta content='TopEarningBoy' itemprop='name'/>
    <a href='https://www.topearningboy.com/' itemprop='logo' itemscope='' itemtype='https://schema.org/ImageObject' style='margin-left: 0px;display: block;float: left;'>
    <img alt='TopEarningBoy' src='logo url' style='display: block;width: 250px;height: auto;'/>
    <meta content='' itemprop='url'/>
    <meta content='164px;' itemprop='width'/>
    <meta content='54px;' itemprop='height'/></a>
      
      
      <nav class='site-nav'>
          <ul>
            <li><a href='#'><i class='fa fa-pencil site-nav--icon'/>Link Text</a></li> 
            <li><a href='#'><i class='fa fa-usd site-nav--icon'/>Link Text</a></li>
            <li><a href='#'><i class='fa fa-search site-nav--icon'/>Link Text</a></li>
            <li><a href='#'><i class='fa fa-share-square-o site-nav--icon'/>Link Text</a></li>
            <li><a href='#'><i class='fa fa-info site-nav--icon'/>Link Text</a></li>
            <li><a href='#'><i class='fa fa-envelope site-nav--icon'/>Link Text</a></li>
          </ul> 
      </nav>
      
      <div class='menu-toggle'>
        <div class='hamburger'/>
      </div>
      
    </div>
    
    </div>
        </b:if>        


Replace TopEarningBoy with your own blog title and https://www.topearningboy.com  with your blog URL. Logo Url with your blog logo URL, hash sign # with your page URL and Link Text with your page title.

  • Now search for </body> tag and just above paste the following javascript code. 

<script type='text/javascript'>      
    
$(&#39;.menu-toggle&#39;).click(function() {
  
  $(&#39;.site-nav&#39;).toggleClass(&#39;site-nav--open&#39;, 500);
  
$(this).toggleClass(&#39;open&#39;);
  
});
</script>
 
  • Search for </head> and just above it paste the following CSS code.

  • <style>
    
    
    @import url(&#39;https://fonts.googleapis.com/css?family=Quicksand:400,700&#39;);
    
    
    .container {
      width: 95%;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    #mobheader {
      background: #1b1b1b;
      color: #e4e4e4;
      padding: 2em 0;
      position: relative;
    }
    
    
    
    .logo {
      float: left;
      font-size: 1rem;
      margin: 0;
      text-transform: uppercase;
      font-weight: 700;
    }
    
    .logo span {
      font-weight: 400;
    }
    
    .site-nav {
    z-index:999999;  
    position: absolute;
      top: 100%;
      right: 0%;
      background: #1d1d1d;
      clip-path: circle(0px at top right);
      transition: clip-path ease-in-out 700ms;
    /*   display: none; */
    
    }
    
    .site-nav--open {
    z-index:999999;
      clip-path: circle(250% at top right);
    /*   display: block; */
    }
    
    .site-nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .site-nav li {
      border-bottom: 1px solid #242729;
    }
    
    .site-nav li:last-child {
      border-bottom: none;
    }
    
    .site-nav a {
      color: #e4e4e4;
      display: block;
      padding: 2em 4em 2em 1.5em;
      text-transform: uppercase;
      text-decoration: none;
    }
    
    .site-nav a:hover,
    .site-nav a:focus {
      background: #444;
      color: #e4e4e4;
    }
    
    .site-nav--icon {
      display: inline-block;
      font-size: 1.5em;
      margin-right: 1em;
      width: 1.1em;
      text-align: right;
      color: rgba(255,255,255,.4);
    }
    
    .menu-toggle {
      padding: 1em;
      position: absolute;
      top: 1.9em;
      right: .5em;
      cursor: pointer;
    }
    
    .hamburger,
    .hamburger::before,
    .hamburger::after {
      content: &#39;&#39;;
      display: block;
      background: #EBEBD3;
      height: 3px;
      width: 1.75em;
      border-radius: 3px;
      transition: all ease-in-out 500ms;
    }
    
    .hamburger::before {
      transform: translateY(-6px);
    }
    
    .hamburger::after {
      transform: translateY(3px);
    }
    
    .open .hamburger {
      transform: rotate(45deg);
    }
    
    .open .hamburger::before {
      opacity: 0;
    }
    
    .open .hamburger::after {
      transform: translateY(-3px) rotate(-90deg);
    }
    
    @media (min-width: 800px) {
      
      .menu-toggle {
        display: none;
      }
      
      .site-nav {
        height: auto;
        position: relative;
        background: transparent;
        float: right;
        clip-path: initial;
    
    }
      
      .site-nav li {
        display: inline-block;
        border: none;
      }
      
      .site-nav a {
        padding: 0;
        margin-left: 3em;
      }
      
      .site-nav a:hover,
      .site-nav a:focus {
        background: transparent;
      }
      
      .site-nav--icon {
        display: none;
      }
      
    }
    </style>
     

Replace #1b1b1b  and background:#444 with your background color and tab hover color respectively.
  • Save your template and you are done. 

 

Credits:

All credits goes to Kevin Powell because through his code that you can find on codepen I was able to share this exciting but tricky tutorial with all of you. Hope it was helpful and you liked it. Thank you all and don't forget to subscribe my blog. Need any kind of help, just comment in the section below!

No comments:

Powered by Blogger.