Membuat Nav Menggunakan Bootstrap 4 Dengan Mudah

Cara Membuat Nav Menggunakan Bootstrap 4 Dengan Mudah – Hai ketemu lagi dengan saya dan pada kesempatan kali ini saya akan memposting tentang cara membuat nav menu menggunakan Bootstrap 4 dengan mudah karena kita tidak perlu membuat cssnya lagi. Kita hanya perlu memasukkan librari dari bootstrap. Nav menu ini berguna sebagai navigasi dari suatu website atau aplikasi. Setiap website pasti akan ada nav menu yang berfungsi untuk memanggil/menampilkan semua menu yang ada pada website tersebut. Cara pembuatannya sangat mudah, sobat cukup gunakan nav menu mana yang sesuai dengan website sobat.

Namun sebelum saya contohkan cara penggunaannya, sobat perlu memasukkan librari css dan jsnya pada tag <head>

Kita memerlukan librari bootstrap tentunya, selain itu saya juga menambahkan jquery dan css fontawesome karena pada contoh nanti saya juga akan mencontohkan tab dengan icon sehingga jika sobat belum memasukkan librari fontawesome maka icon tidak akan muncul. Dan karena untuk keperluan demo jadi saya menggunakan librari online, jika untuk kepentingan development maka sobat perlu mendownloadnya terlebih dahulu atau sobat bisa download bersama project ini di akhir postingan.

 

Macam-macam Nav Menu

1. Nav Menu List Horizontal

Nav menu ini adalah nav menu standar yang tampilannya adalah horizontal. Dengan menggunakan nav ini dita juga bisa menambahkan class active dan class disabled. Jika kita menambahkan class disable maka link tidak bisa diklik. Cara penggunaannya adalah sebagai berikut

Tampilannya :

 

2. Nav Menu Link Horizontal

Sebenarnya baik menggunakan link atau tidak sama saja hasilnya, sobat bisa gunakan manapun sesuai keinginan sobat. Cara penggunaannya adalah sebagai berikut

Hasilnya tentu sama saja yaitu

 

3. Nav Menu List Vertical

Selain posisinya secara horizontal, kita juga bisa membuatnya secara vertical, contoh penggunaannya adalah sebagai berikut

Hasilnya :

4. Nav Menu Link Vertical

Sama seperti yang horizontal, kita juga bisa membuat nav menu secara vertical dengan menggunakan link. Cara penggunaannya adalah sebagai berikut

Tampilannya :

5. Nav menu dengan Text Align

Pada nav menu kita juga bisa menempatkannya di sebelah kiri, tengah dan kanan. Untuk contoh di sebelah kiri merupakan cara standar jadi yang kita bahas adalah align tengah dan kanan saja. Cara penggunaan untuk di tengah adalah sebagai berikut

Hasilnya :

Jika kita ingin membuat nav menunya di sebelah kanan maka kodenya adalah sebagai berikut

Hasilnya :

 

6. Nav Tab

Hasilnya :

 

7. Nav Tab Pill

Hasilnya :

8. Nav Tab Dropdown

Hasilnya :

 

9. Nav Tab Dropdown Pills

Hasilnya :

 

10. Nav dengan Icon dan Javascript

Contoh kali ini kita akan membuat tab dengan icon dan tidak seperti contoh diatas kali ini kita jalankan tabnya jika diklik. Cara penggunaannya adalah sebagai berikut

Hasilnya

Selain itu kita juga bisa membuatnya menggunakan jenis nav pills. Contoh penggunaannya adalah sebagai berikut

Hasilnya :

Untuk contohnya tidak terlihat jika hanya dengan foto, sobat bisa lihat dan mencobanya sendiri pada demonya.

 

11. Nav dengan data atribut dan fade effect

Contoh dibawah adalah jika menggunakan fade effect :

Hasilnya :

Untuk bedanya tentu tidak kelihatan di sreenshootnya oleh karena itu sobat harus melihtanya pada demonya.

 

Untuk kreasi yang lain bisa sobat gabungkan dengan elemen bootstrap lainnya untuk membuatnya lebih berwarna dan lebih bagus. Cukup sekian postingan saya tentang Membuat Nav Menggunakan Bootstrap 4 Dengan Mudah. Jika ada kesalahan saya mohon maaf. Kunjungi postingan saya yang lain untuk menambah ilmu sobat.

Artikel Tentang Bootstrap Lainnya :

Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah

Macam-macam Form Input pada HTML dan Bootstrap

Cara Membuat SweetAlert dan Macam-Macamnya pada PHP

Membuat Bootstrap Modal dan Animasinya pada PHP

Membuat Badges Menggunakan Bootstrap 4

Membuat Alert pada HTML menggunakan Bootstrap 4

Mengenal Bootstrap Typography pada HTML dan Bootstrap 4

Menggunakan Tooltip pada HTML dan Bootstrap 4

Membuat Card Menu pada HTML Dengan Bootstrap 4

List Style dan Listgroup pada CSS dan Bootstrap 4

 

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

Leave a Reply

Your email address will not be published. Required fields are marked *

three × 3 =