Masih berhubungan dengan menu, untuk kali ini kita akan coba membuat sebuah navigasi atau menu tampil fullscreen, tapi tampil fullscreennya itu tidak langsung full tetapi ada sebuah event dimana event seperti click yang menampilkannya, seperti itu, cara ini cukup bagus untuk mempercantik hasil tampilan mobile kita, oke seperti apa membuatnya simak terus ya.

Untuk cara membuat navigasi fullscreen ini saya butuh bantuan javasript karena sebenarnya untuk membuat navigasi fullscreen ini adalah sebuah manipulasi, dimana navigasi itu sebenarnya posisi awal adalah dengan width: 0px, tetapi ketika di click dia akan berubah menjadi 100%, sesuai lebar dari layar, seperti itu, simple bukan, oke langsung saja ya.

Disini saya membuat template yang simple saja seperti ini:

Seperti yang teman-teman lihat sebenarnya menu itu sudah tampil, tetapi widthnya saja yang 0 (nol), dan di lists menu itu terdapat beberapa menu, dan yang bawah itu adalah span menu yang saya berikan event onclick yang menuju pada method openNav(), dan di close button itu juga menuju kepada closeNav(), tau ya, dan sekarang, biar lebih cantik saya akan memberikan css seperti ini:

Oke jika sudah sekarang kita coba membuat kode javascriptnya, dan kode javascript yang saya gunakan seperti ini:

paham ya tentang tampilan seperti itu, oke sekarang kita lihat hasilnya:

1. tampilan awal

cara membuat navigasi fullscreen

2. tampilan ketika teman-teman mengklik menunya

cara membuat navigasi fullscreen

3. dan itu ketika width sudah melebihi max width 500px;

cara membuat navigasi fullscreen

bagaimana cantik bukan, saya rasa cukup sampai disini belajar kita tentang cara membuat navigasi fullscreen, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.