Membuat Dropdown dan Navbar dengan Materialize

Halo teman – teman semuanya, berjumpa kembali dengan saya di website tips dan trik Dumet School. Pada kesempatan kali ini kita masih lanjut membahas dan mempraktekkan beberapa metode yang di sediakan oleh framework css materialize, dan kali ini kita akan belajar tentang Membuat Dropdown dan Navbar dengan Materialize. Dimana kedua metode ini bisa kita pakai di dalam project website kita, untuk lebih lengkapnya teman – teman bisa lihat pada gambar di bawah ini

Gambar di atas ini adalah hasil navbar dari materialize

Dan tampilan pada gambar di atas ini adalah dropdown menu dari materialize, jika di klik maka dropdown akan muncul

Teman – teman pastikan sudah siapkan file materialize nya, jika ketinggalan dalam pembahasannya bisa review pada artikel sebelumnya, lanjut pada artikel kali ini tentang Membuat Dropdown dan Navbar dengan Materialize. Copy script html nya di bawah ini

<nav>
  <div class="nav-wrapper">
    <a href="" class="brand-logo">Dumet School</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 pada file index.html nya

Jika sudah save dan jalankan pada browsernya

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

Maka hasilnya seperti gambar di bawah ini

Berikutnya kita tambahkan menu 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>

Jika sudah save dan refresh pada browsernya, maka dropdown dengan mudah kita buat

Jika kita klik, maka dropdwon akan tampil efek seperti popup modal

Demikianlah case sederhana dalam pembuatan navbar dan dropdown dengan menggunakan framework css materialize, kita sudahi dulu pada artikel kali ini tentang Membuat Dropdown dan Navbar dengan Materialize dan kita akan berjumpa kembali pada artikel selanjutnya. Terimakasih dan sampai jumpa, semoga bermanfaat.

The post Membuat Dropdown dan Navbar dengan Materialize appeared first on Kursus Website Terbaik.