Fulskrin Overlay Siga Hordeng

×

Perkawis Pelayanan Kelayan Kontakna

Fulskrin Overlay Siga Hordeng

Klik dalam elemen di bawah ini.

Dalam contoh ini, hordeng muncul dari kiri ke kanan:

☰ buka
Tah ieu sekripna:
<style type="text/css"> body { font-family: 'Lato', sans-serif; } .layarkuhordeng { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s; } .layarkuhordeng-kontenku { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .layarkuhordeng a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .layarkuhordeng a:hover, .layarkuhordeng a:focus { color: #f1f1f1; } .layarkuhordeng .tutupsklr { position: absolute; top: 20px; right: 45px; font-size: 60px; } @media screen and (max-height: 450px) { .layarkuhordeng a {font-size: 20px} .layarkuhordeng .tutupsklr { font-size: 40px; top: 15px; right: 35px; } } </style> <div id="DrcjgmyNav" class="layarkuhordeng"> <a href="javascript:void(0)" class="tutupsklr" onclick="tutupDRcnav()">×</a> <div class="layarkuhordeng-kontenku"> <a href="#">Perkawis</a> <a href="#">Pelayanan</a> <a href="#">Kelayan</a> <a href="#">Kontakna</a> </div> </div> <h2>Fulskrin Overlay Siga Hordeng</h2> <p>Klik dalam elemen di bawah ini.</p> <p>Dalam contoh ini, hordeng muncul dari kiri ke kanan:</p> <span style="font-size:30px;cursor:pointer" onclick="bukaDRcnav()">☰ buka</span> <script> function bukaDRcnav() { document.getElementById("DrcjgmyNav").style.width = "100%"; } function tutupDRcnav() { document.getElementById("DrcjgmyNav").style.width = "0%"; } </script>