Found this fine site dzyngiri.com and a great tutorial from this site for creating responsive menu. Enjoy !

In this tutorial we will be creating a beautiful responsive menu. Trunk.js has been developed by a very talented UI designer and developer Rob Luke and all the credits go to him.

Adding Scripts

First of all we need to link trunk.js file to our html file

<!-- Scripts -->
<script type="text/javascript">
if (typeof jQuery == 'undefined')
document.write(unescape("%3Cscript src='js/jquery-1.9.js'" + "type='text/javascript'%3E%3C/script%3E"))
</script>
<script type="text/javascript" language="javascript" src="js/trunk.js"></script>

The Markup

<header>     <!--    Add "slideRight" class to items that move right when viewing Nav Drawer  -->
<ul id="navToggle">    <!--    Add "slideRight" class to items that move right when viewing Nav Drawer  -->
<li></li><li></li><li></li>
</ul>
<h1><a href="#">Responsive Menu</a></h1>
</header>
 
<nav>
<ul>
<li><a href="#"><i></i> Home</a></li>
<li><a href="#"><i></i> About Us</a></li>
<li><a href="#"><i></i> Services</a></li>
<li><a href="#"><i></i> Contact Us</a></li>
<li><a href="#"><i></i> Back to Article</a></li>
</ul>
</nav>

The CSS

The styling for header navigation will be the way you want or say as per your requirement. We will be activating our responsive menu at 780px width of screen. So, the styling for the drawer menu will be

@media only screen and (max-width: 780px) {
 
header {
height: 60px;
z-index: 2;
background-color: #f04949;
 
position: fixed;
top: 0;
right: 0;
left: 0;
 
/* starting point */
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
header h1 a {
color: #ffffff;
text-align: center;
padding-left: 70px;
display: block;
}
.burger {display: block;}
 
/*  Nav Drawer Layout  */
nav {position: relative;}
 
nav ul {
height: 100%;
overflow-y: auto;
}
nav li {
display: block;
float: none;
}
nav li a {
padding: 21px 25px;
letter-spacing: 3px;
font-size: 14px;
}
nav li a.logo {
display: none;
}
nav li a.active {
color: #fff;
background-color: #141e23;
}
nav li a:hover {
color: #fff;
background-color: #19252c;
}
nav li:first-child a.active,
nav li:first-child a:hover
{border-radius: 10px 0 0 0;}
 
.header-section {margin-top: 60px;}

Once this is done, it’s time to add some CSS3 animation effect to the opening and closing responsive menu.

/* NAVIGATION ANNIMATION */
nav {
width: 93%;
height: 100%;
position: fixed;
left: 0;
top: 0;
margin: 0;
background-color: #1d2d35;
border-radius: 8px;
 
/* starting point */
opacity: .3;
-webkit-transform: translate3d(5%,0,0)scale(.97);
-moz-transform: translate3d(5%,0,0)scale(.97);
transform: translate3d(5%,0,0)scale(.97);
}
 
/*Nav Expanding Open Effect*/
nav.open {
opacity: 1;
 
-webkit-transform: translate3d(0,0,0)scale(1);
-webkit-animation: slideIn .35s ease-in-out;
 
-moz-transform: translate3d(0,0,0)scale(1);
-moz-animation: slideIn .35s ease-in-out;
 
transform: translate3d(0,0,0)scale(1);
animation: slideIn .35s ease-in-out;
}
@-webkit-keyframes slideIn {
0%       {opacity: .3;
-webkit-transform: translate3d(5%,0,0)scale(.97);}
100%  {opacity: 1;
-webkit-transform: translate3d(0,0,0)scale(1);}
}
@-moz-keyframes slideIn {
0%      {opacity: .3;
-moz-transform: translate3d(5%,0,0)scale(.97);}
100%  {opacity: 1;
-moz-transform: translate3d(0,0,0)scale(1);}
}
@keyframes slideIn {
0%      {opacity: .3;
transform: translate3d(5%,0,0)scale(.97);}
100%  {opacity: 1;
transform: translate3d(0,0,0)scale(1);}
}
 
/*Nav Shrinking Closed Effect*/
nav.close {
opacity: .3;
 
-webkit-transform: translate3d(5%,0,0)scale(.97);
-webkit-animation: slideOut .3s ease-in-out;
 
-moz-transform: translate3d(5%,0,0)scale(.97);
-moz-animation: slideOut .3s ease-in-out;
 
transform: translate3d(5%,0,0)scale(.97);
animation: slideOut .3s ease-in-out;
}
@-webkit-keyframes slideOut {
0%      {opacity: 1;
-webkit-transform: translate3d(0,0,0)scale(1);}
100%  {opacity: .3;
-webkit-transform: translate3d(5%,0,0)scale(.97);}
}
@-moz-keyframes slideOut {
0%      {opacity: 1;
-moz-transform: translate3d(0,0,0)scale(1);}
100%  {opacity: .3;
-moz-transform: translate3d(5%,0,0)scale(.97);}
}
@keyframes slideOut {
0%      {opacity: 1;
transform: translate3d(0,0,0)scale(1);}
100%  {opacity: .3;
transform: translate3d(5%,0,0)scale(.97);}
}
 
/* CONTENT ANNIMATION */
.content {
/* starting point */
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
z-index: 1;
}
 
/*Content Sliding Open Effect*/
header.open,
.content.open
{
-webkit-transform: translate3d(240px,0,0);
-webkit-animation: open .5s ease-in-out;
 
-moz-transform: translate3d(240px,0,0);
-moz-animation: open .5s ease-in-out;
 
transform: translate3d(240px,0,0);
animation: open .5s ease-in-out;
}
@-webkit-keyframes open {
0%      {-webkit-transform: translate3d(0,0,0);}
70%    {-webkit-transform: translate3d(260px,0,0);}
100%  {-webkit-transform: translate3d(240px,0,0);}
}
@-moz-keyframes open {
0%      {-moz-transform: translate3d(0,0,0);}
70%    {-moz-transform: translate3d(260px,0,0);}
100%  {-moz-transform: translate3d(240px,0,0);}
}
@keyframes open {
0%      {transform: translate3d(0,0,0);}
70%    {transform: translate3d(260px,0,0);}
100%  {transform: translate3d(240px,0,0);}
}
 
/*Content Sliding Closed Effect*/
header.close,
.content.close
{
-webkit-transform: translate3d(0,0,0);
-webkit-animation: close .3s ease-in-out;
 
-moz-transform: translate3d(0,0,0);
-moz-animation: close .3s ease-in-out;
 
transform: translate3d(0,0,0);
animation: close .3s ease-in-out;
}
@-webkit-keyframes close {
0%      {-webkit-transform: translate3d(240px,0,0);}
100%  {-webkit-transform: translate3d(0,0,0);}
}
@-moz-keyframes close {
0%       {-moz-transform: translate3d(240px,0,0);}
100%  {-moz-transform: translate3d(0,0,0);}
}
@keyframes close {
0%       {transform: translate3d(240px,0,0);}
100%  {transform: translate3d(0,0,0);}
}
 
}

And we are done with our responsive menu using trunk.js

To download the Trunk.js package, please visit the official website of plugin.

For DEMO and DOWNLOAD please visit http://www.dzyngiri.com/responsive-menu-using-trunk-js/…