Responsive Menu Navigation

Setelah beberapa hari of karena berbagai alasan akhirnya ada waktu juga untuk membuat postingan . Kali ini saya akan kembali pada kebiasaan lama yaitu bagi-bagi menu hehe ... Sebenarnya ini permintaan beberapa teman yang dikirim lewat email dan pesan facebook yang ingin membuat menu sama percis dengan blog ini . Awalnya sempet ragu masa menu yang dipake dibagi-bagi  , tapi setelah difikir-fikir ya biar saja yang penting jadi pahala hehe .. Sebelum lebih jauh mengenalnya silahkan perhatikan baik-baik demonya .

SEE DEMO

CSS 

.navbar {
height: 48px;
width: 100%;
margin-top: -5px;
background-color: #222;
background-image: linear-gradient(#333, #222);
position: relative;
border-top: 1px solid #444;
border-bottom: 1px solid #555
}
.navbar ul {
padding: 0;
margin: 0 auto;
width: 640px;
height: 48px
}
.navbar ul {
  list-style: none;
}
.navbar ul li { float: left }
.navbar ul li a {
color: #fff;
display: inline-block;
width: 105px;
font:normal normal 500 
15px/48px 
'Yanone Kaffeesatz', Helvetica, Arial, sans-serif;
text-align: center;
letter-spacing: 1px;
text-decoration: none;
text-shadow: 0 -1px rgba(143, 222, 98, .1);
border-right: 1px solid #555;
transition: color .2s ease-in-out;
box-sizing: border-box
}
.navbar li:last-child a { border-right: 0 ;}
/* ADDS THIS CLASS ON SCROLL */
.fixed { position: fixed; top: 0; margin: 0 }
/* FONTAWESOME */
.fa { margin-right: 10px }
/* RESPONSIVE DESIGN */
@media screen and (max-width: 600px) {
.navbar ul {
width: 100%;
display: block;
height: auto}
.navbar ul li {
width: 50%;
float: left;
position: relative;
background-color: #222;
background-image: linear-gradient(#333, #222)
  }
.navbar ul li a {
text-align: left;
width: 100%;
padding-left: 25px;
border-bottom: 1px solid #555;
border-right: 1px solid #555
  }
}
/* COLORS */
.green a:hover { color: #8fde62 }
.blue a:hover { color: #3cf }
.red a:hover { color: #fc7171 }
.purple a:hover { color: #e25cf9 }

HTML

<div class='navbar purple'>
<ul>
<li><a href="#"><span class='fa fa-home'></span>Home</a></li>
<li><a href="#"><span class='fa fa-file'></span>Resources</a></li>
<li><a href="#"><span class='fa fa-wrench'></span>Tools</a></li>
<li><a href="#"><span class='fa fa-list'></span>Examples</a></li>
<li><a href="#"><span class='fa fa-tag'></span>Tags</a></li>
<li><a href="#"><span class='fa fa-pencil'></span>Blog</a></li>    
</ul>

Kustomisasi : Kode CSS diatas kode </style> dan Kode HTML free Position.

Membuat menu dengan posisi fixed

JS

$(function(){
  var nav = $(".navbar"),
      yOffset = 0,
      triggerPoint = 40;
  $(window).scroll(function(){
    yOffset = $(window).scrollTop();
    nav.toggleClass("fixed", (yOffset >= triggerPoint));
  });
});
$('a').on('dragstart', function(event) 
{ event.preventDefault(); });

Begitulah kira-kira ...