How to add vertical menu on the side of the blog with jQuery

Scroll Down and click on Go to Link for destination

Congrats! Link is Generated

On my prior tutorial about the recent comments, i'v shared how to add recent comments with avatars on your blog, today we will discuss the vertical menu.  There are so many kinds of options menu bar that can be installed on a website or a blog, starting from the horizontal menu  till the vertical menu, and all of which have a role as well as their respective functions, this time we will only discuss the vertcal menu and for the horizontal menu will we discussed in the next articles from my blogsite.

Vertical menu on the blog has an elongated look down or decline, ussually vertical menu placed on the right or left of the blog page, also has a function and very important role in a blog or website, because of the menu bar then a blog visitors can easily find the article or content that they are looking for.

Seeing so crucial role for a menu and a requirenment of a blog or website, so on this accasion i will share a tutorial on how to install the vertical menu on the side of blog page.

To install this menu takes a little bit of accuracy from us, and those who are already experienced with the codes then this something that is not difficult, but for the inexperienced.. we can discuss it in the comments field below, i'll be happy and with pleasure to assist all of you.

Menu Vertical [images source:www.acebangsam.us]

Let's start to add the vertical menu:

Step 1: Login to your blogger panel admin

Step 2: Click On Template » Edit HTML

Step 3: Add this code just above the code </head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

Step 4: Find this code Ctrl+F  ]]></b:skin> or </style>

Step 5: Then add the following CSS script just above the code ]]></b:skin> or </style>

#menu {
  position: fixed;
  background-color: #181818;
  height: 100%;
  z-index: 10;
  width: 280px;
  color: #eee;
  top: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
  font-family: 'Source Sans Pro', sans-serif;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}
#menu ul {
  list-style: none;
  margin-top: 0;
  padding: 0
}
#menu ul li { border-bottom: 1px solid #444; }
#menu>ul>li>a { border-left: 4px solid #660000; }
#menu ul li a {
  color: inherit;
  font-size: 16px;
  display: block;
  padding: 8px 0 8px 10px;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-weight: 600;
}
#menu ul a i {
  margin-right: 10px;
  font-size: 18px;
  margin-top: 3px;
  width: 20px;
}
#menu ul a i[class*='fa-caret'] { float: right; }
#menu ul a:hover,
#menu ul a.active {
  background-color: #333;
  border-left-color: #ff6600;
  color: #660000;
}
#menu ul a:hover i:first-child { color: #ff6600; }
/* Submenu */
#menu ul li a.active+ul { display: block }
#menu ul li ul {
  margin-top: 0;
  display: none;
}
#menu ul li ul li { border-bottom: none; }
#menu ul li ul li a { padding-left: 30px; }
#menu ul li ul li a:hover { background-color: #1A1A1A; }
/* show menu */
.left { left: -280px; }
.show { left: 0; }
#showmenu {
  margin-left: 100%;
  position: absolute;
  top: 0;
  padding: 6px 10px 7px 10px;
  font-size: 1.3em;
  color: #369;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

Step 6: Add the following HTML code just above the code </body>

<!--vertical menu-->
<nav id="menu" class="left">
  <ul>
    <li><a href="#" class="active"><i class="fa fa-home"></i> Home</a></li>
    <li><a href="#"><i class="fa fa-user"></i> About Us</a></li>
    <li> <a href="#"><i class="fa fa-tags"></i> Category <i class="fa fa-caret-down"></i></a>
      <ul>
        <li><a href="#">Photoshop</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">Template</a></li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-phone-square"></i> Contact Us</a></li>
  </ul>
  <a href="#" id="showmenu"> <i class="fa fa-align-justify"></i> </a> 
</nav>
<!-- end of vertical menu --> 

Step 7: Add script HTML/Javascript below right above the code </body> 

<script text/javascript'> 
//<![CDATA[
$("#showmenu").click(function(e){
 e.preventDefault();
 $("#menu").toggleClass("show");
});
 $("#menu a").click(function(event){
  event.preventDefault();
 if($(this).next('ul').length){
 $(this).next().toggle('slow');
 $(this).children('i:last-child').toggleClass('fa-caret-down fa-caret-left');
    }
});
//]]> </script>

Step 8: Last step and save the template, see the results and good luck.

That's a little explanation from me about on how to install vertical menu on the blog , i hope this article can help you, also look forward for my next tutorial, see you.

Demo Live

Go to Link