Cara Download Simple Responsive Navigation HTML5 Menu Update Terbaru

Sedikit Info Seputar Simple Responsive Navigation HTML5 Menu Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Simple Responsive Navigation HTML5 Menu, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel CSS, Artikel JavaScript, Artikel Responsive, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Simple Responsive Navigation HTML5 Menu Terbaru
link: Simple Responsive Navigation HTML5 Menu

Berbagi Simple Responsive Navigation HTML5 Menu Terbaru dan Terlengkap 2017

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAYM4sMmSeUv6AWWtSe98fMG5qZyr5GH1v_Z_7y8ucffD4D0ik6qMNaPeWRpo3E9LSU5l8hUNN-y7OoLQ6QV_-BrbgXbbyNq5hJL1K4VZijkTtcQfFZxTfdUJAFeyTD8OdZ7yHjM1hiFJG/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 ..

Itulah sedikit Artikel Simple Responsive Navigation HTML5 Menu terbaru dari kami

Semoga artikel Simple Responsive Navigation HTML5 Menu yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Simple Responsive Navigation HTML5 Menu