Horizontal Slide Out Menu

A horizontal slide out menu with a grid-like thumbnail layout for the submenu. With media query examples for smaller devices.
HorizontalSlideOutMenu

From our monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

A simple, horizontal slide out menu with a grid-like thumbnail layout for the submenu. The menu slides out from the top when a main menu item is clicked and the sub-items fade in. When clicking on another item, the height of the submenu will adjust and the content will fade in and out while switching.

Some media query examples show how to make the menu responsive and change the view to a touch-friendly vertically stacked navigation.

The HTML

<nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper">
	<div class="cbp-hsinner">
		<ul class="cbp-hsmenu">
			<li>
				<a href="#">Lovely Spirits</a>
				<ul class="cbp-hssubmenu">
					<li><a href="#"><img src="images/1.png" alt="img01"/><span>Delicate Wine</span></a></li>
					<li><a href="#"><img src="images/2.png" alt="img02"/><span>Fine Spirit</span></a></li>
					<li><a href="#"><img src="images/3.png" alt="img03"/><span>Heavenly Ale</span></a></li>
					<li><a href="#"><img src="images/4.png" alt="img04"/><span>Juicy Lemonade</span></a></li>
					<li><a href="#"><img src="images/5.png" alt="img05"/><span>Wise Whiskey</span></a></li>
					<li><a href="#"><img src="images/6.png" alt="img06"/><span>Sweet Rum</span></a></li>
				</ul>
			</li>
			<li>
				<a href="#">Delicious Beverages</a>
				<ul class="cbp-hssubmenu cbp-hssub-rows">
					<li><a href="#"><img src="images/7.png" alt="img07"/><span>Lovely Slurp</span></a></li>
					<li><a href="#"><img src="images/8.png" alt="img08"/><span>Lemony Grappa</span></a></li>
					<li><a href="#"><img src="images/9.png" alt="img09"/><span>Eggy Liquor</span></a></li>
					<li><a href="#"><img src="images/10.png" alt="img10"/><span>Fresh Juice</span></a></li>
					<li><a href="#"><img src="images/1.png" alt="img01"/><span>Delicate Wine</span></a></li>
					<li><a href="#"><img src="images/2.png" alt="img02"/><span>Fine Spirit</span></a></li>
					<li><a href="#"><img src="images/3.png" alt="img03"/><span>Heavenly Ale</span></a></li>
					<li><a href="#"><img src="images/4.png" alt="img04"/><span>Juicy Lemonade</span></a></li>
					<li><a href="#"><img src="images/5.png" alt="img05"/><span>Wise Whiskey</span></a></li>
					<li><a href="#"><img src="images/6.png" alt="img06"/><span>Sweet Rum</span></a></li>
					<li><a href="#"><img src="images/1.png" alt="img01"/><span>Delicate Wine</span></a></li>
					<li><a href="#"><img src="images/2.png" alt="img02"/><span>Fine Spirit</span></a></li>
				</ul>
			</li>
			<li>
				<a href="#">Fine Liquors</a>
				<ul class="cbp-hssubmenu">
					<li><a href="#"><img src="images/10.png" alt="img10"/><span>Fresh Juice</span></a></li>
					<li><a href="#"><img src="images/6.png" alt="img06"/><span>Sweet Rum</span></a></li>
					<li><a href="#"><img src="images/9.png" alt="img09"/><span>Eggy Liquor</span></a></li>
				</ul>
			</li>
			<li><a href="#">Our Mission</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
</nav>

The CSS

@font-face {
	font-family: 'bpmenu';
	src:url('../fonts/bpmenu/bpmenu.eot');
	src:url('../fonts/bpmenu/bpmenu.eot?#iefix') format('embedded-opentype'),
		url('../fonts/bpmenu/bpmenu.woff') format('woff'),
		url('../fonts/bpmenu/bpmenu.ttf') format('truetype'),
		url('../fonts/bpmenu/bpmenu.svg#bpmenu') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Main menu wrapper */
.cbp-hsmenu-wrapper {
	position: relative;
}

/* Common style for all lists */
.cbp-hsmenu-wrapper ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
}

/* 100% width bar for menu */
.cbp-hsinner {
	background: #47a3da;
	position: relative;
	z-index: 100;
}

/* Main menu style */
.cbp-hsmenu-wrapper .cbp-hsmenu {
	width: 90%;
	max-width: 69em;
	margin: 0 auto;
	padding: 0 1.875em;
}

.cbp-hsmenu > li {
	margin-left: 4em;
	display: inline-block;
}

.cbp-hsmenu > li:first-child {
	margin-left: 0;
}

/* Main menu link style */
.cbp-hsmenu > li > a {
	color: #fff;
	font-size: 1.2em;
	line-height: 3em;
	display: inline-block;
	position: relative;
	z-index: 10000;
	outline: none;
}

.no-touch .cbp-hsmenu > li > a:hover,
.no-touch .cbp-hsmenu > li > a:focus,
.cbp-hsmenu > li.cbp-hsitem-open > a {
	color: #02639d;
}

/* Add an arrow to the main menu link if it has a submenu (not the only child) */
.cbp-hsmenu > li > a:not(:only-child):before {
	display: inline-block;
	font-family: 'bpmenu';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	content: "f107";
	font-size: 80%;
	margin-right: 0.3em;
	opacity: 0.4;
	vertical-align: middle;
}

.cbp-hsmenu > li.cbp-hsitem-open > a:not(:only-child):before {
	content: "f106";
}

/* Add a triangle to currently open menu item link */
.cbp-hsmenu > li.cbp-hsitem-open > a:after {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #47a3da;
	border-width: 10px;
	left: 50%;
	margin-left: -10px;
}

/* Submenu style */
.cbp-hssubmenu {
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	z-index: 0;
	text-align: center; /* for aligning the sub items */
	visibility: hidden;
}

.cbp-hssubmenu:before, 
.cbp-hssubmenu:after { 
	content: " "; 
	display: table; 
}
.cbp-hssubmenu:after { 
	clear: both; 
}

/* Let's allow 6 item in a row */
.cbp-hssubmenu > li {
	width: 16.2%;
	display: inline-block;
	vertical-align: top;
	box-shadow: -28px 0 0 -27px #ddd, 0 -28px 0 -27px #ddd;
	opacity: 0;
	-webkit-transition: opacity 0.1s 0s;
	-moz-transition: opacity 0.1s 0s;
	transition: opacity 0.1s 0s;
}

/* First 6 items don't have upper box shadow */
.cbp-hssubmenu > li:nth-child(-n+6) {
	box-shadow: -28px 0 0 -27px #ddd;
} 

/* Every 7th item does not have a left box shadow */
.cbp-hssubmenu > li:nth-child(6n+1) {
	box-shadow:  0 -28px 0 -27px #ddd;
}

/* The first one does not have any box shadow */
.cbp-hssubmenu > li:first-child {
	box-shadow: none;
}

.cbp-hssubmenu > li a {
	display: block;
	text-align: center;
	color: #a2a2a2;
	outline: none;
	padding: 2em 1em 1em 1em;
}

.no-touch .cbp-hssubmenu > li a:hover,
.no-touch .cbp-hssubmenu > li a:focus {
	color: #888;
}

.cbp-hssubmenu > li a img {
	border: none;
	outline: none;
	display: inline-block;
	margin: 0;
	max-width: 100%;
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

.no-touch .cbp-hssubmenu > li a:hover img {
	opacity: 0.5;
}

.cbp-hssubmenu > li a span {
	display: block;
	min-height: 3em;
	margin-top: 0.4em;
}

.cbp-hsmenu > li.cbp-hsitem-open .cbp-hssubmenu {
	z-index: 1000;
	visibility: visible;
}

.cbp-hsmenu > li.cbp-hsitem-open .cbp-hssubmenu > li {
	opacity: 1;
	-webkit-transition: opacity 0.5s 0.1s;
	-moz-transition: opacity 0.5s 0.1s;
	transition: opacity 0.5s 0.1s;
}

/* Helper div for animating the background */
.cbp-hsmenubg {
	background: #f7f7f7;
	position: absolute;
	width: 100%;
	top: 100%;
	left: 0;
	z-index: 0;
	height: 0px;
}

.no-touch .cbp-hsmenubg {
	-webkit-transition: height 0.3s;
	-moz-transition: height 0.3s;
	transition: height 0.3s;
}

@media screen and (max-width: 65em){
	.cbp-hsmenu-wrapper {
		font-size: 80%;
	}
}

@media screen and (max-width: 51.4375em){
	.cbp-hsmenu-wrapper {
		font-size: 100%;
	}

	.cbp-hsmenu-wrapper .cbp-hsmenu {
		padding: 0;
		max-width: none;
		width: 100%;
	}

	.cbp-hsmenu > li {
		border-top: 1px solid rgba(255,255,255,0.5);
		text-align: center;
		margin: 0 auto;
		display: block;
	}

	.cbp-hsmenu > li:first-child {
		border-top: none;
	}

	.cbp-hsmenu > li > a {
		display: block;
	}

	.cbp-hsmenu > li > a:not(:only-child):before {
		line-height: 1.8;
		right: 0;
		position: absolute;
		font-size: 200%;
	}

	.cbp-hsmenubg {
		display: none;
	}

	.cbp-hssubmenu {
		background: #f7f7f7;
		position: relative;
		overflow: hidden;
		height: 0;
	}

	.cbp-hsmenu > li.cbp-hsitem-open .cbp-hssubmenu {
		height: auto;
	}

	/* Let's only allow 3 item in a row now */
	.cbp-hssubmenu > li {
		width: 30%;
	}

	/* Reset box shadows for the 6 items in row case */
	.cbp-hssubmenu > li:nth-child(-n+6),
	.cbp-hssubmenu > li:nth-child(6n+1) {
		box-shadow: -28px 0 0 -27px #ddd, 0 -28px 0 -27px #ddd;
	}

	/* First 4 items don't have upper box shadow */
	.cbp-hssubmenu > li:nth-child(-n+3) {
		box-shadow: -28px 0 0 -27px #ddd;
	} 

	/* Every 5th item does not have a left box shadow */
	.cbp-hssubmenu > li:nth-child(3n+1) {
		box-shadow:  0 -28px 0 -27px #ddd;
	}

}

@media screen and (max-width: 25em){
	/* Let's only allow 1 item in a row now */
	.cbp-hssubmenu > li {
		width: 100%;
		display: block;
	}

	.cbp-hsmenu-wrapper .cbp-hssubmenu > li {
		box-shadow: 0 1px #cecece;
		text-align: left;
	}

	.cbp-hssubmenu > li a {
		text-align: left;
		line-height: 50px;
		padding: 0.4em 1em;
	}

	.cbp-hssubmenu > li a img {
		float: left;
		max-height: 50px;
	}

	.cbp-hssubmenu > li a span {
		min-height: 0;
		margin: 0;
	}
}

The JavaScript

/**
 * cbpHorizontalSlideOutMenu.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
;( function( window ) {
	
	'use strict';

	var document = window.document;

	function extend( a, b ) {
		for( var key in b ) { 
			if( b.hasOwnProperty( key ) ) {
				a[key] = b[key];
			}
		}
		return a;
	}

	function cbpHorizontalSlideOutMenu( el, options ) {	
		this.el = el;
		this.options = extend( this.defaults, options );
		this._init();
	}

	cbpHorizontalSlideOutMenu.prototype = {
		defaults : {},
		_init : function() {
			this.current = -1;
			this.touch = Modernizr.touch;
			this.menu = this.el.querySelector( '.cbp-hsmenu' );
			this.menuItems = this.el.querySelectorAll( '.cbp-hsmenu > li' );
			this.menuBg = document.createElement( 'div' );
			this.menuBg.className = 'cbp-hsmenubg';
			this.el.appendChild( this.menuBg );
			this._initEvents();
		},
		_openMenu : function( el, ev ) {
			
			var self = this,
				item = el.parentNode,
				items = Array.prototype.slice.call( this.menuItems ),
				submenu = item.querySelector( '.cbp-hssubmenu' ),
				closeCurrent = function( current ) {
					var current = current || self.menuItems[ self.current ];
					current.className = '';
					current.setAttribute( 'data-open', '' );	
				},
				closePanel = function() {
					self.current = -1;
					self.menuBg.style.height = '0px';
				};

			if( submenu ) {

				ev.preventDefault();

				if( item.getAttribute( 'data-open' ) === 'open' ) {
					closeCurrent( item );
					closePanel();
				}
				else {
					item.setAttribute( 'data-open', 'open' );
					if( self.current !== -1 ) {
						closeCurrent();
					}
					self.current = items.indexOf( item );
					item.className = 'cbp-hsitem-open';
					self.menuBg.style.height = submenu.offsetHeight + 'px';
				}
			}
			else {
				if( self.current !== -1 ) {
					closeCurrent();
					closePanel();
				}
			}

		},
		_initEvents : function() {
			
			var self = this;

			Array.prototype.slice.call( this.menuItems ).forEach( function( el, i ) {
				var trigger = el.querySelector( 'a' );
				if( self.touch ) {
					trigger.addEventListener( 'touchstart', function( ev ) { self._openMenu( this, ev ); } );
				}
				else {
					trigger.addEventListener( 'click', function( ev ) { self._openMenu( this, ev ); } );	
				}
			} );
			
			window.addEventListener( 'resize', function( ev ) { self._resizeHandler(); } );

		},
		// taken from https://github.com/desandro/vanilla-masonry/blob/master/masonry.js by David DeSandro
		// original debounce by John Hann
    	// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
		_resizeHandler : function() {
			var self = this;
			function delayed() {
				self._resize();
				self._resizeTimeout = null;
			}

			if ( this._resizeTimeout ) {
				clearTimeout( this._resizeTimeout );
			}

			this._resizeTimeout = setTimeout( delayed, 50 );
		},
		_resize : function() {
			if( this.current !== -1 ) {
				this.menuBg.style.height = this.menuItems[ this.current ].querySelector( '.cbp-hssubmenu' ).offsetHeight + 'px';
			}
		}
	}

	// add to global namespace
	window.cbpHorizontalSlideOutMenu = cbpHorizontalSlideOutMenu;

} )( window );

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.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

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 66

Comments are closed.
  1. Figured it out, on top of adding “height: auto;” to my divs,

    I had to remove “position absolute” from the component.css file:
    /* Helper div for animating the background */
    .cbp-hsmenubg {
    background: #f7f7f7;
    position: absolute; <——Remove
    wid

    • Hey Kim K,
      Did you ever figure out how to implement a submenu in the unordered list like in the Shake Shack website?
      Any help would be appreciated
      Cheers

      Dan S

  2. Using the non-min js, IE8 error:

    JS Object expected
    Line 90
    Char 4


    Array.prototype.slice.call( this.menuItems ).forEach( function( el, i ) {

  3. Still i am getting error for ie8

    Array.prototype.slice: ‘this’ is not a JavaScript object

    what you guys are doing still?

  4. Yea, just tested this menu on a couple of browsers and it doesn’t work on android devices. Is there a fix? I’d love to use it. Basically the menu will open and it will show empty space. If one scrolls down the menu is located further down the page; an obvious bug. In fact, the demo from your site doesn’t work either (so I can rule out something silly in my code). Can anyone assist?

    Thanks so much!

    /tia

    • I’d happily pay for a javascript wizard to improve this – it’s absolutely perfect for the site I’m working on but I need a bullet proof solution down to ie8.

    • Fix for android device:

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

      .cbp-hssubmenu {
      background: rgba(0, 0, 0, 0.7);
      /*position: relative;*/
      overflow: hidden;
      height: 0;
      }

  5. HI,

    This is just what I’m looking for but I need the first sub-menu to open when you first land on the site. Does anyone know how to make that happen?

    Any help much appreciated.

    • Are you using Jquery? You could try adding an id to the anchor that drops the menu and then use an onload event with something like:

      $(‘#anchor-id’).click();

  6. Hello everyone,

    is it possible to display two HORIZONTAL SLIDE OUT menus one under another ?

    How to do this to properly display the submenu menu?

    Please help me in solving this problem.

    Best regards,
    idejka

  7. Has anyone yet figured out how to have one submenu already open when the pages loads? Any help would be greatly appreciated. Thanks

  8. This is probably a stupid question but is there any way to enable the menu to push the content down below it rather than overlay? I’ve tried messing around in the inspector but it seems it needs the absolute positioning to push the menu wider than the LI element that it is contained within which makes sense. Just trying to see if there is a way.

  9. first of all thanks to share this great script.
    Any chance to close the submenu when the user click on it?
    thank you in advance
    Mark

    • fixed , it was so simple 😉

      cbpHorizontalSlideOutMenu.js
      ————————————————-
      cbpHorizontalSlideOutMenu.prototype = {
      defaults : {},
      _init : function() {

      this.menuItems = this.el.querySelectorAll( ‘.cbp-hsmenu > li, .cbp-hssubmenu > li’ );

      },

      }

  10. Anyone figured out how to fix the IE8 js error yet? I really need to launch a site but it doesn’t work in IE 🙁

  11. After doing some digging there are a few things killing this plugin in IE8 but the main part is IE8 doesn’t support the use of Array.prototype.slice.call (used in _initEvents and _openMenu) also IE8 doesn’t support addEventListener but that is easy enough to patch with attachEvent(). Anyone got any ideas about getting Array.prototype.slice.call to work in IE8??

  12. Hi, If anyone knows how to make this pushdown content and rollover work instead of click, please contact me @ 45hannah@gmail.com. I am willing to pay. It’s for a project I’m working on.

  13. I upgraded to Firefox 26.0 and now the menu does not work. Works fine in Chrome 31.0.xxxx. Crazy