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

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:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

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

Feedback 141

Comments are closed.
  1. Hi all,
    I love this this effect. I applied it on my new simple site at http://eddie11.com
    For those who were wondering on how to get the close button in the menu (especially for mobile), here’s what I did and it worked. I’m sure it’s not the best way but quick and dirty then it worked.

    I added the button to the menu with a different ID. Explanation here and check the html on that page to see how it’s done. (duplicated the showRightPush function and changed instances of id to the new one then and added a disable other function replacing everything with new id except adding a line to toggle the rightmenu again.

  2. Hi everyone,
    here is how I could close the menu clicking on the body on Chrome.
    Note that this only works for a “single menu” scenario.

    // define the body.onclick handler function bodyClickHandler(evt) { // exit if a button was clicked if (isButton(evt.toElement)) return; // get the active button var activeButton = document.querySelector('button.active'); // if the active button exists, trigger activeButton.onclick if (activeButton != null) activeButton.onclick(); } // assign the body.onclick handler document.querySelector('body').onclick = bodyClickHandler; // helper: check if elem is a button function isButton(elem) { return (elem.toString() == '[object HTMLButtonElement]'); }

    Hope that helps!
    Andrea

  3. Hi!

    I would like to close de menu just clicking on the body of the document or on the same object, in this case, the menu.
    How can i implement this interaction?
    Thanks a lot.

  4. Hi!

    I have troubles here, please help.
    Andrea, doesn’t works on IEs?
    Just return this alert on it.
    “Can not get value of property ‘toString’: object is null or undefined”.

    Thanks a lot!

  5. I am using this as a mobile menu. Does anyone know how to force close on orientation change?

  6. i want to create a button inderneath tha top menu like this one :

    <a href=”http://htmgarcia.com/themes/bismuth/#home”

    how can i do it.please help me .

    thank ou

  7. Hi!

    I’m using the showLeft-function. Works great on computers but not on phones. How can you make touchable-friendly?

    Regards
    Eric

    • Hi Eric
      I’m having a problem with the showLeft on phones. I have it set for .onmouseover and .onclick. Works great on computer and iPAD, but on phone it opens on touch and then will not close. Sounds like maybe you had a similar issue? Any help you could offer would be greatly appreciated. Here’s the script I’m using:

      var menuLeft = document.getElementById( ‘cbp-spmenu-s1’ ),
      showLeft = document.getElementById( ‘showLeft’ ),
      body = document.body;

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

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

      function disableOther( button ) {
      if( button !== ‘showLeft’ ) {
      classie.toggle( showLeft, ‘disabled’ );
      }
      }

  8. Hello,

    Great work on constructing this menu. I just have one issue, is the validation, I am getting an showRight is null, can you instruct me on how to fix this?

    tested via firefox

    • Solved . i just added the same code to intiate it to the on click listener ! Love You Mary Lou !

    • @poiison (or anyone who knows how), any chance you could provide your code to create a close button? Can it be added within the menu itself as well?

    • <script> var menuRight = document.getElementById( 'cbp-spmenu-s2' ), showRightPush = document.getElementById( 'showRightPush' ), closeRightPush = document.getElementById( 'closeRightPush' ), body = document.body; 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 !== 'showRightPush' ) { classie.toggle( showRightPush, 'disabled' ); } } closeRightPush.onclick = function() { classie.toggle( this, 'active' ); classie.toggle( body, 'cbp-spmenu-push-toleft' ); classie.toggle( menuRight, 'cbp-spmenu-open' ); disableOther( 'closeRightPush' ); }; function disableOther( button ) { if( button !== 'closeRightPush' ) { classie.toggle( closeRightPush, 'disabled' ); } } </script>

  9. This is so slick and stylish. I’m loving it.
    However I’m having problems with the animation in IE9 – basically it doesn’t scroll out – just appears. It’s fine on Fieryfox and Chrome. Anyone else this issue? I’ve played with some IE settings but without any luck.

  10. Hi there,

    when I am trying to separate script only for bottom menu, all stop working … Could be someone able to help me with this ..? Thank you,
    R

  11. Great tutorial, but do you know about this bug:
    You have a position fix header like this:
    header{ position: fixed; height: 114px; width: 100%; top: 0; z-index: 900; }
    When click push left menu or push right menu, the page is pushed but not the header. I don’t know this bug, it’s only happen on chrome, firefox work just fine. Do you have any idea how to solve this? Thanks in advance

  12. Hey hey hey,

    Thanks so much for this great menu.
    In about half an hour, i was able to implement it in WordPress.
    Looks great, using in a responsive grid framework. Everything is perfect.

    Thanks again Mary Lou, wish could give you all the fresh peppercorns in the world LOL.

    • would love to know how you went about using this in wordpress. Haven’t got my head around it yet

  13. Hi, I really need a help on disabling horizontal scrollbar while the menu push out, can anyone helped?

  14. Hey I’m having some issues where the nav doesn’t appear in safari but will in other browsers. Any solutions or did I miss something in the code?

    • I’m having the same issue that the nav doesn’t appear in Safari. Did anyone find a solution to this?

    • Seems the problem with the navigation not showing in Safari had to to with a css tag on the body element.

      .cbp-spmenu-push { overflow-x: visible; /*change from hidden*/ position: relative; left: 0; }

  15. Hi,
    I wanted a class to be clicked to use many buttons to trigger all menu.
    I converted everything with jQuery.

    $( “.showLeft” ).click(function() {
    $(this).toggleClass(“active”);
    $(“#cbp-spmenu-s1”).toggleClass(“cbp-spmenu-open”);

    });

    $( “.showRight” ).click(function() {
    $(this).toggleClass(“active”);
    $(“#cbp-spmenu-s2”).toggleClass(“cbp-spmenu-open”);

    });

    $( “.showTop” ).click(function() {
    $(this).toggleClass(“active”);
    $(“#cbp-spmenu-s3”).toggleClass(“cbp-spmenu-open”);

    });

    $( “.showBottom” ).click(function() {
    $(this).toggleClass(“active”);
    $(“#cbp-spmenu-s4”).toggleClass(“cbp-spmenu-open”);

    });

    $( “.showLeftPush” ).click(function() {
    $(this).toggleClass(“active”);
    $(“body”).toggleClass(“cbp-spmenu-push-toright”);
    $(“#cbp-spmenu-s1”).toggleClass(“cbp-spmenu-open”);

    });

    $( “.showRightPush” ).click(function() {
    $(this).toggleClass(“active”);
    $(“body”).toggleClass(“cbp-spmenu-push-toleft”);
    $(“#cbp-spmenu-s2”).toggleClass(“cbp-spmenu-open”);

    });

    • I also added this to all hided menu to make the move more fluid on Phone and Tablet

      -webkit-transform-style: preserve-3d;
      -webkit-backface-visibility: hidden;

  16. Hy!
    This is a very great plugin and I use it.

    Can I automate it?
    When the page loaded, after 3 sec the script run automatically.
    Can you help me?
    Thank you.

  17. I have two menus on my responsive site. A horizontal menu when the browser width is greater than 1024px and the Slide and Push (Right) Menu when the browser window is less than 1024px. If the browser window is less than 1024px and I click the toggle button the menu works fine, but with the menu open, when I expand my browser window greater than 1024px the Slide and Push Menu is still open and my horizontal menu is also showing now. My questions is how can I set a break point in my javascript file that will close the menu when it gets to 1024px.

    Thanks

    Breon

    • I have the exact same question. It’s kinda silly in a way, because it’s make for multi plateform, and a user on mobile phone can’t see the problem…. but because we know it’s a problem ^^’

      PS : Sorry for my English….

  18. Im new at this, but for some reason, I delete the unnecessary menus divs and the whole thing stops working. Any help would be greatly appreciated.

  19. Absolutely love this but in regards to this part of the script ‘ Class “cbp-spmenu-open” gets applied to menu and “cbp-spmenu-push-toleft” or “cbp-spmenu-push-toright” to the body ‘ I’m not sure what it means or which parts of the script I’m supposed to change. It’s probably blindingly obvious and staring me in the face but for the live of me I can’t figure it out!

    Any help would be greatly appreciated! Thanks in advance.

  20. Hi. Is it possible to have sub menu items? Like …

    Item
    Sub item 1
    Sub item 2

    Item2
    Sub item 1
    Sub item 2

    And to make the menu float right?

    Thanks

    • Subitems are possible. Just include another ul-element inside your li-element (the parent li).

  21. Amazing tutorial. Really i am looking for this type of menu. i found it here. thanks.. But this menu works in Responsive web layout ?

  22. Is anyone else having problems with too much content in the menu? I have a lot of menu points and they don’t fit in the screen. Unfortunately, scrolling in the menu itself doesn’t seem to work??
    Any help?

  23. I’ve added overflow:auto to the .cbp-spmenu class to make scrolling in the menu available.

  24. Also added the following to the .cbp-spmenu a class to make the background “fade” in

    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -ms-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;

  25. I cannot thank you enough. I’ve been learning CSS for a while, but your examples and demo’s take it totally to a different level.
    All the demo’s are just awesome.
    Thank you and more thank you 🙂

  26. Did anyone figure out how to default it to open then the user could click a button to hide it

    • Just apply the active states on page load and bind a event on a element to remove them again on click.

  27. I’m a total newbie, and I’m wondering why your git version doesn’t have the javascript included as a file? Not the classie.js or the modernizer.js, but the key js you need such as

    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;

    etc. thanks.

  28. Hello,

    Thanks for the codes. I have one problem, when the links in the menu are a lot the menu do not scroll down – same as Facebook – is there any solution for this?

    Thanks in advance,
    Mansour

  29. Dear friends,
    It’s awsome tutorial.
    I have a question. Can I use anchor tag instead of button?

    • Yes, you can definitely use anchor tags instead of button. For this purpose, you have to style that in CSS using padding and give anchor tag an ID for Javascript purpose.

  30. Hi freins,
    I’m à I’m à beginner
    How to integrate this Slide Menu into AngularJS project ?

    thanks in advance

  31. Would it be possible to add a link in the menu to close the menu once opened? Not relying on the button?

  32. Hi, this is a really interesting component ! i just don’t get how to use it i installed it with bower but impossible to make it work.
    I injected the component in my app angular.module('app', ['ngMaterial', 'slidePushMenu']); and copied the html code
    <button ng-slide-menu="menu">Slide menu</button> <button ng-push-menu="menu">Push menu</button> <ng-slide-push-menu id="menu" position="right"> <h3>Menu</h3> <a href="#">Item 1</a> <a href="#">Item 2</a> <a href="#">Item 3</a> <a href="#">Item 4</a> <a href="#">Item 5</a> <a href="#">Item 6</a> </ng-slide-push-menu>

    Nothing is working 🙁 someone could help ? thanks in advance !

  33. Can someone please help me on the push menu? Or at least, please do tell how to darken the body when menu is opened and the menu is closed when clicked anywhere other than the menu. Thanks in advance

  34. Hi,
    The demos are great.. I tweaked some to add sub-menus to the left slide push menu (using the Horizontal-drop down menu demo).
    However, when items are too many,and the screen resolution is low (my users include many aged users who keep res low to view things bigger.. and yes due to some restrictions, we have to use IE8), parts of the menu get hidden.. and they wont scroll down.

    Any body got any ideas please???

    Thanks ….

  35. Thank you very much for the great tool!

    I am just wondering whether it is possible to change the structure of the menu such as changing the number of columns.

  36. Hi,

    I have tried to use your code in a sharepoint website. I have used only the slidePush to left. other codes i have removed from js and css

    But after integrating all the files, the push effect is not working. it is working like overlay menu.

    could you able to identify the issue and help me?

  37. Five years later and I’m still finding this useful. Thank you so much for the amazing work you’ve put up over the years!