How to Add a Multi Level Vertical Accordion Menu in Blogger

In the past we have already shown you how to add a responsive menu in blogger, mega drop down menu in blogger and CSS3 multi drop down menu in blogger. However, recently one of our users asked us about how to add a multi level vertical accordion menu in Blogger so it can be a useful addition to a blog as navigation plays significant role in decreasing the bounce rate of a blog. A vertical accordion menu doesn’t require a lot of space and thus can be a great building block for a site. Today in this article, we will show you how to add a multi level vertical accordion menu in Blogger.

What is a Vertical Accordion Menu:

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.

How to add a Multi Level Vertical Accordion Menu in Blogger:

Before jumping to the tutorial you can check the demo of this widget here

The very first thing you need to do is to create a HTML structure of the Menu, so to do so go to Blogger >> Template >> Add a Gadget >> Add HTML/JavaScript >> paste the following HTML code in the text box. Note:  You can paste the following code at place where you would like to your menu to appear.

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

You can customize the HTML code as per your needs, it is extremely simple. If you need any help with editing the codes you can always comment below for assistance.

After adding the HTML Structure codes it’s time to add CSS codes to your blogger template, so go to Blogger >> Template >> Edit HTML >> search for the ]]></b:skin> tag and just above it paste the following code:

.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;
}

Since, we have used 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.

Once everything is done, you can save the template by pressing save template button and your vertical accordion menu is ready to use.

If you like this article, do share it with your friends on Facebook, Twitter or Google+. If you have any question, feel free to leave them in the comments below.

Share this post