Cara Mudah Membuat Sidenav Header dengan Materialize
Rabu, 13 November 2019
Apa Itu Header?
Header adalah bagian dari dokumen yang muncul di margin atas. Pada umumnya header mengandung informasi tambahan seperti menu navigasi, nama pengarang, dan catatan lainnya, yang dapat membantu membuat dokumen lebih terorganisir dan mempermudah dibaca. Teks yang dimasukkan pada header akan muncul pada setiap halaman dokumen. Itulah penjelasan singkat tentang header yang kami tahu.Oke, seperti yang tercatat pada judul artikel, kali ini kami akan kembali membagikan sebuah tutorial yang tentunya kita akan bahas bersama-sama.
Namun tutorial kali ini akan sedikit berbeda dari sebelumnya, karena disini kita akan menggunakan teknik dari framework materialize.
Nah, tanpa perlu banyak basa-basi kita langsung saja, untuk cara dan langkah-langkah pembuatanya silahkan disimak berikut ini:
Cara Membuat Sidenav Header dengan Materialize
Langkah pertama, tambahkan Font Family dan Css Materialize dari CDN.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
Jika sudah langsung simpan saja. Dan jangan lupa tempatkan dibawah kode <head> atau diatas kode </head>.
Tahap berikutnya yaitu, tambahkan javascript berikut ini tepat di atas kode </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Jika sudah, mari lanjut kelangkah yang berikutnya yaitu menambahkan kode Html nya.
<nav> <!-- navbar content here --> </nav>
<ul id="slide-out" class="sidenav">
<li><div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<a href="#user"><img class="circle" src="images/yuna.jpg"></a>
<a href="#name"><span class="white-text name">Blogger</span></a>
<a href="#email"><span class="white-text email">seotechman@gmail.com</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
Simpan semua kode diatas. Untuk langkah yang terakhir, silahkan coba lihat bagaimana hasilnya.
Kurang lebih seperti itulah cara membuat sidenav header dengan framework materialize, semoga bermanfaat.
