Membuat Side Nav dengan Materialize CSS

Menggunakan desain Flat atau yang biasa disebut material design pada umumnya memang menjadi daya tarik sendiri untuk saat ini, bagaimana tidak? Hampir semua device atau perangkat yang memiliki interface sudah bisa dibilang mengikuti trend yang ada saat ini, dengan mengenal material design tentu wawasan kita tentang desain interface bisa lebih terbuka.

Begitu pula dalam website, banyak sekali acuan antarmuka baik itu di smartphone ataupun pada website tertentu untuk dijadikan sebuah referenssi tampilan material design. Tampilan material design sendiri sudah  hampir tidak bisa terlepas dari pedoman trend design saat ini baik itu di desktop maupun pada perangkat mobile seperti smartphone atau tablet

Oleh karena itu kali ini kita akan sedikit membahas tentang salah satu fitur yang menjadi unggulan pada material design, yaitu navigasi samping, atau biasa disebut side-nav. Fungsi dari sidenav ini adalah membuat tampilan baris menu di sebelah kiri ataupun di sebelah kanan pada sebuah antarmuka.

Cara membuatnya juga sangat mudah, pertama kita hubungkan dahulu file core materialize dan jquery seperti ini

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">

<!—Compiled and minified Jquery -->
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>

 

Selanjutnya kita akan membuat struktur untuk side nav seperti ini

<ul id="slide-out" class="side-nav">
  <li>
    <div class="userView">
      <div class="background">
      </div>
      <a href="#!user">
        <h1>D</h1>
      </a>
      <a href="#!name"><span class="white-text name">Dumetschool</span></a>
      <a href="#!email"><span class="white-text email">info@dumetschool.com</span></a>
    </div>
  </li>
  <li><a href="#!">First Link With Icon</a></li>
  <li><a href="#!">Second Link</a></li>
  <li><a href="#!">First Sidebar Link</a></li>
  <li><a href="#!">Second Sidebar Link</a></li>
  <li>
    <ul class="collapsible collapsible-accordion">
      <li>
        <a class="collapsible-header">Dropdown</a>
        <div class="collapsible-body">
          <ul>
            <li><a href="#!">First</a></li>
            <li><a href="#!">Second</a></li>
            <li><a href="#!">Third</a></li>
            <li><a href="#!">Fourth</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </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-activates="slide-out" class="button-collapse btn waves-effect waves-light blue lighten-3">MENU</a>

 

Sekarang kita akan mengaktifkan fungsi agar navbar bisa berfungsi dengan baris javascript seperti ini

  $('.button-collapse').sideNav({

      menuWidth: 300, // Default is 300

      edge: 'left', // Choose the horizontal origin

      closeOnClick: true, // Closes side-nav on <a> clicks

      draggable: true // Choose whether you can drag to open on touch screens

    }

  );

Jika di tes pada browser akan terlihat hasilnya.

demikian artikel yang membahas tentang cara membuat side nav dengan materialize css ini. Semoga bermanfaat.

Untuk demo lebih jelasnya bisa lihat dibawah ini

 

8 Mei 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat