Slide and Push Menus

Fixed menus that will slide out from the sides of the page and in case of the right and left side optionally move the body.

Slide Push Menus

From our sponsor: Try Mailchimp today.

A set of fixed menus that will slide out from any of the edges of the page. The two menus that slide out from the left and right side can also be used in combination with the body moving to the left or right side, respectively, hence being “pushed”.

There are examples of how to trigger the opening and closing of the menus and some example media queries.

The HTML

<!-- body has the class "cbp-spmenu-push" -->
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
	<h3>Menu</h3>
	<a href="#">Celery seakale</a>
	<a href="#">Dulse daikon</a>
	<a href="#">Zucchini garlic</a>
	<a href="#">Catsear azuki bean</a>
	<a href="#">Dandelion bunya</a>
	<a href="#">Rutabaga</a>
</nav>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
	<h3>Menu</h3>
	<a href="#">Celery seakale</a>
	<a href="#">Dulse daikon</a>
	<a href="#">Zucchini garlic</a>
	<a href="#">Catsear azuki bean</a>
	<a href="#">Dandelion bunya</a>
	<a href="#">Rutabaga</a>
</nav>
<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3">
	<h3>Menu</h3>
	<a href="#">Celery seakale</a>
	<a href="#">Dulse daikon</a>
	<a href="#">Zucchini garlic</a>
	<a href="#">Catsear azuki bean</a>
	<a href="#">Dandelion bunya</a>
	<a href="#">Rutabaga</a>
	<a href="#">Celery seakale</a>
	<a href="#">Dulse daikon</a>
	<a href="#">Zucchini garlic</a>
	<a href="#">Catsear azuki bean</a>
	<a href="#">Dandelion bunya</a>
	<a href="#">Rutabaga</a>
</nav>
<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4">
	<h3>Menu</h3>
	<a href="#">Celery seakale</a>
	<a href="#">Dulse daikon</a>
	<a href="#">Zucchini garlic</a>
	<a href="#">Catsear azuki bean</a>
	<a href="#">Dandelion bunya</a>
	<a href="#">Rutabaga</a>
	<a href="#">Celery seakale</a>
	<a href="#">Dulse daikon</a>
	<a href="#">Zucchini garlic</a>
	<a href="#">Catsear azuki bean</a>
	<a href="#">Dandelion bunya</a>
	<a href="#">Rutabaga</a>
</nav>
<div class="container">
	<div class="main">
		<section>
			<h2>Slide Menus</h2>
			<!-- Class "cbp-spmenu-open" gets applied to menu -->
			<button id="showLeft">Show/Hide Left Slide Menu</button>
			<button id="showRight">Show/Hide Right Slide Menu</button>
			<button id="showTop">Show/Hide Top Slide Menu</button>
			<button id="showBottom">Show/Hide Bottom Slide Menu</button>
		</section>
		<section class="buttonset">
			<h2>Push Menus</h2>
			<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
			<button id="showLeftPush">Show/Hide Left Push Menu</button>
			<button id="showRightPush">Show/Hide Right Push Menu</button>
		</section>
	</div>
</div>

The CSS

/* General styles for all menus */

.cbp-spmenu {
	background: #47a3da;
	position: fixed;
}

.cbp-spmenu h3 {
	color: #afdefa;
	font-size: 1.9em;
	padding: 20px;
	margin: 0;
	font-weight: 300;
	background: #0d77b6;
}

.cbp-spmenu a {
	display: block;
	color: #fff;
	font-size: 1.1em;
	font-weight: 300;
}

.cbp-spmenu a:hover {
	background: #258ecd;
}

.cbp-spmenu a:active {
	background: #afdefa;
	color: #47a3da;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
	width: 240px;
	height: 100%;
	top: 0;
	z-index: 1000;
}

.cbp-spmenu-vertical a {
	border-bottom: 1px solid #258ecd;
	padding: 1em;
}

.cbp-spmenu-horizontal {
	width: 100%;
	height: 150px;
	left: 0;
	z-index: 1000;
	overflow: hidden;
}

.cbp-spmenu-horizontal h3 {
	height: 100%;
	width: 20%;
	float: left;
}

.cbp-spmenu-horizontal a {
	float: left;
	width: 20%;
	padding: 0.8em;
	border-left: 1px solid #258ecd;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
	left: -240px;
}

.cbp-spmenu-right {
	right: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
	left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
	right: 0px;
}

/* Horizontal menu that slides from the top or bottom */

.cbp-spmenu-top {
	top: -150px;
}

.cbp-spmenu-bottom {
	bottom: -150px;
}

.cbp-spmenu-top.cbp-spmenu-open {
	top: 0px;
}

.cbp-spmenu-bottom.cbp-spmenu-open {
	bottom: 0px;
}

/* Push classes applied to the body */

.cbp-spmenu-push {
	overflow-x: hidden;
	position: relative;
	left: 0;
}

.cbp-spmenu-push-toright {
	left: 240px;
}

.cbp-spmenu-push-toleft {
	left: -240px;
}

/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-width: 55.1875em){

	.cbp-spmenu-horizontal {
		font-size: 75%;
		height: 110px;
	}

	.cbp-spmenu-top {
		top: -110px;
	}

	.cbp-spmenu-bottom {
		bottom: -110px;
	}

}

@media screen and (max-height: 26.375em){

	.cbp-spmenu-vertical {
		font-size: 90%;
		width: 190px;
	}

	.cbp-spmenu-left,
	.cbp-spmenu-push-toleft {
		left: -190px;
	}

	.cbp-spmenu-right {
		right: -190px;
	}

	.cbp-spmenu-push-toright {
		left: 190px;
	}
}

Note: Classie is being used here – class helper functions by @desandro.

The JavaScript

var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
		menuRight = document.getElementById( 'cbp-spmenu-s2' ),
		menuTop = document.getElementById( 'cbp-spmenu-s3' ),
		menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
		showLeft = document.getElementById( 'showLeft' ),
		showRight = document.getElementById( 'showRight' ),
		showTop = document.getElementById( 'showTop' ),
		showBottom = document.getElementById( 'showBottom' ),
		showLeftPush = document.getElementById( 'showLeftPush' ),
		showRightPush = document.getElementById( 'showRightPush' ),
		body = document.body;

showLeft.onclick = function() {
	classie.toggle( this, 'active' );
	classie.toggle( menuLeft, 'cbp-spmenu-open' );
	disableOther( 'showLeft' );
};
showRight.onclick = function() {
	classie.toggle( this, 'active' );
	classie.toggle( menuRight, 'cbp-spmenu-open' );
	disableOther( 'showRight' );
};
showTop.onclick = function() {
	classie.toggle( this, 'active' );
	classie.toggle( menuTop, 'cbp-spmenu-open' );
	disableOther( 'showTop' );
};
showBottom.onclick = function() {
	classie.toggle( this, 'active' );
	classie.toggle( menuBottom, 'cbp-spmenu-open' );
	disableOther( 'showBottom' );
};
showLeftPush.onclick = function() {
	classie.toggle( this, 'active' );
	classie.toggle( body, 'cbp-spmenu-push-toright' );
	classie.toggle( menuLeft, 'cbp-spmenu-open' );
	disableOther( 'showLeftPush' );
};
showRightPush.onclick = function() {
	classie.toggle( this, 'active' );
	classie.toggle( body, 'cbp-spmenu-push-toleft' );
	classie.toggle( menuRight, 'cbp-spmenu-open' );
	disableOther( 'showRightPush' );
};

function disableOther( button ) {
	if( button !== 'showLeft' ) {
		classie.toggle( showLeft, 'disabled' );
	}
	if( button !== 'showRight' ) {
		classie.toggle( showRight, 'disabled' );
	}
	if( button !== 'showTop' ) {
		classie.toggle( showTop, 'disabled' );
	}
	if( button !== 'showBottom' ) {
		classie.toggle( showBottom, 'disabled' );
	}
	if( button !== 'showLeftPush' ) {
		classie.toggle( showLeftPush, 'disabled' );
	}
	if( button !== 'showRightPush' ) {
		classie.toggle( showRightPush, 'disabled' );
	}
}

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 141

Comments are closed.
  1. I am not sure if I am right, but isn’t translating smoother than using left or right properties?

  2. And I am glad you guys covered this. I used the “Show/Hide left push menu” in my previous blog design. πŸ˜€

    Great tutorial btw!

  3. Thousan of thousand thx… you guys help million web dev. with amazing tutorial and plugins, hope all the best for codrops team… Thank You Very Much!

  4. I wish there was a way to have a close button in the open menu so I didn’t have to click the button in the body to close the slide menu.

  5. You are awesome! This amazing post – I was just about to make such thing today and you saved me a lot of coding. Big thank you!

  6. Nicely done.

    I’m thinking to create jQuery version of this menu. Of course with credit link to your article/website. What do you think?

  7. It would be better for performance on mobile browsers if you use 3d transform (translate) instead of left/right/top/bottom and it would be good to let the user click/tap outside the menu to close. I did a CSS only version recently: valdelama.com/css-responsive-navigation using 3d transform

    • Hi Dan,

      I saw the javascript version and i liked it so much and want to try it out. U are using the-href=”css/jPushMenu.css” where is the files for that

  8. Hi, how can I close for exemple menuLeft by clicking outside menuLeft div on the screen?? Thx!

    • Thanks for making this plugin! Great work. Perhaps it would be a good idea to use the css version with a fallback to your jQuery if not supported. Would you be interested in combining these into one plugin?

    • I like your jQuery version a lot! Is there a way to have the menu slide in when the page loads? I’m using left-menu, slide not push. Thanks!

    • This is perfect, great work!
      One question: Is it possible to make it “touch swipable” ?

      Thanks!

    • I saw the javascript version and i liked it so much and want to try it out. U are using the-href=”css/jPushMenu.css” where is the files for that

  9. It’s decent… I’d use a better transition… like a cubic bezier.

    -webkit-transition:all 0.2s cubic-bezier(.16,.68,.43,.99);

  10. You could make this all in CSS… This site has plenty of examples of utilizing CSS3 pseudo selectors for simulated click events. Think of this as presentation layer and that’s what CSS should be responsible for. You can use a radio button for an on or off state or a checkbox…

  11. Love the functionality and it sure opens a lot of possibilities for design and builds. Great work! First time (well, second technically) visitor. Excellent resource and looking forward to more great reads!

  12. Love the theme, would be great if it was converted to a WordPress Theme.
    I’ve been trying, but can’t quite get there.

  13. Can somebody tell me how to detect if the right/left menu is open or not? Or how to make two separated functions for close and open menus with two different buttons?
    thx!

  14. Incredible and it works in IE7 even if a little less smooth. Is it possible to have the menus open when working on larger screens and having them dissapear only on smaller screens?

  15. This is so good, all of your examples are the best I’ve seen, and easy to navigate, well played.

  16. Would anyone know how to make this bounce on page load. I am using it for my nav and if the browser isn’t mobile it is always open, but if it is mobile it is hidden and you have to swipe right to open the nav, the only problem is the user doesn’t know this. So I wanted to make it so that when the page loads the bar basically does a quick bounce animation, similar to how the linkedin app on ios works.

  17. Hi,
    I am using the push left menu but it will not let me scroll with the browser or mobile. Any idea how to solve this?

    Thanks,
    Nep

    • Try adding this to the element:

      -webkit-overflow-scrolling: touch; /* this makes the div (or nav) element scrollable for iOS5+ */
      overflow-y: scroll;

      This will only work properly for iOS5 and higher (maybe some android browsers aswell, haven’t tested it). It should also work in all desktop browsers with a scrollbar inside the menu.

      By the way, awesome implementation of this menu style. I was using another method before but I much prefer this one. Great work!

  18. Hi!
    Great work as usual!
    One question?

    How can hide the “show” button after click?

    thank you very much

  19. within a single ‘form’ reloading the page as I can do to prevent this from happening?

  20. This works great, I was just wondering, how can I make the menu close if the user clicks anywhere outside it?

  21. Does anyone know how to hide the menu after an anchor has been selected?

  22. Hi,
    I use this “script” but I “customed” it :
    – I prefer “transform: translate(240px, 0);” to “left:240px”, it’s much much better interpreted by iPhone
    – I used http://cubiq.org/iscroll-4 to scroll in the menu

    To Kurt
    to hide the menu you need to use the “disableOther” function, and code πŸ˜‰

  23. Good one, this is exactly what I need!
    Are there any ways to hide the borders when we focus on the input box at mobile?
    The border of the menu div will shows once the screen is zoomed in.

    Thanks.

  24. Hi. I’ve got this working on WordPress, and it looks great. One problem though, I can only open the menu from the home page when re-sized to mobile layout. If I try to open the menu from any other page like ‘about’ it doesn’t open.

    Any help please? Thanks in advanced.

  25. Hi,
    wow, what a css! πŸ™‚
    may you help me how can i change the width of the hidden menu?
    i tried to change 240px and 190 px for something like 30% but it didnt worked as expected! :/
    (i want to display the JsSip widget, at least as a test, and it is not fully hidded :/ )

    thanks and congrats for this really nice code!

  26. Hi,

    I get this error from chrome:
    Uncaught TypeError: Cannot set property ‘onclick’ of null —– slide-menu.js:13

    Can somebody help with that?

    • Try load the function first with this code before your script:

      window.onload = function() {

      // Code goes here //

      };

  27. Love the tutorial, really awesome! One question, how to create a sub-menu in this?

  28. I was wondering why the menu is fixed on mobile? I mean, if you have more than 5-8 links, one can’t see the the links passed the mobile display. Just sayin.

  29. Hi,

    I’ve trying for quite some time now, but just can’t seem to figure it out. I hope someone can help me, I’d really appreaciate it.

    I would really like to know how I can have a menu (I’m using the showLeft) slide back again after clicking on one of the anchors/links.

    Thanks!

    • Figured it out. Added this to the script (I’m using the Left Slide Menu):

      menuLeft.onclick = function () {
      classie.toggle( this, ‘active’ );
      classie.toggle( menuLeft, ‘cbp-spmenu-open’ );
      };

      Have yet to figure out how to hide the menu when clicking the rest of the sceen. Adding a body.onclick will work, like this:

      body.onclick = function () {
      classie.toggle( this, ‘active’ );
      classie.toggle( menuLeft, ‘cbp-spmenu-open’ );
      };

      but it will also opens the menu. And I only want to be able to close the menu when clicking the body…

  30. Hi all,
    instead of disable buttons, is possible to close other menus when i click a button?
    For example, if i already clicked top menu and now click right, i would to hide top menu,
    i tried hide() but don’t works good:

    showRight.onclick = function() { $(".cbp-spmenu-top").hide(); classie.toggle( this, 'active' ); classie.toggle( menuRight, 'cbp-spmenu-open' ); disableOther( 'showRight' ); }; showTop.onclick = function() { $( ".cbp-spmenu-right").hide(); classie.toggle( this, 'active' ); classie.toggle( menuTop, 'cbp-spmenu-open' ); disableOther( 'showTop' ); };

    Some suggestions please?
    Tnx πŸ™‚

  31. Good day,

    On your β€œslide and push menus” I was wondering is there a way to scroll within the vertical slide menu just like in the Facebook mobile menu?
    Also is there a way once inside the slider DIV I can stop the main class DIV from being moved and affected whilst in the slide DIV?
    Any assistance would be greatly appreciated.

    Kind regards,

    Byron

    • I rebuilt the menu in jQuery and in order to have your content body not scroll when menu is open, you just do body.classToggle(‘className’); with your class name being a style with overflow: hidden. Hope that helps.

  32. Is it possible to place a close button near the menu title? Once the menu slides open you have to toggle the menu closed using the same button, I would like to the menu to slide closed using a button inside the navigation for ease of use.

  33. @Byron –
    If you add the property “overflow-y: scroll” to the open class of the menu nav element, you should have vertical scrolling.

    My issue that I am running into is eliminating the x-axis scrolling for the main content once the menu is open for push menus. Any tricks I’m missing?

  34. Very cool! I’m already implementing on my website. The problem is, I cannot align the menu. It’s alway at the center. Any tips on how I can do that? I’ve searched on the .css but no lucky.

  35. It’s close to perfect, just a few things πŸ˜‰

    1. Auto close menu when scrolling page/body

    2. Disable horizontal body scroll when menu is open

    3. Close menu when click in body doesn’t seem to work?

    Please help me out..?

    Cheers!

    • Have you figured out how to close the nav once open if you click on the body?? Is so, please let me know!

  36. Mary, this is so awesome. Thanks for all your wonderful code sharing!
    I tried jquery mobile and didn’t like it cause it was too hard to overwrite the css.. their styles/themes are so ugly.. This is much prettier..flat style.. πŸ™‚
    Looks like the mobile issue is fixed? I see some comments below but it is working on my mobile.. (android and ios)

    thanks again