Navbar Pada Framework CSS Materialize

Halo selamat datang kembali di situs tips dan trik Source Code Aplikasi, di kesempatan kali ini saya masih membahas mengenai framework materialize. Dan kali ini kita akan belajar mengenai Navbar Pada Framework CSS Materialize dimana framework ini telah menyediakan beberapa kegunaan dan memberikan kita kemudahan tanpa banyak modifikasi di css nya. DI artikel kali ini saya akan mengenalkan kegunaan navbar dimana navbar ini mempunyai banyak kegunaan dan kegunaannya yang dapat teman – teman gunakan bagi project tema nya.



Bagi itu teman – teman dapat seketika melihat di bawah ini beberapa layout navbar yang dapat menjadi opsi bagi kalian, di artikel Navbar Pada Framework CSS Materialize ini saya berharap teman – teman eksplor lagi bagi menghasilkan tampilan yang teman – teman inginkan. Bagus di bawah ini beberapa kegunaan yang terdapat di pada cara navbar di framework css materialize




  • Right Aligned Links



Halo



Right Aligned Links dengan logo berada di kiri dan fitur link ada di sebelah kanan




  • Left Aligned Links



Halo



Left Aligned Links dengan logo berada di kanan dan fitur link ada di sebelah kiri




  • Centering the logo



Halo



Centering the logo dengan logo berada di tengah dan fitur link ada di sebelah kiri




  • Active Items



Halo



Active Items dengan menggunakan class active hover akan tampil menurut class active




  • Extended Navbar with Tabs



Halo



Extended Navbar with tabs dengan logo berada di kiri dan fitur link ada di sebelah kanan, kemudian di kombinasikan kegunaan tabs dan sub fitur berada di bawah logo cocok sekali bagi situs yang membutuhkan banyak navigation/fitur.




  • Fixed Navbar



Dengan memberikan navbar-fixed karenanya navbar berada di posisi fix atau tetap di ketika situs discroll kebawah




  • Navbar Dropdown Fitur



Halo



Navbar Dropdown Fitur dengan logo berada di kiri dan fitur link ada di sebelah kanan serta penambahan dropdown fitur nya, yang terakhir ada




  • Search Bar



Halo



Search Bar mempunyai tampilan seperti gambar di atas ini, dengan menekan icon search karenanya akan muncul efek dan background berubag menjadi putih



Halo



Berikut ialah hasil dari cara navbar di materialize, di artikel berikutnya kita akan praktekkan beberapa dari kegunaan di atas ini. Demikian dulu di artikel kali ini mengenai Navbar Pada Framework CSS Materialize kita akan lanjut di artikel berikutnya. Terimakasih dan hingga jumpa, semoga bermanfaat.




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Membuat Table Warna Berselang dengan PHP