Cara Membuat Overlay Layar Penuh /Full screen Overlay Navigation HTML,CSS DAN JAVA Dasar

Buat Navigasi Overlay Layar Penuh

 Perhatian: Setiap Fungsi Saya Tulis Langsung Dalam Coding Untuk Mempermudah Pembaca 

Hallo teman-teman Gudang coding, ketemu lagi dengan saya di Blog Saya CodingKampus, pada kesempatan kali ini saya akan mengajarkan bagaimana caranya membuat Effect Overlay Penuh Dan Gambar Menggunakan CSS. Effect Overlay maksudnya adalah membuat Effect Tombol Di Tekan akan terdapat effect yang muncul layar penuh entah itu kesamping maupun dari atas ke bawah. Effect ini bisa kita buat menggunakan jQuery atau CSS, nah di sini saya akan mengajarkan bagaimana cara membuatnya menggunakan CSS. Baik kita akan langsung saja membuatnya ya teman-teman.

Hal pertama yang perlu kalian buat adalah kalian bisa buat satu file dengan nama index.html

Langkah 1) Tambahkan HTML Body:

Langkah 2) Tambahkan CSS:

Langkah 3) Tambahkan JavaScript:

Contoh di bawah ini menggeser menu navigasi overlay dari kiri ke kanan (lebar 0 hingga 100%), saat dipicu:

TIPS

Bila ingin Geser ke bawah dari atas ganti java style.width ke style.height

Full code ada di bawah ini