Ali Jafarian

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.


  • Great jQuery Tutorial

  • d1j1t

    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!

  • How would I make a push menu from this?

    • Richard, you’ll have to clarify that question… not sure what you mean?

      • 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.

        • James

          what was it?

  • Some solid code! Thanks for sharing.

  • Bani Sinha

    helped me a lot in my project.. thanks for sharing :)

  • mammam

    Graciaaaaaaazzzzz!!

    • mmmmmmm

      Ta muy bueno!

  • wolstudios

    How do you add a sub-menu to some of the main menu selections like “Tour Pricing”?

  • Jeroen van der Heijden

    Is there a way to close the menu after you clicked an item?

  • Mimeto

    Thanks so much! Saved me quite a bit of time :)

  • plex0r

    is it possible to make this slide out on the right?

  • Ted

    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

  • nway nway oo

    Very nice

  • Raj

    There is also a good tutorial on slide in and slide out menu http://talkerscode.com/webtricks/slide-in-and-slide-out-navigation-menu-using-jquery-css.php

  • akshay

    Greate tutorial very useful i found another tutorial to create slide out navigation menu using jquery and css http://talkerscode.com/webtricks/slide-in-and-slide-out-navigation-menu-using-jquery-css.php

  • Laura Harley

    Incredibly simple and easy slide out menu! Thanks for posting.

  • Jiswidrik

    how do you write this in coffeescript?

  • Tasha

    Any recommendations on scrolling the slideout menu?

    • 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!

      • Tasha

        Wow I didn’t expect a reply so soon! Thank you very much!! :-)

  • Tamilmovieskaari Vanan

    how to move the side bar to the right hand side