jQuery Side Menu (Slide from Right to Left)

Posted on February 15, 2015 by Dan Doicaru in jQuery/JavaScript Category

Few days ago I was searching on the internet for a jQuery side menu and I was not that impressed. There are dozen of plugins which requires a lot of time to install in your website and sometimes are not even working correctly.

You can achieve the sliding effect, that pulls content out (from right to left or reverse) very simple by using only CSS and a little jQuery to add a class to your <body> tag whenever the menu is triggered.

So, in this tutorial you will learn how to create a simple jQuery side menu that pulls out the content from right to left, or from left to right, by preferences. I will teach you how to and where to add the code in your website. This will work in your responsive website too, if you have it developed.

Video Tutorial (Full HD)

To make the jQuery side menu work, your website's structure must be created in the following 3 cases below. We will test all of them to see the results and common problems for our menu.

  • the first structure is when you have your website divided in 3 containers (header, body and footer container)
  • the second one is when all your content can be wrapped by a <div> and the side menu outside of it
  • the last one is when you don't have any structure at all and everything is wrapped by the <body> tag

Common Problem - Move Side Menu Container right under the <body> tag using jQuery

A short note: If you can't edit the HTML source or you don't have access to it, I recommend you to move the jQuery side menu container above the content or right below the <body> tag using jQuery, because the side menu containers always must be outside the containers you want to move. I wrote a tutorial about moving div inside another div here. Check it out if you have this problem or try the fast example below:

$('.sideMenu').prependTo('body');

jQuery Side Menu with 3 Containers

The first case of our jQuery side menu is when your website has 3 containers for each section. For example, header container will have a <div> with the class headerContainerWrapper and the same with the other containers for body and footer. To make this work and pull the content left or right, we will need to add relative position to these 3 containers (header, body and footer).

jQuery Side Menu with Three Containers

Our jQuery side menu will have fixed position, so the content can remain visible. We must also add a trigger link button (or image) that will open the side menu and push the content in the left or right, plus a close button inside the side menu container to close it.

The HTML

<div class="sideMenu">
	<p><a href="#" class="closeTrigger">x</a></p>
	<p>Here will be you content for side menu. Below is a menu list.</p>
	<ul>
		<li><a href="#" target="_blank">Menu Button</a></li>
		<li><a href="#" target="_blank">Menu Button 2</a></li>
		<li><a href="#" target="_blank">Menu Button 3</a></li>
	</ul>
</div>

<div class="headerContainerWrapper">
	<div class="headerContainer">
		<a href="#" target="_blank"><img src="some-image.jpg" alt="" /></a>
		<a href="#" class="sideTrigger"><img src="some-side-trigger.jpg" alt="" /></a>
	</div>
</div>

<div class="bodyContainerWrapper">
	<div class="bodyContainer">
		<h2>Sample Heading</h2>
		<p>This is just a sample content to fill the page. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	</div>
</div>

<div class="footerContainerWrapper">
	<div class="footerContainer">
		<p>This will be the footer with some text inside.</p>
	</div>
</div>

Always try placing the jQuery side menu <div> somewhere outside the 3 main containers to work fluid and without any problem. This jQuery side menu will have fixed position, so if you move it inside any of the 3 containers and you give them relative position, it will be displayed inside and not outside as we need.

The CSS

Now the CSS part will do the trick for us. To have a nice easing transition effect when the jQuery side menu pushes the content 300px (the same size as the side container's width), we will use transition property from CSS3 on all containers that needs to be moved (header, body, footer and side containers). You can read more about transitions and browsers compatibility here.

Supposing that containers inside wrappers are centered in the middle of the page, we will use that in our example. In jQuery script we will use a code to toggle a new class sideOpen on <body> tag whenever the trigger is clicked, so we can know when the jQuery side menu is active and not. Be aware that the CSS below is shortened, without colors, backgrounds, font size and others fancy things. You can download the sample files a little below.

html, body {
	overflow-x: hidden;
}
body {
	margin: 0;
	padding: 0;
	background: #eee;
	position: relative;
	height: 100%;
}
.headerContainer,
.bodyContainer,
.footerContainer {
	max-width: 960px;
	margin: 0 auto;
	background: #FFF;
}
.headerContainerWrapper,
.bodyContainerWrapper,
.footerContainerWrapper {
	position: relative;
	left: 0;
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
.sideOpen .headerContainerWrapper,
.sideOpen .bodyContainerWrapper,
.sideOpen .footerContainerWrapper {
	left: -300px;
}
.sideTrigger {
	float: right;
	padding: 30px;
}
.closeTrigger {
	font-weight: bold;
	text-decoration: none;
	color: #000;
	font-size: 30px;
	display: inline-block;
	margin-top: -15px;
	margin-bottom: 5px;
}
.sideMenu {
	position: fixed;
	z-index: 9999;
	right: -300px;
	height: 100%;
	width: 300px;
	background: #FFF;
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
.sideOpen .sideMenu {
	right: 0;
}

 

Update March 14th: If you are using my jQuery side menu on mobile devices, there will be a problem with the layout. When the side menu is trigger the viewport will just be re-sized instead of keeping the same size. So, to fix that you will need to add overflow-x: hidden on both <html> and <body> tags.

html, body {
	overflow-x: hidden;
}

I also updated the CSS code to fix the annoying lag from transition property in all browser. You can check the fix in the CSS above. I added transform: translateZ(0) property, so that transitions will not interfere with the 3D translation. You can read more about 3D animated transforms (rotation, scale, translations) here.

Update May 22nd: Using translateZ(0) with fixed headers, it will break the fixed position. Make sure to remove the transform property if your header or any other element inside it has fixed position.

The jQuery

Now we need to add 2 functions. One to toggle a class to <body> tag, as I said above, to our jQuery side menu and one to remove the class, so everything can return to normal. Add the code below, right above the ending of the body tag. Don't forget to include jQuery library in your <head> tag. You can get the links from their official download page.

<script type="text/javascript">
	// Side Menu Trigger Function
	$('a.sideTrigger').click(function() {
		$('body').toggleClass('sideOpen');
		return false;
	});

	// Close Menu Trigger Function
	$('a.closeTrigger').click(function() {
		$('body').removeClass('sideOpen');
		return false;
	});
</script>

Great, now we can see the jQuery side menu live. Keep in mind that if you are adding an image as background to <body> tag, the background will not be pushed to the left, simply because is not located inside the 3 containers. As a solution check the next method.

Live Demo

Download Files

jQuery Side Menu with One Container Wrapper

This is the case 2, when all your content is wrapper in one single <div> and the jQuery side menu container is above or below this single wrapper. This is the most effective solution if you have access to your html files, also you can use it in WordPress too. Just wrap everything you have inside the <body> tag (without scripts from footer) and you can you the background image on this wrapper, which will work without any problems and will pull the content and the background image too. Check out the code:

jQuery Side Menu with One Container

<div class="sideMenu">
	<p><a href="#" class="closeTrigger">x</a></p>
	<p>Here will be you content for side menu. Below is a menu list.</p>
	<ul>
		<li><a href="#" target="_blank">Menu Button</a></li>
		<li><a href="#" target="_blank">Menu Button 2</a></li>
		<li><a href="#" target="_blank">Menu Button 3</a></li>
	</ul>
</div>

<div class="siteWrapper">	
	<div class="headerContainer">
		<a href="#" target="_blank"><img src="some-image.jpg" alt="" /></a>
		<a href="#" class="sideTrigger"><img src="some-side-trigger.jpg" alt="" /></a>
	</div>

	<div class="bodyContainer">
		<h2>Sample Heading</h2>
		<p>This is just a sample content to fill the page. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	</div>

	<div class="footerContainer">
		<p>This will be the footer with some text inside.</p>
	</div>
</div>

Now because everything is wrapped in a single container you can add a background image if you need it. The jQuery side menu will push the containers along with the background. Also fixed background will stay in the same place and it will not be pushed, told you to know if you have difficulties. Check the CSS and the live demo below.

body {
	margin: 0;
	padding: 0;
	position: relative;
	height: 100%;
	overflow-x: hidden;
}
.headerContainer,
.bodyContainer,
.footerContainer {
	max-width: 960px;
	margin: 0 auto;
	background: #FFF;
}
.siteWrapper {
	background: #EEE url("bg.jpg") no-repeat left top;
	position: relative;
	left: 0;
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
.sideOpen .siteWrapper {
	left: -300px;
}
.sideTrigger {
	float: right;
	padding: 30px;
}
.closeTrigger {
	font-weight: bold;
	text-decoration: none;
	color: #000;
	font-size: 30px;
	display: inline-block;
	margin-top: -15px;
	margin-bottom: 5px;
}
.sideMenu {
	position: fixed;
	z-index: 9999;
	right: -300px;
	height: 100%;
	width: 300px;
	background: #FFF;
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
.sideOpen .sideMenu {
	right: 0;
}

Live Preview

Download Files

jQuery Side Menu without Container

This type of jQuery side menu must be used with caution. All we do is to push the <body> tag to the left without using/adding any helper containers. In my example everything works ok, but maybe in other websites with another structure this will cause problems. Anyway try it and let me know if you have trouble with it. Ah, and background image on <body> will also not work . I will just add the CSS, structure is all yours.

html {
	position: relative;
	height: 100%;
	overflow-x: hidden;
}
body {
	margin: 0;
	padding: 0;
	background: #EEE url("bg.jpg") repeat left top;
	position: relative;
	height: 100%;
	left: 0;
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
.headerContainer,
.bodyContainer,
.footerContainer {
	max-width: 960px;
	margin: 0 auto;
	background: #FFF;
}
.sideOpen {
	left: -300px;
}
.sideMenu {
	position: fixed;
	right: -300px;
	height: 100%;
	width: 300px;
	background: #FFF;
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
.sideOpen .sideMenu {
	right: -300px;
}

Here the overflow property on <body> can cause problems. Remove it and add it only on <html> tag and everything will be ok and don't forget about the jQuery side menu. It will move together with the <body>, so you will need to add the same value to the left or right.

Live Demo

Download Files

Conclusion

In the end, the most effective and used case of our jQuery side menu is the second one, by wrapping your content inside a <div>. You can manage containers easier and you can set a background image to the wrapper container to have a great effect. Anyway, if you don't have access to html source, move the side menu container right under the <body> tag with jQuery and use the technique with 3 containers.

I didn't used any complicated jQuery or JavaScript code, only the CSS is doing the job. The left property (or you can use right instead) must be added on the containers that you want to move. When you'll add a negative value to it, transition property will do the trick. Is just a simple method to add some cool animations on your website and it works on mobile too (not provided in the CSS above).

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4.50 out of 5)
Related Articles
Comments
  1. Gravatar Icon PaoloRocks:

    Forget the previous comment. I got it! Thanks anyway for the great tutorial! :)

  2. Gravatar Icon PaoloRocks:

    Hi good day!

    First of all thank you for this wonderful tutorial. I’m working on something similar, but a little different, the body content does not move, and the menu is just an overlay.

    The menu-wrapper div is positioned fixed with z-index 50000, and the flex-horizontal div inside is to make the menu button and menu-list side by side. I made the menu-container positioned relative and the menu-list positioned absolute so I can hide it on the right.

    I have achieved the goal, that is the only visible overlay on the body is the menu button on the right edge but my problem is: every time I click the menu button the menu-list appears at the bottom of the menu button, what I want is it should appear side by side, it works without the script. the values for the right of the menu-list is negative and turned to zero once click.

    How can I solve this? Need your help.

    Thanks!

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


+ 3 = 8

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.