Today we’re going to build a smooth horizontal slideout menu using jQuery, CSS, and HTML. This type of menu is great for mobile/tablet navigation menus, filtering options, GUI features, and plenty of other “slide” related interactions.

HTML

The first step is our markup. We’ll need to create a div for our slideout menu and give it a class of slideout-menu. Within that div we’ll add an h3 for the menu title and an un-ordered list for the menu links. We’ll also add a close link inside the h3 title.

<div class="slideout-menu">
	<h3>Menu <a href="#" class="slideout-menu-toggle">×</a></h3>
	<ul>
		<li><a href="#">Home <i class="fa fa-angle-right"></i></a></li>
		<li><a href="#">Tour Information <i class="fa fa-angle-right"></i></a></li>
		<li><a href="#">Tour Pricing <i class="fa fa-angle-right"></i></a></li>
		<li><a href="#">Photo Gallery <i class="fa fa-angle-right"></i></a></li>
		<li><a href="#">News & Events <i class="fa fa-angle-right"></i></a></li>
	</ul>
</div>
<!--/.slideout-menu-->

CSS

The styling for the slideout menu is a little tricky – first, we’ll assign the menu a width of 250px, which is ideal for mobile device navigations (you’re more than welcome to change this width if you want a wider/narrower menu). Then, we’ll set the position to fixed and make the left value to that same negative width (-250px in this case) so that it’s hidden from page view. Finally, we’ll set the height value to 100% so the menu fills the height of the page.

.slideout-menu {
	position: fixed;
	top: 0;
	left: -250px;
	width: 250px;
	height: 100%;
	background: #333;
	z-index: 100;
}
.slideout-menu h3 {
	position: relative;
	padding: 12px 10px;
	color: #fff;
	font-size: 1.2em;
	font-weight: 400;
	border-bottom: 4px solid #222;
}
.slideout-menu .slideout-menu-toggle {
	position: absolute;
	top: 12px;
	right: 10px;
	display: inline-block;
	padding: 6px 9px 5px;
	font-family: Arial, sans-serif;
	font-weight: bold;
	line-height: 1;
	background: #222;
	color: #999;
	text-decoration: none;
	vertical-align: top;
}
.slideout-menu .slideout-menu-toggle:hover {
	color: #fff;
}
.slideout-menu ul {
	list-style: none;
	font-weight: 300;
	border-top: 1px solid #151515;
	border-bottom: 1px solid #454545;
}
.slideout-menu ul li {
	border-top: 1px solid #454545;
	border-bottom: 1px solid #151515;
}
.slideout-menu ul li a {
	position: relative;
	display: block;
	padding: 10px;
	color: #999;
	text-decoration: none;
}
.slideout-menu ul li a:hover {
	background: #000;
	color: #fff;
}
.slideout-menu ul li a i {
	position: absolute;
	top: 15px;
	right: 10px;
	opacity: .5;
}

jQuery

Our jQuery will do 2 basic things:

  1. Add and Remove the “open” class from the menu
  2. Hide or Show the menu depending on whether or not it has the “open” class

We’ll use the class of menu-toggle on any links to trigger the menu. In this example, I have three trigger links – one in the header, one in the page content, and one in the menu (the close x).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('.slideout-menu-toggle').on('click', function(event){
    	event.preventDefault();
    	// create menu variables
    	var slideoutMenu = $('.slideout-menu');
    	var slideoutMenuWidth = $('.slideout-menu').width();
    	
    	// toggle open class
    	slideoutMenu.toggleClass("open");
    	
    	// slide menu
    	if (slideoutMenu.hasClass("open")) {
	    	slideoutMenu.animate({
		    	left: "0px"
	    	});	
    	} else {
	    	slideoutMenu.animate({
		    	left: -slideoutMenuWidth
	    	}, 250);	
    	}
    });
});
</script>

Conclusion:

And that’s it – a smooth sliding horizontal menu. I hope this comes in handy for your future projects, especially those related to mobile and tablet development.

Discussion

26 thoughts on “jQuery Horizontal Slideout Menu”
  1. I need to preface this by saying that I haven’t implemented this code (yet). I plan to do so soon however, but based on the article and the logic discussed in general, I can see it working, so here’s just a thanks in advance for posting!

      1. Hi Ali, well I mean like an off canvas menu, basically that would push the content aside instead of sliding above it. But I already figured out what I was after so its okay. Thanks for sharing.

  2. I found this to be very useful for devices which don’t have enough horizontal real estate for both a TOC and a main window. A great jumping-off point for me. In fact, I’m going to incorporate your idea of a transparent background (in another tutorial) to be able to scroll to the link target in the contents frame as you hover over a TOC link (in addition to a jump and close the TOC for a click event).. Even better still, I’m thinking of having the contents in a movable iFrame that slides right when the TOC slides out

    1. Hey Tasha,

      The easiest method would be to add “overflow: auto;” to .slideout-menu in the CSS. That should allow the div to scroll when it’s content exceeds the height.

      Hope that helps!

Leave a Comment

Your email address will not be published. Required fields are marked *


Ali Jafarian

Tutorial Category UI Design
Comments 26 comments

Did you find value here?

If yes, please jump on my email list for more free stuff. I'll keep bringing the heat.

Get on the List