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 leanirng CSS now.

Feedback 140

Comments are closed.
  1. 1

    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

    • 2

      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.

  2. 8

    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.

  3. 9

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

  4. 11

    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.

  5. 12

    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!

    • 13

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

  6. 15

    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

  7. 17

    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.

  8. 18

    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

  9. 19

    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.

  10. 22

    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!

  11. 23

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

  12. 24

    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

  13. 25

    Hi!

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

    Regards
    Eric

    • 27

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

  14. 29

    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

Comments are closed.