Cara membuat Pushpin dengan MaterializeCSS
17/04/2017 Maykhel David 3160 Website
Materialize pushpin adalah sebuah plugin yang berfungsi untuk memberikan posisi fixed pada sebuah konten, kita bisa menggunakan pushpin untuk membuat sticky pada elemen html. Plugin hari ini sangat berguna untuk digunakan ketika ingin membuat sticky element pada halaman tertentu. Atau kalian juga bisa membuat sebuah halaman parallax dengan pushpin ini.
Untuk membuat pushpin dengan materialize, mari kita buat beberapa navbar dengan class .pushpin-sticky (nama class nya bisa kalian sesuaikan sendiri )
<div id="red" class="block red lighten-1">
<nav class="pushpin-sticky" data-target="red">
<div class="nav-wrapper red">
<div class="container">
<a href="#" class="brand-logo">Red</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#!">Red Link 1</a></li>
<li><a href="#!">Red Link 2</a></li>
<li><a href="#!">Red Link 3</a></li>
</ul>
</div>
</div>
</nav>
</div>
Sekarang kita akan membuat sejumlah style agar kita bisa melihat hasilnya, disini saya akan menambahkan height dan warna background pada body, kalian bisa copy kode dibawah ini
body{
height: 3000px;
background:#ab47bc;
}
Dan selanjutnya kita perlu mengaktifkannya menggunakan beberapa baris jquery, pastikan class pada div diatas sesuai dengan baris kode jquery dibawah ini.
// Pushpin Demo Init
if ($('.pushpin-sticky').length) {
$('.pushpin-sticky').each(function() {
var $this = $(this);
var $target = $('#' + $(this).attr('data-target'));
$this.pushpin({
top: $target.offset().top,
bottom: $target.offset().top + $target.outerHeight() - $this.height()
});
});
}
Dengan begitu pushpun sudah bisa digunakan.
Untuk lebih jelasnya kalian coba copy kode dibawah ini dan simpan dengan nama pushpin.html
<!DOCTYPE html>
<html><head>
<title>Discovery Button</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<style>
body{
height: 4000px;
background:#ab47bc;
}#green{
height: 500px;
background: green
}
#red{
height: 500px;
}
</style>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head><body>
<div id="red" class="block red lighten-1">
<nav class="pushpin-sticky" data-target="red">
<div class="nav-wrapper red">
<div class="container">
<a href="#" class="brand-logo">Red</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#!">Red Link 1</a></li>
<li><a href="#!">Red Link 2</a></li>
<li><a href="#!">Red Link 3</a></li>
</ul>
</div>
</div>
</nav>
</div><div id="green" class="block green lighten-1">
<nav class="pushpin-sticky" data-target="green">
<div class="nav-wrapper green">
<div class="container">
<a href="#" class="brand-logo">Green</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#!">Green Link 1</a></li>
<li><a href="#!">Green Link 2</a></li>
<li><a href="#!">Green Link 3</a></li>
</ul>
</div>
</div>
</nav>
</div><script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script>
// Pushpin Demo Init
if ($('.pushpin-sticky').length) {
$('.pushpin-sticky').each(function() {
var $this = $(this);
var $target = $('#' + $(this).attr('data-target'));
$this.pushpin({
top: $target.offset().top,
bottom: $target.offset().top + $target.outerHeight() - $this.height()
});
});
}
</script>
</body></html>
Coba lihat hasilnya di browser.
Baiklah teman-teman, demikian artikel tentang cara membuat pushpin dengan materialize css kali ini, semoga bermanfaat.
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
