Narayan Vaidyanathan

Following Simple Responsive Menu created with html, css and basic jQuery. Instant of using plugin its very easy to use and configuration in quick time.

CSS

<style>
.res-mainmenu a{
		display:inline-block;
		float:left;
		padding: 5px;
    	border-top: 0px solid #eee;
		}
.res-menu{
		 display: none;
	}	
@media (max-width: 935px) {
	.res-mainmenu a{
		display:block;
		float:none;
		padding: 5px;
    	border-top: 1px solid #eee;
		}
	.res-menu{
		 display: block !important;
	}	
	.header  {
    width: 98%;
    text-align: center;
    padding:0 1%;
    border: 0;
	}
	.header  .mm-group{
	    display: none;
	}
	.header .active {
    	border-bottom: 0px solid #f45821;
    	color: #fff;
		background-color:#f45821;
	}
}
</style>

jQuery

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function () {
    // responsive menu
	var WinWidth = $(document).width();
	//alert(WinWidth);
	if(WinWidth < 935){
		$(".res-menu").show();
		$(".header").addClass("res-mainmenu");
	}
	$(".res-menu").click(function(){
		//alert("responsive open");	
		$(".header").find(".mm-group").slideToggle();
	});
});
</script>

HTML

<div class="header">
    <div class="mm-group">
        <a href="#home">Home</a>
        <a href="#overview">PRODUCT OVERVIEW</a>
        <a href="#features">Features</a>
        <a href="#benefits">Benefits</a>
        <a href="#resources">Resources</a>
        <a href="#enquiry">enquiry</a>
    </div>
    <div class="res-menu" style="display:none;">Menu</div>
 </div>