Cara menggunakan responsive navbar bootstrap

Jika teman-teman pernah menggunakan navbar dari bootstrap pasti sudah tidak asing lagi melihat toggle responsive ini, karena toggle responsive ini berguna untuk mempercantik tampilan kita saat berada pada mode mobile, toggle ini lah yang membantu mempercantik menu saat mode mobile, karena menunya tidak akan langsung tampil semua sebelum toggle itu di klik, seperti itu ya kira-kira, oke jadi jangan kemana-mana karena sesaat lagi kita akan belajar cara membuat toggle navbar responsive dengan bantuan javascript.

Sudah paham ya tentang toggle yang akan kita kerjakan disini. Seperti yang saya tulis di atas cara membuat toggle navbar responsive kita butuh bantuan javascript kenapa ? karena javascript sendiri saya gunakan untuk menambahkan sebuah class. oke langsung saja silahkan teman-teman buat file HTMLnya, disini saya membuatnya seperti ini:

sperti yang teman-teman lihat-lihat saya mengggunakan 4 menu yang satu untuk togglenya dan toggle tersebut terdapat event onclick untuk memproses ketika toggle itu di click, dan di toggle tersebutlah saya hidden terlebih dahulu, dan di hrefnya saya sisipkan javascript:void(0), supaya toggle yang kita click nanti berjalan. oke kita lanjut ke cssnya

untuk CSSnya sepertinya sesuai kreasi teman-teman saja ya, jika ingin sama silahkan di copy, dan yang terpenting adalah pengaturan dari @medianya seperti ini:

Bacanya jika width kita 500px, maka :

• kita hidden semua a kecuali a yang pertama
• dan icon toggle yang tadi kita hidden kita tampilkan di kanan.
• jika kelas nav dengan toggle responsive ada maka tag a display block dengan float none;

oke sekarang kita lihat javascriptnya:

Jika di click maka tambahkan class responsive, seperti itulah kira-kira settingan javascriptnya, oke seperti apa hasilnya seperti ini:

Oke jadi seperti itu ya kira cara membuat toggle navbar responsive, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.