Flat desain sudah menjadi tren website saat ini, terbukti dengan banyaknya company atau prusahaan yang mengganti websitenya dengan tema flat design, flat design sendiri dapat kita buat dengan menggunakan framework css yaitu bootstrap, dan pada tutorial kali ini saya akan mengajarkan bagaimana cara membuat menu fix dengan bootstrap.
Menu fix adalah menu dengan keadaan tetap stay di atas browser ketika kita scrool, untuk lebih jelasnya kita langsung saja praktek, silahkan teman-teman buat sebuah file dan ketikan script berikut ini:
* Insert your code he<title>Latihan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.1.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.7%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20.affix%20%7B%0A%20%20%20%20%20%20width%3A%20100%25%3B%0A%09%09%09background%3A%20%23e74c3c%3B%0A%20%20%20%20%20%20border%3A%20none%3B%0A%20%20%7D%0A%09.active%7Bbackground%3A%23737373%20!important%3B%7D%0A%0A%20%20.affix%20%2B%20.container-fluid%20%7B%0A%20%20%20%20%20%20padding-top%3A%2070px%3B%0A%20%20%7D%0A%09.red%7Bcolor%3A%23fff%20!important%3B%7D%0A%09.red%3Ahover%7Bcolor%3A%23ccc%20!important%3B%7D%0A%0A%09.kontent%7Bheight%3A2000px%3B%20background%3A%232ecc71%3B%7D%0A%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<nav class="navbar navbar-inverse" data-spy="affix">
<ul class="nav navbar-nav">
<li class="active"><a href="#" style="font-size:30px;">Dumet School</a></li>
<li><a href="#" class="red">Web Master</a></li>
<li><a href="#" class="red">Web Programming</a></li>
<li><a href="#" class="red">Digital Marketing</a></li>
<li><a href="#" class="red">Grafik Design</a></li>
</ul>
</nav>
<div class="container-fluid kontent" style=""></div>
</body>
</html>
re
Petama yang harus kita link kan adalah library dari bootstrap itu sendiri kita harus memanggil css, serta jquery dari library bootstrap seperti script berikut ini :
* In<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.1.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.7%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />sert your code here
setelah itu saya membuat sebuah menu seperti script berikut ini :
* In<nav class="navbar navbar-inverse" data-spy="affix">
<ul class="nav navbar-nav">
<li class="active"><a href="#" style="font-size:30px;">Dumet School</a></li>
<li><a href="#" class="red">Web Master</a></li>
<li><a href="#" class="red">Web Programming</a></li>
<li><a href="#" class="red">Digital Marketing</a></li>
<li><a href="#" class="red">Grafik Design</a></li>
</ul>
</nav>
Dan saya memberikan konten yang saya akan berikan tinggi nantinya agar browser dapat discrool:
* Insert <div class="container-fluid kontent" style=""></div>
Lalu saya mengatur cssnya seperti berikut ini :
.affix {
width: 100%;
background: #e74c3c;
border: none;
}
.active{background:#737373 !important;}
.affix + .container-fluid {
padding-top: 70px;
}
.red{color:#fff !important;}
.red:hover{color:#ccc !important;}
.kontent{height:2000px; background:#2ecc71;}
Jika sudah teman-teman save dan jalankan pada browser, maka ketika menu kita scrool dia akan stay di atas.
Gimana teman-teman? cukup mudah bukan? untuk tutorial kali ini tentang membuat menu fix dengan bootstrap saya kira cukup sampai sini dulu, sampai bertemu lagi pada tutorial berikutnya,
terimakasih.