Desain web memiliki berbagai tehnik menarik. Tidak hanya untuk ditampilkan saja, ada kalanya kita membutuhkan suatu elemen agar tidak tampil atau tersebunyi tapi suatu saat elemen tersebut ditampilkan ketika kita butuhkan.
Ada banyak cara menyembunyikan Elemen di HTML. Misalnya dengan CSS atau bisa juga dengan bantuan Javascript. Salah satu contoh cara agar elemen disembunyikan dengan CSS adalah dengan property display: none; Seperti contoh berikut:
<html>
<head>
<style>
.sembunyi{
display: none;
}
</style>
</head>
<body>
<div class="sembunyi">bagian ini tidak tampil</div>
</body>
</html>
Atau anda juga bisa menggunakan property visibility: hidden; Seperti contoh berikut:
<html>
<head>
<style>
.sembunyi{
visibility: hidden;
}
</style>
</head>
<body>
<div class="sembunyi">bagian ini tidak tampil</div>
</body>
</html>
Selain dua cara diatas, masih ada cara lain yang bisa anda terapkan, misalnya dengan menggunakan property opacity: 0; atau bisa juga dengan mengatur warna yang sama dengan background atau lain sebagainya.
Nah sekarang pertanyaanya bagaimana apabila kita ingin mendeteksi bahwa elemen sedang dalam keadaan tersembunyi. Sehingga sewaktu kita butuhkan, elemen tersebut bisa kita tampilkan. Jawabannya ada di artikel lain yang akan datang yaitu cara mendeteksi elemen tersembunyi dengan jQuery.
Demikian tulisan kali ini semoga bermanfaat.
Tidak ada komentar:
Posting Komentar