Membuat Overlay - Layarmudal
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>body { font-family: 'Lato', sans-serif;}.layarturun { height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-y: hidden; transition: 0.5s;}.layarturun-konten { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px;}.layarturun a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s;}.layarturun a:hover, .layarturun a:focus { color: #f1f1f1;}.layarturun .tutupbtn { position: absolute; top: 20px; right: 45px; font-size: 60px;}@media screen and (max-height: 450px) { .layarturun {overflow-y: auto;}.layarturun a {font-size: 20px}.layarturun .tutupbtn { font-size: 40px; top: 15px; right: 35px; }}</style></head><body><div id="DRcjgNav" class="layarturun"><a href="javascript:void(0)" class="tutupbtn" onclick="closeNav()">×</a><div class="layarturun-konten"><a href="#">Tentang</a><a href="#">Layanan</a><a href="#">Klien</a><a href="#">Kontak</a></div></div><h2>Fullskrin navigasi layarturun</h2><p>Klik disini.</p><p>Coba perhatikan, layar seakan turun:</p><span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span><script>function openNav() {document.getElementById("DRcjgNav").style.height = "100%";}function closeNav() {document.getElementById("DRcjgNav").style.height = "0%";}</script></body></html>
Tampilannya disini...
Tidak ada komentar:
Posting Komentar