Membuat Dropdown dan Navbar dengan Materialize

Halo teman – teman semuanya, berjumpa kembali dengan saya di blog tips dan trik Source Code Aplikasi. Di kesempatan kali ini kita masih lanjut membahas dan mempraktekkan beberapa sistem yang di sediakan oleh framework css materialize, dan kali ini kita akan belajar mengenai Membuat Dropdown dan Navbar dengan Materialize. Dimana kedua sistem ini dapat kita gunakan di pada project blog kita, bagi lebih lengkapnya teman – teman dapat lihat di gambar di bawah ini

Gambar di atas ini yaitu hasil navbar dari materialize

Dan tampilan di gambar di atas ini yaitu dropdown fitur dari materialize, apabila di klik karenanya dropdown akan muncul

Teman – teman pastikan telah siapkan file materialize nya, apabila ketinggalan pada pembahasannya dapat review di artikel sebelumnya, lanjut di artikel kali ini mengenai Membuat Dropdown dan Navbar dengan Materialize. Copy script html nya di bawah ini

<nav>
  <div class=nav-wrapper>
    <a href= class=brand-logo>Source Code Aplikasi</a>
    <ul id=nav-mobile class=right hide-on-med-and-down>
      <li><a href=>Home</a></li>
      <li><a href=>About Us</a></li>
      <li><a href=>Gallery</a></li>
      <li><a href=>Album</a></li>
      <li><a href=>Contact Us</a></li>
    </ul>
  </div>
</nav>

Pastekan di file index.html nya

Seandainya telah save dan jalankan di browsernya

Kita rubah warna background default nya dan berikan padding left di logo supaya lebih kedalam posisinya

Karenanya hasilnya seperti gambar di bawah ini

Berikutnya kita tambahkan fitur dropdown, teman – teman copy script html nya di bawah ini

<div class=row>
  <div class=col s12 m8 l12 >
    <a class=btn dropdown-button href=#! data-activates=dropdown2>Navigation<i class=material-icons right>arrow_drop_down</i></a>
    <ul id=dropdown2 class=dropdown-content>   
    <li><a href=>Home</a></li>
    <li><a href=>About Us</a></li>
    <li><a href=>Gallery</a></li>
    <li><a href=>Album</a></li>
    <li><a href=>Contact Us</a></li>
    </ul>      
    </div>
</div>

Seandainya telah save dan refresh di browsernya, karenanya dropdown dengan gampang kita bikin

Seandainya kita klik, karenanya dropdwon akan tampil efek seperti popup modal

Demikianlah case sederhana pada penyusunan navbar dan dropdown dengan menggunakan framework css materialize, kita sudahi dulu di artikel kali ini mengenai Membuat Dropdown dan Navbar dengan Materialize dan kita akan berjumpa kembali di artikel berikutnya. Terimakasih dan hingga jumpa, semoga bermanfaat.

 

Sumber https://kursuswebsite.org