Responsive Menu Using Trunk-js

Responsive Menu Using Trunk-js

Responsive design become a need of each and every website available on internet. It’s not because we want it but because it becomes a need of developer to make his design compatible with all the screens of different devices. In this article we have created a really simple and efficient responsive menu using Trunk jQuery plugin. As we all know that navigation is an integral part of any website to enhance the user experience. And because of responsive design trend, your navigation also needs to be responsive.

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.

So let’s start creating the responsive menu

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>

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

You can have a look at the demo and download the demo files from here. To download the Trunk.js package, please visit the official website of plugin.

Tags css3, design, javascript, jQuery, plugin, Responsive, snippets, tutorials