What is a Vertical Accordion Menu:
The squeeze box is a graphical command chemical cistron which is a listing of items arranged inwards a vertical manner. Each exceptional has a functionality to live expended upon clicking to display relevant content or data of the item.It is non necessary that squeeze box e'er has an expanded exceptional equally it too 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 exceptional is selected.
How to add together a Multi Level Vertical Accordion Menu inwards Blogger:
Before jumping to the tutorial you lot tin depository fiscal establishment stand upwards for the demo of this widget hereThe really start affair you lot demand to exercise is to create a HTML construction of the Menu, in addition to then to exercise in addition to then larn to Blogger >> Template >> Add a Gadget >> Add HTML/JavaScript >> glue the next HTML code inwards the text box. Note: You tin glue the next code at house where you lot would similar to your bill of fare to appear.
<ul class="cd-accordion-menu">
<li class="has-children">
<input type="checkbox" advert ="group-1" id="group-1" checked>
<label for="group-1">Group 1</label>
<ul>
<li class="has-children">
<input type="checkbox" advert ="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 amongst editing the codes you lot tin e'er comment below for assistance.
After adding the HTML Structure codes it’s fourth dimension to add together CSS codes to your blogger template, in addition to then larn to Blogger >> Template >> Edit HTML >> search for the ]]></b:skin> tag in addition to simply 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 {
/* past times 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 {
/* icon 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 {
/* present opened upwards folder icon if exceptional 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 {
/* utilisation label:nth-of-type(n) to create a põrnikas on safari (<= 8.0.8) amongst multiple adjacent-sibling selectors*/
/* present children when exceptional 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 cast 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 notice clicks in addition to display the correct content without the assist of jQuery. You tin customize the CSS codes similar colors, backgrounds, fonts in addition to etc.
Once everything is done, you lot tin relieve the template past times pressing relieve template push clitoris in addition to your vertical squeeze box bill of fare is fix to use.
If you lot similar this article, exercise portion it amongst your friends on Facebook, Twitter or Google+. If you lot accept whatever question, experience costless to move out them inwards the comments below.
Comments