Rumus Fullskrin dan Prakteknya

<style type="text/css"> /*awakna { font-family: 'Lato', sans-serif; }*/ .overlaykencakatengen { 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; } .overlaykencakatengen-konten { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; background: yellow; padding: 5px } .overlaykencakatengen-isikonten { position: relative; top: 25%; width: cal(100%-10px); text-align: center; margin-top: 30px; background: green; padding: 5px } .overlaykencakatengen a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlaykencakatengen a:hover, .overlaykencakatengen a:focus { color: #f1f1f1; } .overlaykencakatengen .tutupbtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } @media screen and (max-height: 450px) { .overlaykencakatengen a {font-size: 20px} .overlaykencakatengen .tutupbtn { font-size: 40px; top: 15px; right: 35px; } } </style> <div id="drcjgteaNavikencakatengen" class="overlaykencakatengen"> <a href="javascript:void(0)" class="tutupbtn" onclick="tutupNav()">×</a> <div class="overlaykencakatengen-konten"> <div class="overlaykencakatengen-isikonten"> <a href="#">Tentang</a> <a href="#">Layanan</a> <a href="#">Kelayan</a> <a href="#">Kontak</a> </div> </div> </div> <h2>Judul</h2> <p>Deskripsi - Penjelasan.</p> <p>Silahkan perhatikan secara seksama:</p> <span style="font-size:30px;cursor:pointer" onclick="bukaNav()">☰ buka</span> <script> function bukaNav() { document.getElementById("drcjgteaNavikencakatengen").style.width = "100%"; } function tutupNav() { document.getElementById("drcjgteaNavikencakatengen").style.width = "0%"; } </script>

Hasilnya adalah seperti di bawah ini

Overlay dari kiri ke kanan (Bahasa Sunda: ti kenca ka katuhu - ti kiwa ka tengen)

Silahkan baca. Mangga pintonan, rumus bmtt (bahasa mesin tingkat tinggi)na aya di luhur.

Semoga bermanfaat. Wassalam.

×

Tentang Layanan Kelayan Kontak

Judul

Deskripsi - Penjelasan.

Silahkan perhatikan secara seksama:

☰ buka