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

ErnasLie
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
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.

3 comments

  1. wah, keren banget mas gan,,, tapi apa tidak bikin lemot loading blog?
  2. Kalo menurut saya tidak sama sekali membuat lemot loading blog kita,,,, kalopun ada pengaruh saat loading itu karena pengaruh font awesome nya saja mas....
  3. Great post , thanks for sharing this interesting information with us. if someone wants to connect with friends and relatives then it's a best option. Although, facebook and other platform are good but not safe,
    ISWEX is one of the secure social media platforms to keep your data safe and secure always.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.