Cara Membuat - Navigasi Samping / Side Navigation Desain Responsif Simple

 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  menu navigasi sisi yang bisa diperluas dengan JavaScript dan CSS. Produk akhir akan muncul seperti gambar di bawah ini maksudnya adalah membuat Effect Tombol Di Tekan akan terdapat effect yang muncul layar menu kesamping berukuran sesuai keingin anda. Effect ini bisa kita buat menggunakan jQuery atau CSS, nah di sini saya akan mengajarkan bagaimana cara membuatnya menggunakannya. Baik kita akan langsung saja membuatnya ya teman-teman.

Buat Navigasi Sisi Animasi

Langkah 1) Tambahkan HTML:

Langkah 2) Tambahkan CSS:

Langkah 3) Tambahkan JavaScript:

Contoh di bawah ini meluncur di navigasi samping, dan membuatnya menjadi lebar 250px:

 

Contoh di bawah ini meluncur di navigasi samping, dan mendorong konten halaman ke kanan (nilai yang digunakan untuk menyetel lebar sidenav juga digunakan untuk menyetel margin kiri dari "konten halaman"):

Contoh di bawah ini juga meluncur di navigasi samping, dan mendorong konten halaman ke kanan, hanya kali ini, kami menambahkan warna latar belakang hitam dengan opasitas 40% ke elemen badan, untuk "menyorot" navigasi samping:

Full Code Ada Di bawah Ini