Tutorial Membuat Responsive Navigasi Menu
Konsep dari responsive navbar ini adalah dengan mengubah menu navigasi anda menjadi menu berbentuk select box.
Penampakannya dilayar normal:
Penampakannya dilayar kecil:
Pertama-tama download dulu file-file yang akan digunakan yaitu jquery.js dan jQuery_Mobile_Menu.js, Kamu bisa download disini setelah itu silahkan di embed di dokumen html anda.
Selanjutnya tambahkan style css berikut ini ke dokumen anda.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| ul{ list-style-type:none; padding:10px; margin:0 auto; width:500px; display:block; margin:0 auto; } li{ float:left; } .select-menu{ display:none; } a{ display:block; text-align:center; text-decoration:none; width:100px; background:#eee; } a:hover{ background:Red; } @media (max-width:767px){ #header nav{ display:none; } .select-menu{ display:block; width:100%; } } |
Jadi ketika tampilan layer <=767 maka menu nya akan diganti menjadi model select box. Kamu bisa kostumisasi nilai 767 nya.
Selanjutnya tambahkan skrip javascript ini diatas
ataupun diatas <script type="text/javascript">
$(function(){
$('.menu').mobileMenu();
$('#header nav').mobileMenu({
defaultText: 'Menu Navigasi...',
className: 'select-menu',
subMenuDash: '–'
});
})
</script>
Terakhir buat menu navigasinya
1
2
3
4
5
6
7
8
9
10
11
12
| <header id="header"> <center><h1 style="color:#fff">My Rock Header</h1></center> <nav> <ul> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> <li><a href="#">menu 4</a></li> <li><a href="#">menu 5</a></li> </ul> </nav></header> |
Mohon Perhatian : Tag
dan
No comments:
Post a Comment