Simple Responsive Menu

Simple Responsive Menu - Pada kesempatan yang lalu saya telah membagikan sebuah menu responsive yang terdapat pada blog ini karena banyaknya permintaan . Lalu saya berfikir kenapa gak sekalian dibagikan kembali menu yang dulu sempet dipake sebelum menjadi sekarang ini karena dengan begitu lengkaplah kebaikan ini wkwkwk ... Pada menu kali ini terdapat sedikit perbedaan dengan menu yang sebelumnya dan untuk mengetahui perbedaan nya silahkan lihat pada demo dibawah ini . 

Klik tombol demo untuk melihat responsivitasnya
SEE DEMO

  CSS

/* Awae aweu Aweu */
.bolenang:before,
.bolenang:after {
content: " ";
display: table;}
.bolenang:after {
clear: both;}
.bolenang {
*zoom: 1;}
/* Style */
nav {
height: 40px;
width: 100%;
background:#3E5553;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;}
nav li {
display: inline;
float: left;}
nav a {
color: #9BA26E;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;}
nav li a {
border-right: 2px solid #222324;
box-sizing:border-box;}
nav li:last-child a {
border-right: 0;}
nav a:hover, nav a:active {
background-color: #50838A;}
nav a#pull {
display: none;}
/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
nav {height: auto;}
nav ul {width: 100%;
display: block;
height: auto;}
nav li {width: 50%;
float: left;
position: relative;}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {text-align: left;
width: 100%;
text-indent: 25px;}
}
/*Responsinator*/
@media only screen and (max-width : 480px) {
nav {border-bottom: 0;}
nav ul {display: none;height: auto;}
nav a#pull {
display: block;
background-color: #355758;
width: 100%;
position: relative;}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;}
}
/*Smartphone Responsinator*/
@media only screen and (max-width : 320px) {
nav li {display: block;float: none;width: 100%;
}
nav li a {border-bottom: 1px solid #576979;}
}

HTML

<nav class="bolenang">
<ul class="bolenang">
<li><a href="#">Home</a></li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">There</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>    
</ul>
</nav>

JS

$(function() {
function puller(){
var w = $(window).width();
if(w > 480 && menu.is(':hidden')) {
console.log('larger than 320');
menu.removeAttr('style');
}
if (w < 481) {
if(!$('#pull').length) {$('<a href="#" id="pull">Menu</a>')
.insertAfter('nav ul');}}
}
var menu = $('nav ul');
puller();
$('body').on('click','#pull', function(e) {    
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
puller();
});
});

Silahkan di acak-acak untuk penyesuaian dengan tema template sobat.

Setiap punya waktu teruslah modifikasi template , karena cara itulah yang akan mampu membawamu pada hal yang baru CONTOH EROR PAGE