Membuat Show Hide Navigasi Menu Menggunakan jQuery.

SOMAZINGBLOG | Membuat Show Hide Navigasi Menu Menggunakan jQuery. - Menu navigasi adalah penting dalan kenyamanan pengunjung menjelajahi blog anda. Agar berbeda dari menu navigasi lain yang terlalu "mainstream" kali ini saya akan membagikan ke anda sebuah  Show Hide Navigasi Menu Menggunakan jQuery.

CSS

/* Copyright Daniel Benny Simanjuntak*/
*, body {
    margin:0;
    overflow:hidden;
}
a {
    text-decoration:none;
}
#menu ul, #menu li {
    list-style:none;
    margin: 0px;
    padding: 0px;
}
.masthead h1 {
    text-align: center;
    font-size: 4em;
    margin: 0px;
    line-height: 1;
}
.masthead p {
    text-align: center;
    font-size: 1.125em;
    margin: .5em 0;
}
.push {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}
.masthead {
    background: #34495D;
    color: #fff;
    position: relative;
}
.menu-link {
    position: absolute;
    font-size: 1.5em;
    z-index:9999
}
.menu-link:link, .menu-link:visited {
    color: #fff;
    background: rgba(0, 0, 0, .5);
    border-radius: 4px;
    padding: .2em .4em;
}
.menu-link:hover, .menu-link:active {
    color: #25B89A;
    background: rgba(0, 0, 0, .7);
}
.panel {
    background: #2C3E50;
    z-index: 9999;
    position: fixed;
}
.panel ul {
    border-top: 2px solid #34495D;
}
.panel img {
    display: block;
    margin: 0px auto;
    padding: 1em 0px;
}
.panel img:hover {
    -webkit-transition: all 0.7s linear;
    transition: all 0.7s;
    transform: rotate(6.28rad);
    -webkit-transform: rotate(6.28rad);
}
.panel a {
    display: block;
    border-bottom: 2px solid #34495D;
    padding: 1em;
}
.panel a:link, .panel a:visited {
    color: #fff;
}
.panel a:hover, .panel a:active {
    background: #25B89A;
}

HTML.
PANEL NAVIGASI

<a class="menu-link" href="#menu">&#9776;</a> 

KERANGKA NAVIGASI

<nav class="panel" id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Archive</a></li>
</ul>
</nav>

JAVASCRIPT

<script>
(function ($) {
'use strict';
$.fn.menuSlide = function (options) {
var settings = $.extend({
'menu': ('#menu'),
'push': ('.push'),
'menuWidth': '14em',
'speed': '300'
}, options);

var menuLink = this,
menu = $(settings.menu),
push = $(settings.push),
width = settings.menuWidth;

var positionOffScreen = {
'position': 'absolute',
'margin-top': '21px',
'left': '-16em',
'width': settings.menuWidth,
'height': '20.4%'
};

var animateSlide = {
'-webkit-transition': 'left ' + settings.speed + 'ms ease',
'-moz-transition': 'left ' + settings.speed + 'ms ease',
'-ms-transition': 'left ' + settings.speed + 'ms ease',
'-o-transition': 'left ' + settings.speed + 'ms ease',
'transition': 'left ' + settings.speed + 'ms ease'
};

menu.css(positionOffScreen);

menuLink.on('click.menuSlide', function () {

menu.css(animateSlide);
push.css(animateSlide);

menu.toggleClass('slide');
push.toggleClass('slide');

if (menu.hasClass('slide') === true) {
menu.css('left', '-32px');
} else {
menu.css('left', '-16em');
}

if (push.hasClass('slide') === true) {
push.css('left', width);
} else {
push.css('left', '32px');
}
return false;
});
};
}(jQuery));

$(document).ready(function () {
$('.menu-link').menuSlide();
});
</script>

DEMO -> DISINI

Tweet