Multi Level Sidebar Navigation Menu For Blogger

Multi level sidebar navigation menu

Navigation menu is the main part of your blog and your users will surely want it to be very easy to use and navigate and if you don't have one then I am really glad that I created an amazing multi level sidebar navigation menu for all Blogger or Blogspot users. Since it's sidebar navigation menu so you don't have to use any type of conditional tags to make it appear on both versions of your blog i.e for desktop version and mobile version as well.

If you don't like to use sidebar navigation menus then don't worry you can use our hamburger drop down menu. Now without wasting a single second of yours, let's know how to add this sidebar navigation menu on your Blogger blog. For live demo, click on the button below:



Add sidebar navigation menu in Blogger:

  • Go to your Blogger account > Theme > Backup Template.
  • Click on Edit HTML  
  • Now search for <head> tag in your template and just below it paste the following jquery library. (Skip this step if you already have one.)

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

  • Now Search for <body> tag and under this tag paste the following HTML code where you want your sidebar navigation menu to appear. (Hint: Look for ending </div> tags.) 

 <!--SideBarNavigation By TopEarningBoy.com-->

<div class='tebbar' onclick='openSlideMenu()'/>

<div class='tebnav' id='teb-nav'>

  <a class='tebclose' onclick='closeSlideMenu()'>&#215;</a>

  <ul class='teb-nav-ul'>

    <li><a href='#'>Linktext</a></li>
   <li><a href='#'>Linktext</a></li>
    <li class='tebsub'><a href='#'>Linktext<span class='tebarrow'/></a>

      <ul>
<li><a href='#'>SubLinktext</a></li>
   <li><a href='#'>SubLinktext</a></li>
        <li><a href='#'>SubLinktext</a></li>
      </ul>
    </li>
   
<li><a href='#'>Linktext</a></li>
    <li><a href='#'>Linktext</a></li>
  </ul>

  </div>

<!--SideBarNavigation Ends-->

  • Now just above closing </body> tag paste the following JavaScript code. (Placing Scripts at bottom improves your page load time because HTML code is not blocked by script)

<script type='text/javascript'>

$(&#39;.tebsub&#39;).click(function() {
 $(this).toggleClass(&#39;active&#39;);
  });

function openSlideMenu(){
   document.getElementById(&#39;teb-nav&#39;).style.width = &#39;250px&#39;;
    }

 function closeSlideMenu(){
      document.getElementById(&#39;teb-nav&#39;).style.width = &#39;0&#39;;
    }

</script>
 

  • Without CSS, HTML is like an ugly woman so just above </head> tag paste the following CSS styles.

<style>

@import url(&#39;https://fonts.googleapis.com/css?family=Oswald&#39;);

.tebbar:after{content:&#39;\2261&#39;;
  color:#000;
font-size:50px;
cursor:pointer;
padding-left:10px;
}


.tebnav a{text-decoration:none; color:#fff;
font-family:oswald;
  font-size:15px;
  letter-spacing:1px;
display:block; 
  padding:15px 0px 15px 20px; text-transform:uppercase;
border-bottom:1px dotted #379;
}

.tebnav a:hover{ color:#ddd;}

.tebnav ul {list-style-type:none;}

.tebnav{background:#54678f; 
  width:0; height:520px; 
z-index:1;
transition:all 500ms;
overflow:hidden;}

.teb-nav-ul ul{display:none;}
.teb-nav-ul li.active ul{display:block;}
.tebnav .tebarrow:after {
  display:inline-block;
  content:&#39;\203A&#39;;
margin-left:130px;}

.tebnav li:hover .tebarrow:after{
  content:&#39;\203a&#39;;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);}

.teb-nav-ul ul a:before{
  content:&#39;\203a&#39;;
  margin-left:10px;
  margin-right:15px;
} 
.tebnav .tebclose{
font-size:40px;
padding:20px 0 0 200px;
  border-bottom:none;
cursor:pointer;
} 

</style> 

Final Tweaks:

  •  Replace Linktext and sublinktext with your page title.
  • Replace hash sign # with your page URL.
  • You can also add your own text hover color just change color:#ddd
  • For sidebar navigation background color replace #54678f with color that you like.
  • Just save your template. We are done!

If you still have any problem installing this beautiful sidebar navigation then comment in the section below and if you liked it then don't forget to link back to this page. Chill out!

No comments:

Powered by Blogger.