Tutorial Programming

Tutorial Membuat Responsive Navigasi Menu

Konsep dari responsive navbar ini adalah dengan mengubah menu navigasi anda menjadi menu berbentuk select box.
Penampakannya dilayar normal:
 photo 1.png
Penampakannya dilayar kecil:
 photo 2.png
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: '&ndash;'
    }); 
  })
</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

Tutorial Programming Designed by Templateism | Ary EJFA Copyright © 2015

Theme images by richcano. Powered by Blogger.