Membuat Menu Fix Dengan Bootstrap
Flat desain telah menjadi tren laman ketika ini, terbukti dengan banyaknya company atau prusahaan yang mengganti websitenya dengan tema flat design, flat design sendiri dapat kita bikin dengan menggunakan framework css yaitu bootstrap, dan di panduan kali ini saya akan mengajarkan bagaimana cara membangun fitur fix dengan bootstrap.
Fitur fix yakni fitur dengan keadaan tetap stay di atas browser ketika kita scrool, bagi lebih jelasnya kita seketika saja praktek, silahkan teman-teman bikin 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=Flat desain telah menjadi tren laman ketika ini Membangun Fitur Fix Dengan Bootstrap title=Membangun Fitur Fix Dengan Bootstrap />
<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=Flat desain telah menjadi tren laman ketika ini Membangun Fitur Fix Dengan Bootstrap title=Membangun Fitur Fix Dengan Bootstrap />
<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=Flat desain telah menjadi tren laman ketika ini Membangun Fitur Fix Dengan Bootstrap title=Membangun Fitur Fix Dengan Bootstrap />
</head>
<body>
<nav class=navbar navbar-inverse data-spy=affix>
<ul class=nav navbar-nav>
<li class=active><a href=# style=font-size:30px;>Source Code Aplikasi</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 mesti kita link kan yakni library dari bootstrap itu sendiri kita mesti 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=Flat desain telah menjadi tren laman ketika ini Membangun Fitur Fix Dengan Bootstrap title=Membangun Fitur Fix Dengan Bootstrap />
<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=Flat desain telah menjadi tren laman ketika ini Membangun Fitur Fix Dengan Bootstrap title=Membangun Fitur Fix Dengan Bootstrap />sert your code here
setelah itu saya membangun sebuah fitur 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;>Source Code Aplikasi</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;}Sekiranya telah teman-teman save dan jalankan di browser, karenanya ketika fitur kita scrool dia akan stay di atas.
Gimana teman-teman? lumayan gampang bukan? bagi panduan kali ini mengenai membangun fitur fix dengan bootstrap saya kira lumayan hingga sini dulu, hingga bertemu lagi di panduan berikutnya,
terimakasih.
Sumber https://kursuswebsite.org
