Cara Membuat Menu Responsive Accordion

Yoo udah lama admin kagak posting, oke kali ini admin akan membuat tutorial Cara Membuat Menu Responsive Accordion.

Mungkin ini menurut admin sangat cocok buat blogspot yang bertema download agar mempermudah perbedaan versi maupun yang lain.

Oke langsung saja ketutorial nya :

• Silakan kalian login ke blogspot lalu tema dan edit HTML
• Copy code di bawah ini dan paste di bagian atas ]]></b:skin>

.harmo{
  max-width: 600px;
  padding: 0 20px;
box-shadow:  2px 2px 5px rgba(0,0,0,0.5),
               -3px -3px 7px rgba(255,255,255,0.05);
}
.harmo .parent-tab,
.harmo .cil-tab{
  margin-bottom: 8px;
  border-radius: 3px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.18);

}
.harmo .parent-tab label,
.harmo .cil-tab label{
  background: #ffffff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-radius: 3px;
box-shadow: inset  -3px -3px 7px #ffffff73,
             inset 3px 3px 5px rgba(94,104,121,0.288);

  position: relative;
  z-index: 99;
  transition: all 0.3s ease;
}
.harmo .parent-tab label:hover{
  background: #ffffff;
}
.parent-tab input:checked ~ label,
.cil-tab input:checked ~ label{
  border-radius: 3px 3px 0 0;
  background: #ffffff73;
box-shadow: inset  -3px -3px 7px #ffffff73,
             inset   2px 2px 5px rgba(94,104,121,0.288);
}
.harmo label span{
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  text-shadow: 0 -1px 1px #ffffff;
}
.harmo .cil-tab label span{
  font-size: 17px;
}
.parent-tab label .icon{
  position: relative;
  height: 30px;
  width: 30px;
  font-size: 15px;
  color: #000000;
  display: block;
  background: #fff;
  border-radius: 50%;
box-shadow: 0px 0px 15px rgba(0,0,0,0.18);
}
.harmo .cil-tab label .icon{
  height: 27px;
  width: 27px;
}
.parent-tab label .icon i{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.parent-tab input:checked ~ label .icon i:before,
.cil-tab input:checked ~ label .icon i:before{
  content: '\f068';
}
.harmo .parent-tab .content,
.harmo .cil-tab .sub-content{
  max-height: 0px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset -3px -3px 7px #ffffff73,
             inset 3px 3px 5px rgba(94,104,121,0.288);
  border-radius: 0 0 3px 3px;
  transition: all 0.4s ease;
}
.parent-tab input:checked ~ .content,
.cil-tab input:checked ~ .sub-content{
  max-height: 100vh;
}
.tab-3 input:checked ~ .content{
  padding: 15px 20px;
}
.parent-tab .content p,
.cil-tab .sub-content p{
  padding: 15px 20px;
  font-size: 16px;
}
.parent-tab .content a,
.cil-tab .sub-content a{
	color: red;
	font-size: 17px;

}
.cil-tab .sub-content p{
  font-size: 15px;
}
input[type="radio"],
input[type="checkbox"]{
  display: none;
}

• Jika sudah silakan kalian copy code di bawah ini dan paste kan di html postingan

<div class="harmo">
    <div class="parent-tab">
      <input type="radio" name="tab" id="tab-1" checked>
      <label for="tab-1">
        <span>Game For Windows</span>
        <div class="icon"><i class="fas fa-plus"></i></div>
      </label>
      <div class="content"> 
        <p>Download For 32 Bit <a href="#">Here</a></p>
        <p>Download For 64 Bit Here</p>
      </div>
    </div>
  
    <div class="parent-tab tab-3">
      <input type="radio" name="tab" id="tab-3">
      <label for="tab-3" class="tab-3">
        <span>Game For Android</span>
        <div class="icon"><i class="fas fa-plus"></i></div>
      </label>
      <div class="content">
        <div class="cil-tab">
          <input type="checkbox" name="sub-tab" id="tab-4">
          <label for="tab-4">
            <span>Aplikasi</span>
            <div class="icon"><i class="fas fa-plus"></i></div>
          </label>
          <div class="sub-content">
            <p>Game Apk Android V9</p>
            <p>Game Apk Android V8</p>
            <p>Game Apk Android V7</p>
          </div>
        </div>
        <div class="cil-tab">
          <input type="checkbox" name="sub-tab" id="tab-5">
          <label for="tab-5">
            <span>Data</span>
            <div class="icon"><i class="fas fa-plus"></i></div>
          </label>
          <div class="sub-content">
            <p>Game Data Android V9</p>
            <p>Game Data Android V8</p>
            <p>Game Data Android V7</p>
          </div>
        </div>
      </div>
    </div>

  </div>
  

• Silakan kalian hasil nya di postingan

Jika Ingin awalannya menu nya di tutup semua silakan kalian hapus code checked di code html
Jika ingin membuka menu dan menutup menu secara manual silakan kalian ganti code radio yang di type menjadi checkbox di codingan html

Oke sekian dari admin semoga tutorial kali ini sangat bermanfaat, jika bermanfaat silakan kalian share dan jika masih bingung silakan kalian commentar.

Silakan kalian lihat demo nya di bawah ini.

See the Pen Harmonika Menu by FJ (@FJ) on CodePen.

Facebook

Twitter

whatsapp