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

View demo Download source

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' );
	}
}

View demo Download source

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

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 140

Comments are closed.
    • 2

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

    • 3

      @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?

    • 4


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

  1. 5

    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.

  2. 7

    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

  3. 10

    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

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

    • 13

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

  5. 14

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

  6. 15

    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?

    • 16

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

    • 17

      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;
      }

  7. 18

    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”);

    });

    • 19

      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;

  8. 22

    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.

  9. 23

    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

    • 24

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

  10. 25

    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.

  11. 26

    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.

  12. 28

    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

    • 29

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

  13. 30

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

  14. 31

    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?

  15. 32

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

  16. 33

    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;

Comments are closed.