Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Bagaimana Cara Membuat Collapse Button Menu Pada Versi Mobile Phone Menggunakan Framework Materializecss, pada framework yang satu sangat lah berbeda dengan framework bootstrap, jika di bootstrap sudah tersedia menu toggle untuk versi mobile phone,
nah di sini sedikit panjang stepnya dalam pembuatan menu untuk di mobile phone tapi jangan terlalu pusing tentang ini saya akan pandu step by step dalam merancangnya, teman teman bisa salinkan scriptnya yah ada beberapa yang harus dipersiapkan untuk bisa menggunakan framework Materialize, pertamatama teman bisa mengunjungi jquery.com dan materializecss.com kita download jquerynya dan kita masukan di dalam 1 folder, contohnya seperti ini :
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- CSS CUSTOM -->
<link rel="stylesheet" href="style.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">More 1</a></li>
<li><a href="#!">More 2</a></li>
<li class="divider"></li>
<li><a href="#!">More 3</a></li>
</ul>
<nav>
<div class="container">
<div class="nav-wrapper">
<!-- Button Mobile -->
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="side-nav" id="mobile-demo">
<li><a href="sass.html">Web Master</a></li>
<li><a href="badges.html">Web Programming</a></li>
<li><a href="badges.html">Ditigal Marketing</a></li>
<li><a href="badges.html">Graphic Design</a></li>
<li><a href="badges.html">Web Design</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">More<i class="material-icons right">arrow_drop_down</i></a></li>
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">More 1</a></li>
<li><a href="#!">More 2</a></li>
<li class="divider"></li>
<li><a href="#!">More 3</a></li>
</ul>
</ul>
<!-- TUTUP BUTTON MOBILE -->
<a href="#!" class="brand-logo"><img src="logo.png" alt=""></a>
<ul class="right hide-on-med-and-down">
<li><a href="sass.html">Web Master</a></li>
<li><a href="badges.html">Web Programming</a></li>
<li><a href="badges.html">Ditigal Marketing</a></li>
<li><a href="badges.html">Graphic Design</a></li>
<li><a href="badges.html">Web Design</a></li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">More<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</div>
</nav>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="myscript.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
Jika semua sudah siap teman teman save dan jalankan dibrowsernya, lalu minimize browser, selesai, cukup mudah bukan, saya rasa cukup sampai disini tutorial tentang Bagaimana Cara Membuat Collapse Button Menu Pada Versi Mobile Phone Menggunakan Framework Materializecss, sampai bertemu di artikel selanjutnya dan sampai jumpa semoga artikel ini bermanfaat dan selamat mencoba.
#KeepLearn
#IsmetMA