Cara Membuat Multi Level Accordion Vertikal

Bagikan :

Tweet

Hai Sobat, kali ini saya akan share " Cara Membuat Multi Level Accordion Vertikal ". Cara ini cocok bagi anda yang ingin menambah ke indahan blog anda
Mau tau caranya... Langsung Ke Tutorialnya...

Cara Membuat Multi Level Accordion Vertikal

1. Masuk Ke Beranda Blogger > Template > Edit HTML

2. Cari Kode ]]></b:skin> Atau </style> Untuk Mempermudah Pencarian Anda Dapat Tekan CTRL + F

3. Masukkan Kode Di Bawah Ini Di Atas Kode ]]></b:skin> Atau </style>

.cy-accordion-menu {
  width: 90%;
  max-width: 600px;
  background: #4d5158;
  margin: 4em auto;
  box-shadow: 0 4px 40px #70ac76;
}
.cy-accordion-menu ul {
  /* by default hide all sub menus */
  display: none;
}
.cy-accordion-menu li {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cy-accordion-menu input[type=checkbox] {
  /* hide native checkbox */
  position: absolute;
  opacity: 0;
}
.cy-accordion-menu label, .cy-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 .cy-accordion-menu label:hover, .no-touch .cy-accordion-menu a:hover {
  background: #52565d;
}
.cy-accordion-menu label::before, .cy-accordion-menu label::after, .cy-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%);
}
.cy-accordion-menu label {
  cursor: pointer;
}
.cy-accordion-menu label::before, .cy-accordion-menu label::after {
  background-image: url(http://mybloggerlab.com/Images/cd-icons.svg);
  background-repeat: no-repeat;
}
.cy-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);
}
.cy-accordion-menu label::after {
  /* folder icons */
  left: 41px;
  background-position: -16px 0;
}
.cy-accordion-menu a::after {
  /* image icon */
  left: 36px;
  background: url(http://mybloggerlab.com/Images/cd-icons.svg) no-repeat -48px 0;
}
.cy-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%);
}
.cy-accordion-menu input[type=checkbox]:checked + label::after {
  /* show open folder icon if item is checked */
  background-position: -32px 0;
}
.cy-accordion-menu input[type=checkbox]:checked + label + ul,
.cy-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;
}
.cy-accordion-menu ul label,
.cy-accordion-menu ul a {
  background: #35383d;
  box-shadow: inset 0 -1px #41444a;
  padding-left: 82px;
}
.no-touch .cy-accordion-menu ul label:hover, .no-touch
.cy-accordion-menu ul a:hover {
  background: #3c3f45;
}
.cy-accordion-menu > li:last-of-type > label,
.cy-accordion-menu > li:last-of-type > a,
.cy-accordion-menu > li > ul > li:last-of-type label,
.cy-accordion-menu > li > ul > li:last-of-type a {
  box-shadow: none;
}
.cy-accordion-menu ul label::before {
  left: 36px;
}
.cy-accordion-menu ul label::after,
.cy-accordion-menu ul a::after {
  left: 59px;
}
.cy-accordion-menu ul ul label,
.cy-accordion-menu ul ul a {
  padding-left: 100px;
}
.cy-accordion-menu ul ul label::before {
  left: 54px;
}
.cy-accordion-menu ul ul label::after,
.cy-accordion-menu ul ul a::after {
  left: 77px;
}
.cy-accordion-menu ul ul ul label,
.cy-accordion-menu ul ul ul a {
  padding-left: 118px;
}
.cy-accordion-menu ul ul ul label::before {
  left: 72px;
}
.cy-accordion-menu ul ul ul label::after,
.cy-accordion-menu ul ul ul a::after {
  left: 95px;
}
.cy-accordion-menu.animated label::before {
  /* Kode Di Bawah Ini Untuk Menambah Animasi Di Widget Accordion Ini */
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}

4. Klik Simpan

Cara Menerapkan

1. Masuk Ke Beranda Blogger > Entri Baru > Pilih Mode HTML ( Di Samping Kanan Mode Compose )

2. Masukkan Kode Di Bawah Ini Ke Dalam Kotak Yang Sudah Disediakan

<ul class="cy-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> <!-- cy-accordion-menu -->

3. Klik Simpan

Tag : Widget