Kang Rian [ on Blogger! ]

rian nurherdian, kang rian, blog kang rian, blog rian nurherdian, blogger hacks , free blogger templates, blogspot tutorial, blogger tutorial, tutorial seo, tutorial html5, blog seo friendly, modifikasi template blog, desain web pemula, blogger basic

Simple Responsive Navigation HTML5 Menu

Simple Responsive Navigation HTML5 Menu - Pada kesempatan ini saya akan berbagi sedikit source code CSS & Javascript untuk membuat Simple Menu Navigation "Responsive" untuk sobat blogger , untuk sumber nya sendiri saya lupa :D , karena saya sendiri googling dan hanya menemukan source ini dari Jsfiddle.net , sebelum membuat Simple Responsive Navigation HTML5 Menu pastikan sobat sudah memasang jQuery library & meta tag media query dibawah ini untuk mengaktifkan nya, silahkan simpan tepat di atas kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Catatan :
Jika salah satu kode di atas sudah terpasang diblog sobat, saya sarankan untuk tidak menduplikasi kan Jquery library & Meta tag Query di atas , karena akan bentrok satu sama lain .

Jika sobat penasaran seperti apa Simple Responsive Navigation HTML5 Menu ini, sobat bisa melihat langsung demo nya disini : DEMO
Untuk membuktikan responsive nya silahkan perkecil frame browser nya pada halaman DEMO, seperti gambar dibawah ini :
Baiklah, Jika langkah di atas sudah dimengerti kita lanjut ke tahap berikutnya , yaitu memasang ( CSS - Javascript & HTML ) nya ..

Berikut Kode CSS nya :



nav {
 height: 40px;
 width: 100%;
 background: #656565;
 font-size: 11pt;
 font-family: 'PT Sans', Arial, sans-serif;
 font-weight: bold;
 position: relative;
 border-bottom: 2px solid #283744;
}

nav a {
 color: #fff;
 display: inline-block;
 width: 100px;
 text-align: center;
 text-decoration: none;
 line-height: 40px;
 /*text-shadow: 1px 1px 0px #283744;*/
}

nav header {
 display: none;
  
}

nav ul {
 padding: 0;
 margin: 0 auto;
 width: 400px;
 height: 40px;
}
nav li {
 display: inline;
 float: left;
}

nav li a {
 border-right: 1px solid #787878;
 box-sizing:border-box;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
}


nav li:last-child a {
 border-right: 0;
}
nav a:hover, nav a:active {
 background-color: #868686;
}


/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
 nav { 
    height: auto;
  
   }
 
 nav header {
 display: none;
  
}
 
   nav ul {
    width: 100%;
    display: block;
    height: auto;
  
   }
   nav li {
    width: 50%;
    float: left;
    position: relative;
   }
   nav li a {
  border-bottom: 1px solid #787878;
  border-right: 1px solid #787878;
 }
   nav a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
  background: #656565;
   }
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
 nav {
  border-bottom: 0;
  background: #656565;
  width: 100%;
  height: 33px;
  padding: 7px 0 0 0;
  
 }
 
 
  
 nav ul {
  display: none;
  height: auto;
  padding: 10px 0 0 0;
  clear: both;
  background: #656565; 
 
 }
 
 .btn {
  width: 24px;
  height: 22px;
  background: #3CC;
  float: left;
  cursor: pointer;
  margin: 0 10px 0 10px;
  padding: 3px 0px 0 6px;
  -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
          border-radius: 2px;
  background:url('http://3.bp.blogspot.com/-EznzkHBnKbk/Up4icD70ujI/AAAAAAAADYA/BzRSsyl-5y0/s20/menu-responsive.png') no-repeat center;
 }
 
 .btn .icon {
  display: block;
  width: 18px;
  height: 2px;
  margin-top: 3px;
  background-color: #f5f5f5;
  -webkit-border-radius: 1px;
     -moz-border-radius: 1px;
          border-radius: 1px;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
     -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
          box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

 
 
 
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
 nav li {
  display: block;
  float: none;
  width: 100%;
 }
 nav li a {
  border-bottom: 1px solid #787878;
 }
}


Berikut Kode JAVASCRIPT nya :


$(function() {
   var pull   = $('.btn');
    menu   = $('nav ul');
    menuHeight = menu.height();

   $(pull).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
   });

   $(window).resize(function(){
          var w = $(window).width();
          if(w > 320 && menu.is(':hidden')) {
           menu.removeAttr('style');
          }
      });
  });

Berikut Kode HTML, Untuk memanggil Menu Responsive nya :


<nav>
 <div class="btn">
    </div>
 <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Contact</a></li>
        <li><a href="http://goo.gl/7vVcM5" target='_blank'>Blog</a></li>
    </ul>
    
</nav>


Selanjutnya , silahkan sobat kreasikan sendiri dari source code Simple Responsive Navigation HTML5 Menu di atas , jika ada yang ingin ditanyakan silahkan tanyakan lewat form komentar dibawah ini , semoga bermanfaaat! :) terima kasih ..
Suka artikel ini? Bagikan!