Menu Tersembunyi
Gambar diatas contoh hasil yang akan kita buat, bahan yang disiapkan seperti
Html
dan Css
di bawah ini :
HTML CODE
<div class="showcontent">
<span onclick="this.parentElement.style.display='none'"
class="hidecontent">x</span>
<p>Klik X untuk menutup konten</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
CSS CODE
<style>
.showcontent{position:relative;border-radius:2px;color:#fff!important;text-align:justify;background-color:#3f51b5!important;padding:0.01em 16px; margin-top:16px;margin-bottom:16px}
.showcontent:before,.showcontent:after{content:"";display:table;clear:both}
/* tombol tutup */
.hidecontent{font-size:18px!important;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);font-weight:bold;position:absolute;right:0;top:0;border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap;border-radius:2px}
.hidecontent:hover{color:#000!important;background-color:#9e9e9e!important;border-radius:2px}
</style>
No comments:
Post a Comment