Halo selamat datang kembali di website tips dan trik Dumet School, pada kesempatan kali ini saya masih membahas tentang framework materialize. Dan kali ini kita akan belajar tentang Navbar Pada Framework CSS Materialize dimana framework ini sudah menyediakan beberapa fungsi dan memberikan kita kemudahan tanpa banyak custom pada css nya. DI artikel kali ini saya akan mengenalkan fungsi navbar dimana navbar ini memiliki banyak fungsi dan kegunaannya yang dapat teman – teman pakai untuk project template nya.
Untuk itu teman – teman bisa langsung melihat di bawah ini beberapa layout navbar yang bisa menjadi opsi untuk kalian, pada artikel Navbar Pada Framework CSS Materialize ini saya berharap teman – teman eksplor lagi untuk menghasilkan tampilan yang teman – teman inginkan. Baik di bawah ini beberapa fungsi yang ada di dalam metode navbar pada framework css materialize
- Right Aligned Links
Right Aligned Links dengan logo berada di kiri dan menu link ada di sebelah kanan
- Left Aligned Links
Left Aligned Links dengan logo berada di kanan dan menu link ada di sebelah kiri
- Centering the logo
Centering the logo dengan logo berada di tengah dan menu link ada di sebelah kiri
- Active Items
Active Items dengan menggunakan class active hover akan tampil berdasarkan class active
- Extended Navbar with Tabs
Extended Navbar with tabs dengan logo berada di kiri dan menu link ada di sebelah kanan, kemudian di kombinasikan fungsi tabs dan sub menu berada di bawah logo cocok sekali untuk website yang membutuhkan banyak navigation/menu.
- Fixed Navbar
Dengan memberikan navbar-fixed maka navbar berada di posisi fix atau tetap pada saat website discroll kebawah
- Navbar Dropdown Menu
Navbar Dropdown Menu dengan logo berada di kiri dan menu link ada di sebelah kanan serta penambahan dropdown menu nya, yang terakhir ada
- Search Bar
Search Bar memiliki tampilan seperti gambar di atas ini, dengan menekan icon search maka akan muncul efek dan background berubag menjadi putih
Berikut adalah hasil dari metode navbar pada materialize, pada artikel selanjutnya kita akan praktekkan beberapa dari fungsi di atas ini. Sekian dulu pada artikel kali ini tentang Navbar Pada Framework CSS Materialize kita akan lanjut pada artikel berikutnya. Terimakasih dan sampai jumpa, semoga bermanfaat.