Cara mudah membuat slide menu dan navbar web menggunakan bantuan front-end framework materializecss

Gambar navbar menggunakan materializecss
Cara mudah untuk membuat slide menu dan navbar web salah satunya adalah dengan menggunakan bantuan front-end framework html, css maupun javascript. Yang akan saya gunakan kali ini adalah framework materializecss. Dengan cara ini membuat slide menu  dan navbar web bisa jadi sangat mudah karena tinggal menggunakan class-class dan sedikit javascript atau jquery yang sudah disediakan. Jadi tidak diperlukan pengetahuan yang mendalam tentang html, css maupun javascript. Baik, untuk memulai membuatnya ikuti cara di bawah ini.
Gambar sidenav atau slide menu menggunakan materializecss

Langkah-langkah membuat slide menu web dengan materializecss.

Siapkan atau buat dokumen html5 kemudian hubungkan dengan cdn css dan javascript materializecss, tambahkan pula cdn ikon google dan cdn jquery. 

<!DOCTYPE html>
<html>
  <head>
<title>Slide menu dengan materializecss</title>
<!--Impor font ikon dari google-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- cdn untuk CSS materialize -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!--tampilan responsive-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  </head>
  <body>

    <!-- cdn jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <!-- Cdn JavaScript materialize css -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>


Tuliskan kode navbar

<!-- awal kode navbar -->
<nav>
 <div class="nav-wrapper">
<!-- Anda bisa menambahkan logo -->
<a href="#!" class="brand-logo">Logo</a>
<!-- navigasi untuk slide menu, pastikan data-target dan id slide menu sama. Untuk class gunakan saja sidenav-trigger -->
<a href="#" data-target="slidemenu" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<!-- menu pada navbar posisi di kanan dan disembunyikan untuk layar medium ke bawah -->
<ul class="right hide-on-med-and-down">
 <li><a href="sass.html">Sass</a></li>
          <li><a href="badges.html">Components</a></li>
          <li><a href="collapsible.html">Javascript</a></li>
          <li><a href="mobile.html">Mobile</a></li>
</ul>
 </div>
</nav>
<!-- akhir kode navbar -->



Tulis kode untuk slide menu yang akan dibuat.
<!-- awal kode sidenav atau slidemenu -->
<ul class="sidenav" id="slidemenu"> <!-- id harus sama dengan data-navbar target, gunakan class sidenav -->
 <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <li><a href="collapsible.html">Javascript</a></li>
      <li><a href="mobile.html">Mobile</a></li>
</ul>
<!-- akhir kode sidenav atau slidemenu -->



Tambahkan jquery di atas tag </body>.
 <script>
$(document).ready(function(){
$('.sidenav').sidenav();
 });
   </script>

Bagaimana mudah bukan untuk membuat navbar dan slide menu menggunakan materializecss. Untuk kode lengkapnya anda bisa mengunjungi halaman github ini. Sedangkan untuk melihat hasil silahkan kunjungi halaman dari navbar dan slide menu. 

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara membuat resume atau cv dengan bootstrap 4 bagian pertama

Gambar
Gambar tampilan CV  atau resume dengan bootstrap. Lihat demo CV Resume atau cv bisa ditampilkan dalam bentuk digital yaitu halaman web. Tidak melulu dalam bentuk print out kertas. Dalam pembuatan resume atau cv pada tulisan ini digunakan bantuan framework library html css dan javascript yaitu bootstrap 4. Dalam bootstrap kita bisa menggunakan class yang sudah disediakan. Bootstrap populer karena mudah penggunaannya serta tampilan yang mendukung versi mobile atau responsive. Disamping hal tersebut bootstrap tampil baik dalam berbagai browser. Penulis menggunakan handphone android untuk pembuatan resume ini. Alat-alat yang digunakan membuat cv adalah : Icode-go sebagai kode editor. Chrome sebagai browser. Bootstrap sebagai framework library html css dan javascript. Jquery yang merupakan library javascript diperlukan bootstrap untuk class tertentu.  Fontawesome untuk menambahkan ikon. X-plore File Manager (opsional) untuk mengelola file dan membuka file html deng...
Baca selengkapnya

Membuat resume atau CV dengan bootstrap 4 bagian kontak dan footer

Gambar
Tiba di bagian akhir pembuatan CV menggunakan bootstrap 4, yaitu pembuatan bagian kontak dan footer. Untuk konsep desain bagian kontak sama dengan konsep desain bagian pendidikan. Kesamaannya adalah menggunakan class list-group dan list-group-horizontal. Lebih jelas bisa dilihat dari kode di bawah ini.   <div class="row mt-2 kontak mb-4">         <h2 class="ml-4 text-primary">           <i class="fas fa-inbox ml-2 mr-2"></i>Kontak         </h2>         <div class="col-md-12">           <ul class="list-group list-group-horizontal-md border-left-0 border-right-0">             <li class="list-group-item flex-fill border-left-0 border-right-0">               <p><i class="fas fa-mobile-alt ml-2 mr-2"></i>085-xxx-xxx-x...
Baca selengkapnya

CV atau daftar riwayat hidup versi web dengan bootstrap 4 "Biru utama"

Gambar
Pada kesempatan ini, saya ingin membagikan CV atau daftar riwayat hidup berbentuk web secara gratis. CV ini dibuat melalui html dan css dengan menggunakan frontend framework bootstrap 4 saya beri nama "Biru utama", karena memang dari segi warna didominasi oleh warna biru. Desain dari CV tampil baik di layar desktop maupun mobile atau responsive. Untuk layar desktop terbagi dua kolom, kolom kiri berisi data singkat sedang kolom kanan terdiri dari uraian karir, pendidikan, keahlian dan kontak. Bagian kanan pada tampilan desktop bisa di scroll apabila panjang layar tak bisa menampung data pada CV. Pada tampilan mobile hanya ada satu kolom dari atas ke bawah. Berikut adalah tampilan CV di layar desktop maupun mobile vertikal atau horisontal. Tampilan pada layar desktop : Gambar CV "Biru Utama" tampil di layar desktop vertikal Gambar tampilan CV "Biru Utama" di layar desktop horisontal Tampilan pada layar mobile : Gamba...
Baca selengkapnya