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: Prepare for advanced communication roles and earn your Northwestern master’s degree online.

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:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

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

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 141

Comments are closed.
  1. 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?

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

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

  4. 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!

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

    How can hide the “show” button after click?

    thank you very much

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

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

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

  9. 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 😉

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

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

  12. 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!

  13. 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 //

      };

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

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

  16. 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…

  17. 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 🙂