Jan 4, 2016

Add Multi Level Vertical Menu Bar To Blogger Sidebar or Footer

data:blog.title
In previous posts we have share a lot of Responsive menu bar, 3D Flying Book Navigation Bar and also many other menu bars and today we are here with another navigation bar for your blogger sidebar or footer bar. Do you want to show some articles or stand alone pages to your blog readers then today we are here with a vertical menu bar. You can add this to your blog sidebar or footer area to show some important articles and pages like About Me, Privacy Policy or Services. Hope you understand what we want to say. If you not then this one line is enough for your - "Show The Posts That Matter The Most" in this vertical menu bar. In the past we have already shown you how to add a responsive menu in blogger, mega drop down menu in blogger and also we have share many other responsive menu bar for blogger with full guide - How To Add?

Multi Level Accordion Menu Bar For Blogger

Today we are because one of our reader ask us via email "How To Add Multi Level Vertical Menu Bar To Blogger?". A vertical menu bar doesn’t require a lot of space and thus can be a great building block for a site. It is also helpful for decreasing the bounce rate of a blog because it helps to increase page views. Actually this is a Accordion Menu bar. Now you are thinking what is accordion menu bar, right? So let me explain.

What Is Accordion Menu Bar?

The accordion is a graphical control element which is a list of items arranged in a vertical manner. Each item has a functionality to be expended upon clicking to display relevant content or information of the item.

It is not necessary that accordion always has an expanded item as it also supports items that cannot be expended, depending upon the configuration. In other words, the accordion is similar to tabbed widget interface that reveals the content whenever an item is selected.


Before adding this menu bar to blogger, See demo of this widget from below link.

Demo

How To Add Vertical Menu Bar To Blogger Blog?

Before adding CSS to blogger template we should have to add HTML STRUCTURE to the blog, so to do so Go to Layout >> Add A Gadget >> HTML/JavaScript and after that paste below code.
<ul class="cd-accordion-menu">
<li class="has-children">
<input type="checkbox" name ="group-1" id="group-1" checked>
<label for="group-1">Group 1</label>

 <ul>
 <li class="has-children">
 <input type="checkbox" name ="sub-group-1" id="sub-group-1">
<label for="sub-group-1">Sub Group 1</label>

<ul>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul>
</li>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul>
</li>

<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul> <!-- cd-accordion-menu -->
Before Adding this piece of HTML code, you can customize it as you want. It is too simple. If you need any help with editing the codes you can always comment below for assistance.

Now we have to add css coding to blogger template for give it a good look. For adding CSS, Go to Template >> Edit HTML and paste below code just above of ]]></b:skin> tag and hit on save button.

.cd-accordion-menu {
  width: 90%;
  max-width: 600px;
  background: #4d5158;
  margin: 4em auto;
  box-shadow: 0 4px 40px #70ac76;
}
.cd-accordion-menu ul {
  /* by default hide all sub menus */
  display: none;
}
.cd-accordion-menu li {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cd-accordion-menu input[type=checkbox] {
  /* hide native checkbox */
  position: absolute;
  opacity: 0;
}
.cd-accordion-menu label, .cd-accordion-menu a {
  position: relative;
  display: block;
  padding: 18px 18px 18px 64px;
  background: #4d5158;
  box-shadow: inset 0 -1px #555960;
  color: #ffffff;
  font-size: 1.6rem;
}
.no-touch .cd-accordion-menu label:hover, .no-touch .cd-accordion-menu a:hover {
  background: #52565d;
}
.cd-accordion-menu label::before, .cd-accordion-menu label::after, .cd-accordion-menu a::after {
  /* icons */
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-accordion-menu label {
  cursor: pointer;
}
.cd-accordion-menu label::before, .cd-accordion-menu label::after {
  background-image: url(http://mybloggerlab.com/Images/cd-icons.svg);
  background-repeat: no-repeat;
}
.cd-accordion-menu label::before {
  /* arrow icon */
  left: 18px;
  background-position: 0 0;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.cd-accordion-menu label::after {
  /* folder icons */
  left: 41px;
  background-position: -16px 0;
}
.cd-accordion-menu a::after {
  /* image icon */
  left: 36px;
  background: url(http://mybloggerlab.com/Images/cd-icons.svg) no-repeat -48px 0;
}
.cd-accordion-menu input[type=checkbox]:checked + label::before {
  /* rotate arrow */
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-accordion-menu input[type=checkbox]:checked + label::after {
  /* show open folder icon if item is checked */
  background-position: -32px 0;
}
.cd-accordion-menu input[type=checkbox]:checked + label + ul,
.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
  /* show children when item is checked */
  display: block;
}
.cd-accordion-menu ul label,
.cd-accordion-menu ul a {
  background: #35383d;
  box-shadow: inset 0 -1px #41444a;
  padding-left: 82px;
}
.no-touch .cd-accordion-menu ul label:hover, .no-touch
.cd-accordion-menu ul a:hover {
  background: #3c3f45;
}
.cd-accordion-menu > li:last-of-type > label,
.cd-accordion-menu > li:last-of-type > a,
.cd-accordion-menu > li > ul > li:last-of-type label,
.cd-accordion-menu > li > ul > li:last-of-type a {
  box-shadow: none;
}
.cd-accordion-menu ul label::before {
  left: 36px;
}
.cd-accordion-menu ul label::after,
.cd-accordion-menu ul a::after {
  left: 59px;
}
.cd-accordion-menu ul ul label,
.cd-accordion-menu ul ul a {
  padding-left: 100px;
}
.cd-accordion-menu ul ul label::before {
  left: 54px;
}
.cd-accordion-menu ul ul label::after,
.cd-accordion-menu ul ul a::after {
  left: 77px;
}
.cd-accordion-menu ul ul ul label,
.cd-accordion-menu ul ul ul a {
  padding-left: 118px;
}
.cd-accordion-menu ul ul ul label::before {
  left: 72px;
}
.cd-accordion-menu ul ul ul label::after,
.cd-accordion-menu ul ul ul a::after {
  left: 95px;
}
.cd-accordion-menu.animated label::before {
  /* this class is used if you're using jquery to animate the accordion */
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
In this menu bar we have tried to use some smart techniques such as :checked pseudo-class it makes a lot easier to detect clicks and display the right content without the help of jQuery. You can customize the CSS codes like colors, backgrounds, fonts and etc as per your recommendation. That's it, your  vertical accordion menu is ready to use.

Credit:

This vertical menu bar is designed by "Syed Faizan Ali" a blogger from Pakistan. He is very good blogger. First this article is published on "My Blogger Lab" and after that after doing some customization in this we are here for share it with you. Please don't forget to say thank you to "Syed Faizan Ali" for this awesome widget.

Our Recommended Blogger Widgets

  1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
  2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
  3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.

Conclusion:

So above guide is about How To Add Vertical Menu Bar To Blogger Sidebar or Footer? We hope by this complete guide you can easily add this widget to your blogger blog. If anyhow problem persist after following all steps then you can ask us via dropping a comment below. If you like this article then share it on blogging communities and on social networking sites. Don't forget to write your feedback about this menu bar by using comment box. Do Share.
Thank You! Stay Blessed!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.