Implementasi Navbar Pada Framework CSS Materialize

Halo selamat datang kembali di situs tips dan trik Source Code Aplikasi, di pertemuan sebelumya kita telah membahasa macam – macam navbar dan hasil outputnya dimana setiap manfaat mempunyai tampilan yang berbeda – beda. Dan kali ini kita akan Implementasi Navbar Pada Framework CSS Materialize kemudian kita terapkan di script nya bagi merancang navbar di materialize. Seperti manfaat navbar

• Right Aligned Links




• Left Aligned Links




• Centering the logo




• Navbar Dropdown Fitur




• Search Bar




• Mobile Collapse Button




• Dll

Lalu nanti kita akan implementasikan beberapa manfaat di atas ini, teman – teman pun akan melihat betapa efektifnya pada perancangan layout situs dengan menggunakan framework sangatlah cepat 🙂

Bagus, seketika saja kita Implementasi Navbar Pada Framework CSS Materialize sebelum kita mulai teman – teman siapkan file materialize nya kemudian copy html nya script di bawah ini

<div class=container>
  <div class=row>
<nav>
<div class=nav-wrapper blue darken-2>
<a href=# class=brand-logo>DUMET</a>
<ul id=nav-mobile class=right hide-on-med-and-down>
<li><a href=#>Home</a></li>
<li><a href=#>Gallery</a></li>
<li><a href=#>About Us</a></li>
</ul>
</div>
</nav>
</div>  
</div>

Pastekan di file index.html nya, karenanya akan menghasilkan tampilan seperti gambar di bawah ini

Apabila kita ingin memindahkan logo ke tengah atau ke kanan tinggal kita tambahkan saja di class nya, saya ingin logo di kanan dan link ada di sebelah kiri karenanya class saya berikan di bran-logo nya dan tag ul nya

Karenanya hasilnya

Apabila logo ingin di tengah berikan saja di class nya center di logo, berikutnya kita akan membua Search Bar, teman – teman copy script di bawah ini

<div class=nav-wrapper>
  <form>
    <div class=input-field>
      <input id=search type=search required>
      <label class=label-icon for=search><i class=material-icons>search</i></label>
      <i class=material-icons>close</i>
    </div>
  </form>
</div>
</nav>

Apabila telah save dan refresh di browsernya, karenanya hasil nya seperti gambar di bawah ini

kemudian teman – teman klik di icon search, di dikala di klik terdapat efek dan background berubah menjadi putih dan border-bottom

Kemudian jikalau cancel tinggal klik icon close, inilah beberapa hasil dari navbar dan masih banyak lagi. Bagi teman – teman dapat di eksplore lagi dari hasil latihan kali ini supaya semakin terbiasa dan menambah skill teman – teman. Di artikel berikutnya kita masih membahas framework materialize namun berbeda fitur lagi, ikutin terus kelanjutannya di situs tips dan trik Source Code Aplikasi. Demikian di artikel kali ini mengenai Implementasi Navbar Pada Framework CSS Materialize kita jumpa kembali di pertemuan yang akan datang. Terimakasih dan hingga jumpa, semoga bermanfaat.

Sumber https://kursuswebsite.org