Membuat show hide dengan hanya css

Menu css

Dihandphone, memang tidak ada efek hover, atau event cursor. Namun efek hover di handphone akan muncul saat pengguna men-tap sebuah link atau area.

Berdasarkan fakta ini, banyak menu show hide desain responsive dan desain web tidak memerlukan jquery atau javascript lagi. Dan secara prinsip, desain css yang berkolaborasi dengan javascript dan jquery dengan efek show hide, sangat mungkin digantikan oleh efek hover.

Coba arahkan mouse kesini jika di komputer, atau TAP jika di handphone

Ini adalah menu yang muncul diTap atau mouse over.

Menu show hide tersebut dibuat hanya dengan css, dan akan ada efek show hide jika pengguna komputer mengarahkan mouse ketempatnya, atau jika dihandphone bagian menu di Tap pengguna.

Dan ini adalah kode css-nya;

.tetesting{width:auto;height: auto;padding: 20px;border:3px solid transparent;}
  .tetesting textarea{padding:10px;display:block;width:90%;margin:0 auto;}
  .tetesting:hover{border:3px solid #444;}
  span.untukkliktap{cursor:pointer;padding:8px 15px;background:#ccc;color:grey;border-radius:10px;border:1px solid #999;color:#000;font-weight:bold;}
  .sembultest{margin: 20px auto 10px auto;text-align:center;font-weight:bold;display:none;width:400px;height: 400px;background:orange;border:2px solid #999;color:#fff;border-radius:10px;}.tetesting:hover .sembultest{display:block;}

Dan ini adalah kode htmlnya;

<div class="tetesting">
  <span class='untukkliktap'>Coba arahkan mouse kesini jika di komputer, atau TAP jika di handphone</span>
  <div class="sembultest">Ini adalah menu yang muncul diTap atau mouse over.<textarea placeholder="Ketik disini"></textarea></div>
  
</div>

Dengan demikian, hanya dengan css, banyak menu show hide atau keperluan desain responsive untuk tampilan seluler/handphone dapat dicapai.

Tentang Author

St

Dikirim pada -31 Okt 2023
" Selamat datang, selamat membaca dan selamat berseluncur "

San Tuy

Share ke

Lainnya oleh Santuy :