Demo dan Javascript (Menu Navigasi Samping push content)

Cara kerja menu navigasi animasi push content adalah dengan mengubah lebar menu, dari 0px menjadi 250px, dan diikuti dengan pergeseran konten sejauh lebar menu navigasi. Contohnya bisa dilihat pada demo menu navigasi di bawah ini.

≡ menu

× About Services Clients Contact

Bakul Oreg

---

Contoh Menu Navigasi Samping (side Navigation) mendorong konten dengan animasi

Klik tombol menu di atas untuk menjalankan menu navigasi.

Tambahkan kode script berikut, letakkan di atas kode </body>

<script>
function openNav() {
    document.getElementById("myNavix").style.width = "250px";

document.getElementById("main-nav").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("myNavix").style.width = "0";
document.getElementById("main-nav").style.marginLeft = "0";
}
</script>

Catatan: jika Anda memilih untuk membuat menu navigasi samping kanan, ubah juga kode pada script, marginLeft menjadi marginRight.

« Kembali