How To Make Responsive Show Hide Menu For Blogger

How To Make Responsive Show Hide Menu For Blogger. In this tutorial I want to share about Show Hide Menu. This is a simple menu with awesome feature. The menu will show if you click the arrow icon. It is clean and responsive design for desktop and mobile view. I really attractive with this menu, so i want to share it for all of you who want show hide menu appear on your blog. If you wish to see another menu, I have posted on How To Make Responsive Menu With Social Media and How To Add Multi Color Responsive Menu To Blogger.

If you interested with this menu, you can follow some steps below. First, You should put the code below above ]]></b:skin> or </style>.

/* Blogokay.com */
body{
  font: 400 20px 'Roboto', Roboto;
  line-height: 1.5em;
   background-color: #fff;  
   color: #c0c5ce;
}
/* Style for header */
header{
   position: relative;
   background-color: #000000;
}
header ul.nav{
   overflow: hidden;
}
header ul.nav li{
   position: relative;
   float: left;
   width: 20%;
}
header ul.nav li a{
   display: block;
   height: 50px;
  opacity: 0;
  font: 400 1.15em 'Allan', serif;
   line-height: 50px;
   color: #848e92;
  text-decoration: none;
   text-align: center;
   cursor: default;
   -webkit-transition: all 0.25s ease;
   -moz-transition: all 0.25s ease;
  &:hover{
    color: #fff;
     background-color: #222b2f;
  }
}
@media screen and (max-width: 600px){
   header ul.nav li{
      float: none;
      width: 100%;
   }
   header ul.nav li a{
      height: 0;
   }
}
/* Style for header with active class name */
header.active ul.nav li a{
   height: 120px;
   opacity: 1;
   line-height: 120px;
   cursor: pointer;
}
@media screen and (max-width: 600px){
   header.active ul.nav li a{
      height: 60px;
      line-height: 60px;
    border-bottom: 1px solid #222b2f;
   }
}
/* Style for the plus button */
button.toggle-nav{
   position: absolute;
  top: 50px;
   left: calc(50% - 30px);
   width: 60px;
   height: 30px;
   background-color: #38a6a6;
  font: 400 1.2em 'Allan', serif;
   color: #fff;
  border: none;
   line-height: 30px;
   vertical-align: middle;
   outline: none;
  cursor: pointer;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   -webkit-transition: all 0.25s ease;
   -moz-transition: all 0.25s ease;
}
button.toggle-nav:hover{
   height: 50px;
}
button.toggle-nav span{
   display: block;
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -webkit-transition: all 0.25s ease;
   -moz-transition: all 0.25s ease;
}
/* Style for the plus button when header has active classe name */
header.active button.toggle-nav{
   top: 120px;
  background-color: #256f6f;
}
header.active button.toggle-nav span{
   -webkit-transform: rotate(270deg);
   -moz-transform: rotate(270deg);
}
@media screen and (max-width: 600px){
   button.toggle-nav{
      top: 0;
      left: 15px;
   }
   header.active button.toggle-nav{
      top: 305px;
   }
}
/* Other styles */
.loud{
   text-transform: uppercase;
}
section{
  padding: 3em;
}
h1{
  margin: 1em 0;
  font-size: 40px;
  line-height: 1.5em;
}
p{
  margin: 1em 0;
}
strong{
  color: #93969c;
}
@media screen and (max-width: 600px){
  section{
    padding: 1.5em;
  }
}

The CSS above will make your responsive menu. Then, put the code below after <div id='content-wrapper'> or  </header>. It will be set where the menu will be displayed

<header>
    <button class='toggle-nav'>
       <span>&gt;</span>
    </button>
    <ul class='nav'>
       <li class='loud'><a href='#'>Home</a></li>
       <li class='loud'><a href='#'>About</a></li>
       <li class='loud'><a href='#'>Blogokay.com</a></li>
       <li class='loud'><a href='#'>Privacy</a></li>
       <li class='loud'><a href='#'>Contact</a></li>
  </ul>
 </header>

After you add the codes above. Finally, you have to add the script below Above </head>. It will make the animation show hide menu successfully installed.

<script>
$(document).ready(function(){
      var header = $(&#39;header&#39;),
                  btn    = $(&#39;button.toggle-nav&#39;);
      btn.on(&#39;click&#39;, function(){
            header.toggleClass(&#39;active&#39;);
      });
});
</script>

Now, your Show Hide Menu will appear on your blog design. I think this tutorial is very easy to understand. But, if you find some problems in adding the script above. I I would be very happy to help you.

Advertisement