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