How To Add Together A Multi Marking Vertical Squeeze Box Carte Du Jour Inwards Blogger

In the yesteryear nosotros accept already shown you lot how to add together a responsive carte du jour inward blogger, mega driblet downwards carte du jour inward blogger as well as CSS3 multi driblet downwards carte du jour inward blogger. However, of late 1 of our users asked us virtually how to add together a multi marker vertical squeeze box carte du jour inward Blogger as well as so it tin live a useful improver to a spider web log equally navigation plays pregnant role inward decreasing the bounce charge per unit of measurement of a blog. Influenza A virus subtype H5N1 vertical squeeze box carte du jour doesn’t require a lot of infinite as well as hence tin live a slap-up edifice block for a site. Today inward this article, nosotros volition demo you lot how to add together a multi marker vertical squeeze box carte du jour inward Blogger.

What is a Vertical Accordion Menu:

The squeeze box is a graphical command chemical constituent which is a listing of items arranged inward a vertical manner. Each detail has a functionality to live expended upon clicking to display relevant content or data of the item.

It is non necessary that squeeze box ever has an expanded detail equally it besides supports items that cannot live expended, depending upon the configuration. In other words, the squeeze box is similar to tabbed widget interface that reveals the content whenever an detail is selected.

How to add together a Multi Level Vertical Accordion Menu inward Blogger:

Before jumping to the tutorial you lot tin cheque the demo of this widget here

The rattling kickoff matter you lot demand to practice is to create a HTML construction of the Menu, as well as so to practice as well as so become to Blogger >> Template >> Add a Gadget >> Add HTML/JavaScript >> glue the next HTML code inward the text box. Note:  You tin glue the next code at house where you lot would similar to your carte du jour to appear.

<ul class="cd-accordion-menu">
<li class="has-children">
<input type="checkbox" mention ="group-1" id="group-1" checked>
<label for="group-1">Group 1</label>

 <ul>
 <li class="has-children">
 <input type="checkbox" mention ="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 tin customize the HTML code equally per your needs, it is extremely simple. If you lot demand whatever assist alongside editing the codes you lot tin ever comment below for assistance.

After adding the HTML Structure codes it’s fourth dimension to add together CSS codes to your blogger template, as well as so become to Blogger >> Template >> Edit HTML >> search for the ]]></b:skin> tag as well as merely to a higher house it glue 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 {
  /* yesteryear default cover 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] {
  /* cover 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 {
  /* ikon 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 {
  /* demo opened upward folder icon if detail 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 {
  /* occupation label:nth-of-type(n) to cook a põrnikas on safari (<= 8.0.8) alongside multiple adjacent-sibling selectors*/
  /* demo children when detail 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 course of written report is used if you're using jquery to animate the squeeze box */
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}

Since, nosotros accept used smart techniques such equally :checked pseudo-class it makes a lot easier to honour clicks as well as display the correct content without the assist of jQuery. You tin customize the CSS codes similar colors, backgrounds, fonts as well as etc.

Once everything is done, you lot tin relieve the template yesteryear pressing relieve template push clitoris as well as your vertical squeeze box carte du jour is gear upward to use.

If you lot similar this article, practice portion it alongside your friends on Facebook, Twitter or Google+. If you lot accept whatever question, experience gratis to locomote out them inward the comments below.