pgblu/mobile_menu.js

## mobile_menu.js
//mobile nav trigger
$('#menu-trigger').click(function (e){
	e.preventDefault();
	$('body').toggleClass('active');
	$(this).toggleClass('active');
});

## mobile_menu.scss
@import "compass";
@import "breakpoint";

//breakpoints
$mob: max-width 500px;

body {
    @include breakpoint($mob) {
        position: relative;
        overflow: hidden;
        overflow-y: auto;
    }
}

// Mobile nav trigger
#menu-trigger {
    display: none;
    @include breakpoint($mob) {
        height: 29px;
        width: 30px;
        display: block;
        //change bg img per your liking
        background: url(../img/menu_button.png) 0 0 no-repeat;
        position: absolute;
        top: 19px;
        left: 7.425%;
        &:hover, &.active {
            //this changes the menu bg, so modify for a css button if necessary
            background-position: -30px 0;
        }
    }
}

//main nav
#main-nav {
    @include breakpoint($mob) {
        display: none;
    }
}

//mobile nav
#mobile-nav {
    display: none;
    float: left;
    position: absolute;
    left: 0;
    @include breakpoint($mob) {
        display: block;
        margin-left: -100%;
        @include transition(.2s all ease);
    }
    + main {
        @include breakpoint($mob) {
            @include transition(.2s all ease);
        }
    }
}

//trigger nav menu appearance
body.active {
    #mobile-nav { margin-left: 0; width:80%; }
    #mobile-nav + main {
        @include breakpoint($mob){
            margin-right: -100%; margin-left: 80%;
        }
    }
}

## page.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="MobileOptimized" content="width">
        <meta name="HandheldFriendly" content="true">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!-- favicon -->
        <!-- css -->
    </head>
    <body>
        <header id="main">
            <a href="" id="menu-trigger"></a>
            <nav id="main-nav"></nav><!-- desktop nav -->
        </header>
        <nav id="mobile-nav">
            <ul>
		        <li class="has-sub"><a href="#">Link 1</a>
		            <ul>
		                <li><a href="#">SubLink 1</a></li>
		                <li><a href="#">SubLink 2</a></li>
		            </ul>
		        </li>
		        <li class="has-sub"><a href="#">Link 2</a>
		            <ul>
		                <li><a href="#">SubLink 1</a></li>
		            </ul>
		        </li>
            </ul>
        </nav><!-- mobile nav -->
        <main>
            <!-- main page content -->
        </main>
    </body>
</html>
	//mobile nav trigger
	$('#menu-trigger').click(function (e){
	e.preventDefault();
	$('body').toggleClass('active');
	$(this).toggleClass('active');
	});
	@import "compass";
	@import "breakpoint";

	//breakpoints
	$mob: max-width 500px;

	body {
	@include breakpoint($mob) {
	position: relative;
	overflow: hidden;
	overflow-y: auto;
	}
	}

	// Mobile nav trigger
	#menu-trigger {
	display: none;
	@include breakpoint($mob) {
	height: 29px;
	width: 30px;
	display: block;
	//change bg img per your liking
	background: url(../img/menu_button.png) 0 0 no-repeat;
	position: absolute;
	top: 19px;
	left: 7.425%;
	&:hover, &.active {
	//this changes the menu bg, so modify for a css button if necessary
	background-position: -30px 0;
	}
	}
	}

	//main nav
	#main-nav {
	@include breakpoint($mob) {
	display: none;
	}
	}

	//mobile nav
	#mobile-nav {
	display: none;
	float: left;
	position: absolute;
	left: 0;
	@include breakpoint($mob) {
	display: block;
	margin-left: -100%;
	@include transition(.2s all ease);
	}
	+ main {
	@include breakpoint($mob) {
	@include transition(.2s all ease);
	}
	}
	}

	//trigger nav menu appearance
	body.active {
	#mobile-nav { margin-left: 0; width:80%; }
	#mobile-nav + main {
	@include breakpoint($mob){
	margin-right: -100%; margin-left: 80%;
	}
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="MobileOptimized" content="width">
	<meta name="HandheldFriendly" content="true">
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!-- favicon -->
	<!-- css -->
	</head>
	<body>
	<header id="main">
	<a href="" id="menu-trigger"></a>
	<nav id="main-nav"></nav><!-- desktop nav -->
	</header>
	<nav id="mobile-nav">
	<ul>
	<li class="has-sub"><a href="#">Link 1</a>
	<ul>
	<li><a href="#">SubLink 1</a></li>
	<li><a href="#">SubLink 2</a></li>
	</ul>
	</li>
	<li class="has-sub"><a href="#">Link 2</a>
	<ul>
	<li><a href="#">SubLink 1</a></li>
	</ul>
	</li>
	</ul>
	</nav><!-- mobile nav -->
	<main>
	<!-- main page content -->
	</main>
	</body>
	</html>