Implementasi Navbar Pada Framework CSS Materialize

Halo selamat datang kembali di website tips dan trik Dumet School, pada pertemuan sebelumya kita sudah membahasa macam – macam navbar dan hasil outputnya dimana setiap fungsi memiliki tampilan yang berbeda – beda. Dan kali ini kita akan Implementasi Navbar Pada Framework CSS Materialize kemudian kita terapkan pada script nya untuk membuat navbar pada materialize. Seperti fungsi navbar

• Right Aligned Links
• Left Aligned Links
• Centering the logo
• Navbar Dropdown Menu
• Search Bar
• Mobile Collapse Button
• Dll

Lalu nanti kita akan implementasikan beberapa fungsi di atas ini, teman – teman juga akan melihat betapa efektifnya dalam pembuatan layout website dengan menggunakan framework sangatlah cepat

Baik, langsung 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 pada file index.html nya, maka akan menghasilkan tampilan seperti gambar di bawah ini

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

Maka hasilnya

Jika logo ingin di tengah berikan saja pada class nya center pada 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>

Jika sudah save dan refresh pada browsernya, maka hasil nya seperti gambar di bawah ini

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

Kemudian jika cancel tinggal klik icon close, inilah beberapa hasil dari navbar dan masih banyak lagi. Untuk teman – teman bisa di eksplore lagi dari hasil latihan kali ini supaya semakin terbiasa dan menambah skill teman – teman. Pada artikel berikutnya kita masih membahas framework materialize namun berbeda fitur lagi, ikutin terus kelanjutannya di website tips dan trik dumet school. Sekian pada artikel kali ini tentang Implementasi Navbar Pada Framework CSS Materialize kita jumpa kembali pada pertemuan yang akan datang. Terimakasih dan sampai jumpa, semoga bermanfaat.

The post Implementasi Navbar Pada Framework CSS Materialize appeared first on Kursus Website Terbaik.