Simple Mobile Navigation Free Download

No doubt each and every website have mobile version of websites, so here i am introducing a very simple mobile navigation bar. This is very simple css and jquery light weight plugin of mobile responsive.

HTML Code mobile responsive navigation bar

<button id="responsive-menu-button" class="responsive-menu-button responsive-menu-boring responsive-menu-accessible" type="button" aria-label="Menu"> <span class="responsive-menu-box"> <span class="responsive-menu-inner"></span> </span></button>

<div id="responsive-menu-container" class="slide-left">
<div id="responsive-menu-wrapper">
<ul id="responsive-menu" class="">
<li class="responsive-menu-item responsive-menu-current-item"><a href="#" class="responsive-menu-item-link">Home</a></li>
<li class="responsive-menu-item"><a href="#" class="responsive-menu-item-link">About Us</a></li>
<li class="responsive-menu-item responsive-menu-item-has-children"><a href="#" class="responsive-menu-item-link">Drop Down Menu 1<div class="responsive-menu-subarrow"> + </div></a>
<ul class='responsive-menu-submenu responsive-menu-submenu-depth-1'>
<li class="responsive-menu-item"><a href="#" class="responsive-menu-item-link">Test Sub Menu 1</a></li>
<li class="responsive-menu-item"><a href="#" class="responsive-menu-item-link">Test Sub Menu 1</a></li>
<li class="responsive-menu-item"><a href="#" class="responsive-menu-item-link">Test Sub Menu 1</a></li>
</ul>
</li>
<li class="responsive-menu-item responsive-menu-item-has-children"><a href="#" class="responsive-menu-item-link">Drop Down Menu 2<div class="responsive-menu-subarrow"> + </div></a>
<ul class='responsive-menu-submenu responsive-menu-submenu-depth-1'>
<li class="responsive-menu-item"><a href="#" class="responsive-menu-item-link">Test Sub Menu 2</a></li>
<li class="responsive-menu-item"><a href="#" class="responsive-menu-item-link">Test Sub Menu 2</a></li>
<li class="responsive-menu-item"><a href="#" class="responsive-menu-item-link">Test Sub Menu 2</a></li>
<li class="responsive-menu-item"><a href="#" class="responsive-menu-item-link">Test Sub Menu 2</a></li>
</ul>
</li>
<li class="responsive-menu-item"><a href="#" class="responsive-menu-item-link">Contact Us</a></li>
</ul>
</div>
</div>

CSS Code mobile responsive navigation bar

<style>
#responsive-menu-container {display: block;}
#responsive-menu-container {position: fixed; top: 0; bottom: 0; z-index: 99998; padding-bottom: 5px; margin-bottom: -5px; outline: 1px solid transparent; overflow-y: auto; overflow-x: hidden;}
#responsive-menu-container .responsive-menu-search-box {width: 100%; padding: 0 2%; border-radius: 2px; height: 50px; -webkit-appearance: none;}
#responsive-menu-container.push-left, #responsive-menu-container.slide-left {transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%);}
.responsive-menu-open #responsive-menu-container.push-left, .responsive-menu-open #responsive-menu-container.slide-left {transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0);}
#responsive-menu-container.push-top, #responsive-menu-container.slide-top {transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%);}
.responsive-menu-open #responsive-menu-container.push-top, .responsive-menu-open #responsive-menu-container.slide-top {transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0);}
#responsive-menu-container.push-right, #responsive-menu-container.slide-right {transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%);}
.responsive-menu-open #responsive-menu-container.push-right, .responsive-menu-open #responsive-menu-container.slide-right {transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0);}
#responsive-menu-container.push-bottom, #responsive-menu-container.slide-bottom {transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%); -moz-transform: translateY(100%);}
.responsive-menu-open #responsive-menu-container.push-bottom, .responsive-menu-open #responsive-menu-container.slide-bottom {transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0);}
#responsive-menu-container, #responsive-menu-container:before, #responsive-menu-container:after, #responsive-menu-container *, #responsive-menu-container *:before, #responsive-menu-container *:after {box-sizing: border-box; margin: 0; padding: 0;}
#responsive-menu-container #responsive-menu-search-box, #responsive-menu-container #responsive-menu-additional-content, #responsive-menu-container #responsive-menu-title {padding: 25px 5%;}
#responsive-menu-container #responsive-menu, #responsive-menu-container #responsive-menu ul {width: 100%;}
#responsive-menu-container #responsive-menu ul.responsive-menu-submenu {display: none;}
#responsive-menu-container #responsive-menu ul.responsive-menu-submenu.responsive-menu-submenu-open {display: block;}
#responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-1 a.responsive-menu-item-link {padding-left: 10%;}
#responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-2 a.responsive-menu-item-link {padding-left: 15%;}
#responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-3 a.responsive-menu-item-link {padding-left: 20%;}
#responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-4 a.responsive-menu-item-link {padding-left: 25%;}
#responsive-menu-container #responsive-menu ul.responsive-menu-submenu-depth-5 a.responsive-menu-item-link {padding-left: 30%;}
#responsive-menu-container li.responsive-menu-item {width: 100%; list-style: none;}
#responsive-menu-container li.responsive-menu-item a {width: 100%; display: block; text-decoration: none; padding: 0 5%; position: relative;}
#responsive-menu-container li.responsive-menu-item a .fa {margin-right: 15px;}
#responsive-menu-container li.responsive-menu-item a .responsive-menu-subarrow {position: absolute; top: 0; bottom: 0; text-align: center; overflow: hidden;}
#responsive-menu-container li.responsive-menu-item a .responsive-menu-subarrow .fa {margin-right: 0;}
button#responsive-menu-button .responsive-menu-button-icon-inactive {display: none;}
button#responsive-menu-button {z-index: 99999; display: none; overflow: hidden; outline: none;}
button#responsive-menu-button img {max-width: 100%;}
.responsive-menu-label {display: inline-block; font-weight: 600; margin: 0 5px; vertical-align: middle;}
.responsive-menu-label .responsive-menu-button-text-open {display: none;}
.responsive-menu-accessible {display: inline-block;}
.responsive-menu-accessible .responsive-menu-box {display: inline-block; vertical-align: middle;}
.responsive-menu-label.responsive-menu-label-top, .responsive-menu-label.responsive-menu-label-bottom{display: block; margin: 0 auto;}
button#responsive-menu-button {padding: 0 0; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible;}
.responsive-menu-box {width: 25px; height: 19px; display: inline-block; position: relative;}
.responsive-menu-inner {display: block; top: 50%; margin-top: -1.5px;}
.responsive-menu-inner, .responsive-menu-inner::before, .responsive-menu-inner::after {width: 25px; height: 3px; background-color: #ffffff; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease;}
.responsive-menu-open .responsive-menu-inner, .responsive-menu-open .responsive-menu-inner::before, .responsive-menu-open .responsive-menu-inner::after {background-color: #ffffff;}
button#responsive-menu-button:hover .responsive-menu-inner, button#responsive-menu-button:hover .responsive-menu-inner::before, button#responsive-menu-button:hover .responsive-menu-inner::after, button#responsive-menu-button:hover .responsive-menu-open .responsive-menu-inner, button#responsive-menu-button:hover .responsive-menu-open .responsive-menu-inner::before, button#responsive-menu-button:hover .responsive-menu-open .responsive-menu-inner::after, button#responsive-menu-button:focus .responsive-menu-inner, button#responsive-menu-button:focus .responsive-menu-inner::before, button#responsive-menu-button:focus .responsive-menu-inner::after, button#responsive-menu-button:focus .responsive-menu-open .responsive-menu-inner, button#responsive-menu-button:focus .responsive-menu-open .responsive-menu-inner::before, button#responsive-menu-button:focus .responsive-menu-open .responsive-menu-inner::after {background-color: #ffffff;}
.responsive-menu-inner::before, .responsive-menu-inner::after {content: ""; display: block;}
.responsive-menu-inner::before {top: -8px;}
.responsive-menu-inner::after {bottom: -8px;}
.responsive-menu-boring .responsive-menu-inner, .responsive-menu-boring .responsive-menu-inner::before, .responsive-menu-boring .responsive-menu-inner::after {transition-property: none;}
.responsive-menu-boring.is-active .responsive-menu-inner {transform: rotate(45deg);}
.responsive-menu-boring.is-active .responsive-menu-inner::before {top: 0; opacity: 0;}
.responsive-menu-boring.is-active .responsive-menu-inner::after {bottom: 0; transform: rotate(-90deg);}
button#responsive-menu-button {width: 48px; height: 39px; position: fixed; top: 11px; right: 5%; background: #000000; padding-top: 2px;}
.responsive-menu-open button#responsive-menu-button {background: #000000}
.responsive-menu-open button#responsive-menu-button:hover, .responsive-menu-open button#responsive-menu-button:focus, button#responsive-menu-button:hover, button#responsive-menu-button:focus {background: #000000;}
button#responsive-menu-button .responsive-menu-box {color: #ffffff;}
.responsive-menu-open button#responsive-menu-button .responsive-menu-box {color: #ffffff;}
.responsive-menu-label {color: #ffffff; font-size: 14px; line-height: 13px;}
button#responsive-menu-button {display: inline-block; transition: transform 0.5s, background-color 0.5s;}
#responsive-menu-container {width: 75%; left: 0; transition: transform 0.5s; text-align: left; background: #212121;}
#responsive-menu-container #responsive-menu-wrapper {background: #212121;}
#responsive-menu-container #responsive-menu-additional-content {color: #ffffff;}
#responsive-menu-container .responsive-menu-search-box {background: #ffffff; border: 2px solid #dadada; color: #333333;}
#responsive-menu-container .responsive-menu-search-box:-ms-input-placeholder {color: #c7c7cd;}
#responsive-menu-container .responsive-menu-search-box::-webkit-input-placeholder {color: #c7c7cd;}
#responsive-menu-container .responsive-menu-search-box:-moz-placeholder {color: #c7c7cd; opacity: 1;}
#responsive-menu-container .responsive-menu-search-box::-moz-placeholder {color: #c7c7cd; opacity: 1;}
#responsive-menu-container .responsive-menu-item-link, #responsive-menu-container #responsive-menu-title, #responsive-menu-container .responsive-menu-subarrow {transition: background-color 0.5s, border-color 0.5s, color 0.5s;}
#responsive-menu-container #responsive-menu-title {background-color: #212121; color: #ffffff; font-size: 13px;}
#responsive-menu-container #responsive-menu-title a {color: #ffffff; font-size: 13px; text-decoration: none;}
#responsive-menu-container #responsive-menu-title a:hover {color: #ffffff;}
#responsive-menu-container #responsive-menu-title:hover {background-color: #212121; color: #ffffff;}
#responsive-menu-container #responsive-menu-title:hover a {color: #ffffff;}
#responsive-menu-container #responsive-menu-title #responsive-menu-title-image {display: inline-block; vertical-align: middle; margin-right: 15px;}
#responsive-menu-container #responsive-menu > li.responsive-menu-item:first-child > a {border-top: 1px solid #212121;}
#responsive-menu-container #responsive-menu li.responsive-menu-item .responsive-menu-item-link {font-size: 13px;}
#responsive-menu-container #responsive-menu li.responsive-menu-item a {line-height: 40px; border-bottom: 1px solid #212121; color: #ffffff; background-color: #212121;}
#responsive-menu-container #responsive-menu li.responsive-menu-item a:hover {color: #ffffff; background-color: #3f3f3f; border-color: #212121;}
#responsive-menu-container #responsive-menu li.responsive-menu-item a:hover .responsive-menu-subarrow {color: #ffffff; border-color: #3f3f3f; background-color: #3f3f3f;}
#responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow {right: 0; height: 40px; line-height: 40px; width: 40px; color: #ffffff; border-left: 1px solid #212121; background-color: #444444; padding:12px 0px;}
#responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow.responsive-menu-subarrow-active {color: #ffffff; border-color: #212121; background-color: #212121;}
#responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow.responsive-menu-subarrow-active:hover {color: #ffffff; border-color: #3f3f3f; background-color: #3f3f3f;}
#responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow:hover {color: #ffffff; border-color: #3f3f3f; background-color: #3f3f3f;}
#responsive-menu-container #responsive-menu li.responsive-menu-current-item > .responsive-menu-item-link {background-color: #212121; color: #ffffff; border-color: #212121;}
#responsive-menu-container #responsive-menu li.responsive-menu-current-item > .responsive-menu-item-link:hover {background-color: #3f3f3f; color: #ffffff; border-color: #3f3f3f;}
</style>

jQueryCode mobile responsive navigation bar

<script>
jQuery(document).ready(function($) {

var ResponsiveMenu = {
trigger: '#responsive-menu-button',
animationSpeed: 500,
breakpoint: 992,
pushButton: 'off',
animationType: 'slide',
animationSide: 'left',
pageWrapper: '',
isOpen: false,
triggerTypes: 'click',
activeClass: 'is-active',
container: '#responsive-menu-container',
openClass: 'responsive-menu-open',
accordion: 'off',
activeArrow: ' - ',
inactiveArrow: ' + ',
wrapper: '#responsive-menu-wrapper',
closeOnBodyClick: 'off',
closeOnLinkClick: 'off',
itemTriggerSubMenu: 'off',
linkElement: '.responsive-menu-item-link',
openMenu: function() {
$(this.trigger).addClass(this.activeClass);
$('html').addClass(this.openClass);
$('.responsive-menu-button-icon-active').hide();
$('.responsive-menu-button-icon-inactive').show();
this.setButtonTextOpen();
this.setWrapperTranslate();
this.isOpen = true;
},
closeMenu: function() {
$(this.trigger).removeClass(this.activeClass);
$('html').removeClass(this.openClass);
$('.responsive-menu-button-icon-inactive').hide();
$('.responsive-menu-button-icon-active').show();
this.setButtonText();
this.clearWrapperTranslate();
this.isOpen = false;
},
setButtonText: function() {
if($('.responsive-menu-button-text-open').length > 0 && $('.responsive-menu-button-text').length > 0) {
$('.responsive-menu-button-text-open').hide();
$('.responsive-menu-button-text').show();
}
},
setButtonTextOpen: function() {
if($('.responsive-menu-button-text').length > 0 && $('.responsive-menu-button-text-open').length > 0) {
$('.responsive-menu-button-text').hide();
$('.responsive-menu-button-text-open').show();
}
},
triggerMenu: function() {
this.isOpen ? this.closeMenu() : this.openMenu();
},
triggerSubArrow: function(subarrow) {
var sub_menu = $(subarrow).parent().next('.responsive-menu-submenu');
var self = this;
if(this.accordion == 'on') {
/* Get Top Most Parent and the siblings */
var top_siblings = sub_menu.parents('.responsive-menu-item-has-children').last().siblings('.responsive-menu-item-has-children');
var first_siblings = sub_menu.parents('.responsive-menu-item-has-children').first().siblings('.responsive-menu-item-has-children');
/* Close up just the top level parents to key the rest as it was */
top_siblings.children('.responsive-menu-submenu').slideUp(200, 'linear').removeClass('responsive-menu-submenu-open');
/* Set each parent arrow to inactive */
top_siblings.each(function() {
$(this).find('.responsive-menu-subarrow').first().html(self.inactiveArrow);
$(this).find('.responsive-menu-subarrow').first().removeClass('responsive-menu-subarrow-active');
});
/* Now Repeat for the current item siblings */
first_siblings.children('.responsive-menu-submenu').slideUp(200, 'linear').removeClass('responsive-menu-submenu-open');
first_siblings.each(function() {
$(this).find('.responsive-menu-subarrow').first().html(self.inactiveArrow);
$(this).find('.responsive-menu-subarrow').first().removeClass('responsive-menu-subarrow-active');
});
}
if(sub_menu.hasClass('responsive-menu-submenu-open')) {
sub_menu.slideUp(200, 'linear').removeClass('responsive-menu-submenu-open');
$(subarrow).html(this.inactiveArrow);
$(subarrow).removeClass('responsive-menu-subarrow-active');
} else {
sub_menu.slideDown(200, 'linear').addClass('responsive-menu-submenu-open');
$(subarrow).html(this.activeArrow);
$(subarrow).addClass('responsive-menu-subarrow-active');
}
},
menuHeight: function() {
return $(this.container).height();
},
menuWidth: function() {
return $(this.container).width();
},
wrapperHeight: function() {
return $(this.wrapper).height();
},
setWrapperTranslate: function() {
switch(this.animationSide) {
case 'left':
translate = 'translateX(' + this.menuWidth() + 'px)'; break;
case 'right':
translate = 'translateX(-' + this.menuWidth() + 'px)'; break;
case 'top':
translate = 'translateY(' + this.wrapperHeight() + 'px)'; break;
case 'bottom':
translate = 'translateY(-' + this.menuHeight() + 'px)'; break;
}
if(this.animationType == 'push') {
$(this.pageWrapper).css({'transform':translate});
$('html, body').css('overflow-x', 'hidden');
}
if(this.pushButton == 'on') {
$('#responsive-menu-button').css({'transform':translate});
}
},
clearWrapperTranslate: function() {
var self = this;
if(this.animationType == 'push') {
$(this.pageWrapper).css({'transform':''});
setTimeout(function() {
$('html, body').css('overflow-x', '');
}, self.animationSpeed);
}
if(this.pushButton == 'on') {
$('#responsive-menu-button').css({'transform':''});
}
},
init: function() {
var self = this;
$(this.trigger).on(this.triggerTypes, function(e){
e.stopPropagation();
self.triggerMenu();
});
$(this.trigger).mouseup(function(){
$(self.trigger).blur();
});
$('.responsive-menu-subarrow').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
self.triggerSubArrow(this);
});
$(window).resize(function() {
if($(window).width() > self.breakpoint) {
if(self.isOpen){
self.closeMenu();
}
} else {
if($('.responsive-menu-open').length>0){
self.setWrapperTranslate();
}
}
});
if(this.closeOnLinkClick == 'on') {
$(this.linkElement).on('click', function(e) {
e.preventDefault();
/* Fix for when close menu on parent clicks is on */
if(self.itemTriggerSubMenu == 'on' && $(this).is('.responsive-menu-item-has-children > ' + self.linkElement)) {
return;
}
old_href = $(this).attr('href');
old_target = typeof $(this).attr('target') == 'undefined' ? '_self' : $(this).attr('target');
if(self.isOpen) {
if($(e.target).closest('.responsive-menu-subarrow').length) {
return;
}
self.closeMenu();
setTimeout(function() {
window.open(old_href, old_target);
}, self.animationSpeed);
}
});
}
if(this.closeOnBodyClick == 'on') {
$(document).on('click', 'body', function(e) {
if(self.isOpen) {
if($(e.target).closest('#responsive-menu-container').length || $(e.target).closest('#responsive-menu-button').length) {
return;
}
}
self.closeMenu();
});
}
if(this.itemTriggerSubMenu == 'on') {
$('.responsive-menu-item-has-children > ' + this.linkElement).on('click', function(e) {
e.preventDefault();
self.triggerSubArrow($(this).children('.responsive-menu-subarrow').first());
});
}
}
};
ResponsiveMenu.init();
});</script>

If You have any question and problem in this code feel free, leave comment below! IF YOU LIKE PLEASE SHARE WITH YOUR FRIENDS