Narayan Vaidyanathan

  • Wanna feel my punch?

    Check out my creative and interesting projects.

    I specialize in creating usable designs for the web with a professional approach and convert them into HTML 4 & 5 / CSS with Open Source Themes

Simple Responsive Menu

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>
  • Copyright © 2012 All Right Reserved.
  • Like Narayan ?
    Connect with me