Menu icon Foundation
Need an off-canvas multi-level menu?

Need an off-canvas multi-level menu?
I created one using the SlickNav jQuery plugin. You can download SlickNav here:
http://slicknav.com/

The HTML:

<!DOCTYPE html>
<!--[if IE 8]>     			 
	<html class="no-js lt-ie9" lang="en" > 
<![endif]-->
<!--[if gt IE 8]><!--> 
	<html class="no-js" lang="en" > 
<!--<![endif]-->
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
    <title></title>
	<link rel="stylesheet" type="text/css" href="styles/normalize.css" />
    <link rel="stylesheet" type="text/css" href="styles/foundation.css" />
    <link rel="stylesheet" type="text/css" href="styles/nav.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/modernizr.js"></script>
</head>
<body>

<div class="off-canvas-wrap">
	<div class="inner-wrap">
	<!----------------------------- Large and Medium Screens -------------------->
		<div class="contain-to-grid hide-for-small">
			<div class="top-bar departments" data-topbar>
				<ul class="title-area">
					<li class="name"><!-- Leave this empty --></li>
				</ul>
				<div class="top-bar-section">
					<!---- This is the multi-level dropdown ----->
					<ul id="menu">
						<li class="divider"></li>
						<li class="has-dropdown not-click">
							<a href="#">Apparel</a>
							<ul class="dropdown">
								<li class="has-dropdown not-click">
									<a href="#">Men's</a>
									<ul class="dropdown">
										<li>
											<a href="#">Shirts</a>
										</li>
										<li>
											<a href="#">Britches</a>
										</li>
										<li>
											<a href="#">Drawers</a>
										</li>
									</ul>
								</li>
								<li class="has-dropdown not-click">
									<a href="#">Women's</a>
									<ul class="dropdown">
										<li>
											<a href="#">Shirts</a>
										</li>
										<li>
											<a href="#">Britches</a>
										</li>
										<li>
											<a href="#">Drawers</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="divider"></li>
					</ul>
				</div>
				<!---- End the multi-level dropdown ----->
			</div>
		</div>

	<!----------------------------- End Large and Medium Screens -------------------->


	<!----------------------------- Small Screens -------------------->
	
		<div class="tab-bar show-for-small">
			<div class="row collapse">
				<div class="small-12 columns">
					<a class="left-off-canvas-toggle menu-icon left">
						<span></span>
					</a>
				</div>
			</div>
		</div>
		<div class="left-off-canvas-menu">
			<ul class="off-canvas-list">
				<li class="level1">
				
					<!------ SlickNav Duplicated menu is inserted here, via the JS file ---------->
				</li>
			</ul>
		</div>

	<!----------------------------- End Small Screens -------------------->

		<a class="exit-off-canvas" href="#"></a>
	</div>
</div>
</body>
<script type="text/javascript" src="js/foundation.js"></script>
<script type="text/javascript" src="js/foundation.offcanvas.js"></script>
<script type="text/javascript" src="js/foundation.topbar.js"></script>
<script type="text/javascript" src="js/jquery.slicknav.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(document).foundation();
		$('#menu').slicknav();
	});
</script>
</html>

            

         

The CSS:

/****** User Nav Styles *****/

.top-bar-section ul li.active > a:hover,
.top-bar-section ul li.active > a 
{
    background: #0054a4;
}

.small-4 .logo
{
    padding-top: .25em;
}

/****** End User Nav Styles *****/


/****** Department Nav Styles *****/

.contain-to-grid
{
	border-top: 1px solid #cccccc;
}

.contain-to-grid,
.contain-to-grid .departments,
.contain-to-grid .departments ul,
.contain-to-grid .departments li a:not(.button)
{
    background: #ffffff;
}

.contain-to-grid .departments li > a 
{
	color: #333333;
}

.contain-to-grid .departments li > a:hover,
.contain-to-grid .departments li:hover> a, 
.contain-to-grid .departments li.active > a 
{
	color: #0054a4;
}

.top-bar-section .has-dropdown > a:after 
{
    border-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

.contain-to-grid .departments li.divider, 
.contain-to-grid .departments > [role="separator"] 
{
    border-bottom: medium none;
    border-right: 1px solid #cccccc;
    border-top: medium none;
    clear: none;
    height: 45px;
    width: 0;
}

.dropdown
{
	border-top: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
}

.dropdown li
{
	border-bottom: 1px solid #cccccc;
}


/*.contain-to-grid .departments ul li.has-dropdown:hover > ul.dropdown
{
	-webkit-transition: 5s;
	-moz-transition: 5s;
	-o-transition: 5s;
	-ms-transition: 5s;
	transition: 5s;
}*/

/****** End Department Nav Styles *****/



/******* Off Canvas Menu ***************/

a.menu-icon 
{
  color: #333333;
}


a.menu-icon span 
{
   -webkit-box-shadow: 0 10px 0 1px #333333, 0 16px 0 1px #333333, 0 22px 0 1px #333333;
   box-shadow: 0 10px 0 1px #333333, 0 16px 0 1px #333333, 0 22px 0 1px #333333; 
}
  

a.menu-icon:hover span 
{
   -webkit-box-shadow: 0 10px 0 1px #0054a4, 0 16px 0 1px #0054a4, 0 22px 0 1px #0054a4;
   box-shadow: 0 10px 0 1px #0054a4, 0 16px 0 1px #0054a4, 0 22px 0 1px #0054a4; 
}

.left-off-canvas-menu hr
{
	 margin: 0;
}

.left-off-canvas-menu li.off-canvas-border-bottom
{
	border-bottom: 1px solid #262626;
}

.left-off-canvas-menu ul li > a
{
    background: #333333;
}

.left-off-canvas-menu ul li > a:hover
{
    background: #272727;
    color: #ffffff;
}

.left-off-canvas-menu ul li.active > a:hover,
.left-off-canvas-menu ul li.active > a 
{
    background: #0054a4;
    color: #ffffff;
}

ul.off-canvas-list li a 
{
    /*border-bottom: 1px solid #262626;*/
    border-bottom: none;
    color: rgba(255, 255, 255, 0.7);
    display: block;
    padding: 0.66667rem;
}

/*
    Mobile Menu Core Style
*/

.slicknav_btn 
{ 
	position: relative; 
	display: block; 
	vertical-align: middle; 
	float: right; 
	padding: 0.438em 0.625em 0.438em 0.625em; 
	line-height: 1.125em; 
	cursor: pointer; 
}

.slicknav_menu  .slicknav_menutxt 
{ 
	display: block; 
	line-height: 1.188em; 
	float: left; 
}

.slicknav_menu .slicknav_icon 
{ 
	float: left; 
	margin: 0.188em 0 0 0.438em; 
}

.slicknav_menu .slicknav_no-text 
{ 
	margin: 0 
}

.slicknav_menu .slicknav_icon-bar 
{ 
	display: block; 
	width: 1.125em; 
	height: 0.125em; 
	-webkit-border-radius: 1px; 
	-moz-border-radius: 1px; 
	border-radius: 1px; 
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); 
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); 
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); 
}

.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar 
{ 
	margin-top: 0.188em 
}

.slicknav_nav 
{ 
	clear: both 
}

.slicknav_nav ul,
.slicknav_nav li 
{ 
	display: block 
}

.slicknav_nav .slicknav_arrow 
{ 
	font-size: 0.8em; 
	margin: 0 0 0 0.4em; 
}

.slicknav_nav .slicknav_item 
{ 
	display: block; 
	cursor: pointer; 
}
.slicknav_nav a 
{ 
	display: block 
}

.slicknav_nav .slicknav_item a 
{
	display: inline 
}

.slicknav_menu:before,
.slicknav_menu:after 
{ 
	content: " "; 
	display: table; 
}

.slicknav_menu:after 
{ 
	clear: both 
}

/* IE6/7 support */
.slicknav_menu 
{ 
	*zoom: 1 
}

.slicknav_btn 
{
	width: 100%;
	background: none repeat scroll 0 0 #444444;
    border-top: 1px solid #5E5E5E;
    border-bottom: 1px solid #262626;
    color: #999999;
    font-weight: bold;
    margin: 0;
    padding: 0.3rem 0.9375rem;
    text-transform: uppercase;
    cursor: pointer;
    display: block;
    font-size: 0.875rem;
}

.slicknav_nav, 
.slicknav_nav ul 
{
	list-style: none;
	overflow:hidden;
	margin: 0;
}

.slicknav_nav li a.slicknav_item, 
.slicknav_nav ul li a.slicknav_item
.slicknav_nav ul li ul.off-canvas-list > li a
{ 
border-bottom: 1px solid #262626;
}

/******* End Off Canvas Menu ***************/
            

         

How it works:

The SlickNav.js file duplicates the original tob-bar navigation and prepends it to the initial li tag, using a css class selector. In this case the .level1 class is used. You will need to define this selector in the SlickNav.js file. After that, edit your css file to get the look and feel you desire. You may want to allow the Fondations CSS file to override the SlickNav styles, by removing the unwanted/unused css from the SlickNav.css file.

You can view a demo here:

http://ericguest.com/development/test/

***** Don't forget your Foundation topbar.js and offcanvas.js files.

Hope this helps

offcanvastopbarmulti-leveldropdown

Need an off-canvas multi-level menu?
I created one using the SlickNav jQuery plugin. You can download SlickNav here:
http://slicknav.com/

The HTML:

<!DOCTYPE html>
<!--[if IE 8]>     			 
	<html class="no-js lt-ie9" lang="en" > 
<![endif]-->
<!--[if gt IE 8]><!--> 
	<html class="no-js" lang="en" > 
<!--<![endif]-->
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
    <title></title>
	<link rel="stylesheet" type="text/css" href="styles/normalize.css" />
    <link rel="stylesheet" type="text/css" href="styles/foundation.css" />
    <link rel="stylesheet" type="text/css" href="styles/nav.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/modernizr.js"></script>
</head>
<body>

<div class="off-canvas-wrap">
	<div class="inner-wrap">
	<!----------------------------- Large and Medium Screens -------------------->
		<div class="contain-to-grid hide-for-small">
			<div class="top-bar departments" data-topbar>
				<ul class="title-area">
					<li class="name"><!-- Leave this empty --></li>
				</ul>
				<div class="top-bar-section">
					<!---- This is the multi-level dropdown ----->
					<ul id="menu">
						<li class="divider"></li>
						<li class="has-dropdown not-click">
							<a href="#">Apparel</a>
							<ul class="dropdown">
								<li class="has-dropdown not-click">
									<a href="#">Men's</a>
									<ul class="dropdown">
										<li>
											<a href="#">Shirts</a>
										</li>
										<li>
											<a href="#">Britches</a>
										</li>
										<li>
											<a href="#">Drawers</a>
										</li>
									</ul>
								</li>
								<li class="has-dropdown not-click">
									<a href="#">Women's</a>
									<ul class="dropdown">
										<li>
											<a href="#">Shirts</a>
										</li>
										<li>
											<a href="#">Britches</a>
										</li>
										<li>
											<a href="#">Drawers</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="divider"></li>
					</ul>
				</div>
				<!---- End the multi-level dropdown ----->
			</div>
		</div>

	<!----------------------------- End Large and Medium Screens -------------------->


	<!----------------------------- Small Screens -------------------->
	
		<div class="tab-bar show-for-small">
			<div class="row collapse">
				<div class="small-12 columns">
					<a class="left-off-canvas-toggle menu-icon left">
						<span></span>
					</a>
				</div>
			</div>
		</div>
		<div class="left-off-canvas-menu">
			<ul class="off-canvas-list">
				<li class="level1">
				
					<!------ SlickNav Duplicated menu is inserted here, via the JS file ---------->
				</li>
			</ul>
		</div>

	<!----------------------------- End Small Screens -------------------->

		<a class="exit-off-canvas" href="#"></a>
	</div>
</div>
</body>
<script type="text/javascript" src="js/foundation.js"></script>
<script type="text/javascript" src="js/foundation.offcanvas.js"></script>
<script type="text/javascript" src="js/foundation.topbar.js"></script>
<script type="text/javascript" src="js/jquery.slicknav.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(document).foundation();
		$('#menu').slicknav();
	});
</script>
</html>

            

         

The CSS:

/****** User Nav Styles *****/

.top-bar-section ul li.active > a:hover,
.top-bar-section ul li.active > a 
{
    background: #0054a4;
}

.small-4 .logo
{
    padding-top: .25em;
}

/****** End User Nav Styles *****/


/****** Department Nav Styles *****/

.contain-to-grid
{
	border-top: 1px solid #cccccc;
}

.contain-to-grid,
.contain-to-grid .departments,
.contain-to-grid .departments ul,
.contain-to-grid .departments li a:not(.button)
{
    background: #ffffff;
}

.contain-to-grid .departments li > a 
{
	color: #333333;
}

.contain-to-grid .departments li > a:hover,
.contain-to-grid .departments li:hover> a, 
.contain-to-grid .departments li.active > a 
{
	color: #0054a4;
}

.top-bar-section .has-dropdown > a:after 
{
    border-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

.contain-to-grid .departments li.divider, 
.contain-to-grid .departments > [role="separator"] 
{
    border-bottom: medium none;
    border-right: 1px solid #cccccc;
    border-top: medium none;
    clear: none;
    height: 45px;
    width: 0;
}

.dropdown
{
	border-top: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
}

.dropdown li
{
	border-bottom: 1px solid #cccccc;
}


/*.contain-to-grid .departments ul li.has-dropdown:hover > ul.dropdown
{
	-webkit-transition: 5s;
	-moz-transition: 5s;
	-o-transition: 5s;
	-ms-transition: 5s;
	transition: 5s;
}*/

/****** End Department Nav Styles *****/



/******* Off Canvas Menu ***************/

a.menu-icon 
{
  color: #333333;
}


a.menu-icon span 
{
   -webkit-box-shadow: 0 10px 0 1px #333333, 0 16px 0 1px #333333, 0 22px 0 1px #333333;
   box-shadow: 0 10px 0 1px #333333, 0 16px 0 1px #333333, 0 22px 0 1px #333333; 
}
  

a.menu-icon:hover span 
{
   -webkit-box-shadow: 0 10px 0 1px #0054a4, 0 16px 0 1px #0054a4, 0 22px 0 1px #0054a4;
   box-shadow: 0 10px 0 1px #0054a4, 0 16px 0 1px #0054a4, 0 22px 0 1px #0054a4; 
}

.left-off-canvas-menu hr
{
	 margin: 0;
}

.left-off-canvas-menu li.off-canvas-border-bottom
{
	border-bottom: 1px solid #262626;
}

.left-off-canvas-menu ul li > a
{
    background: #333333;
}

.left-off-canvas-menu ul li > a:hover
{
    background: #272727;
    color: #ffffff;
}

.left-off-canvas-menu ul li.active > a:hover,
.left-off-canvas-menu ul li.active > a 
{
    background: #0054a4;
    color: #ffffff;
}

ul.off-canvas-list li a 
{
    /*border-bottom: 1px solid #262626;*/
    border-bottom: none;
    color: rgba(255, 255, 255, 0.7);
    display: block;
    padding: 0.66667rem;
}

/*
    Mobile Menu Core Style
*/

.slicknav_btn 
{ 
	position: relative; 
	display: block; 
	vertical-align: middle; 
	float: right; 
	padding: 0.438em 0.625em 0.438em 0.625em; 
	line-height: 1.125em; 
	cursor: pointer; 
}

.slicknav_menu  .slicknav_menutxt 
{ 
	display: block; 
	line-height: 1.188em; 
	float: left; 
}

.slicknav_menu .slicknav_icon 
{ 
	float: left; 
	margin: 0.188em 0 0 0.438em; 
}

.slicknav_menu .slicknav_no-text 
{ 
	margin: 0 
}

.slicknav_menu .slicknav_icon-bar 
{ 
	display: block; 
	width: 1.125em; 
	height: 0.125em; 
	-webkit-border-radius: 1px; 
	-moz-border-radius: 1px; 
	border-radius: 1px; 
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); 
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); 
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); 
}

.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar 
{ 
	margin-top: 0.188em 
}

.slicknav_nav 
{ 
	clear: both 
}

.slicknav_nav ul,
.slicknav_nav li 
{ 
	display: block 
}

.slicknav_nav .slicknav_arrow 
{ 
	font-size: 0.8em; 
	margin: 0 0 0 0.4em; 
}

.slicknav_nav .slicknav_item 
{ 
	display: block; 
	cursor: pointer; 
}
.slicknav_nav a 
{ 
	display: block 
}

.slicknav_nav .slicknav_item a 
{
	display: inline 
}

.slicknav_menu:before,
.slicknav_menu:after 
{ 
	content: " "; 
	display: table; 
}

.slicknav_menu:after 
{ 
	clear: both 
}

/* IE6/7 support */
.slicknav_menu 
{ 
	*zoom: 1 
}

.slicknav_btn 
{
	width: 100%;
	background: none repeat scroll 0 0 #444444;
    border-top: 1px solid #5E5E5E;
    border-bottom: 1px solid #262626;
    color: #999999;
    font-weight: bold;
    margin: 0;
    padding: 0.3rem 0.9375rem;
    text-transform: uppercase;
    cursor: pointer;
    display: block;
    font-size: 0.875rem;
}

.slicknav_nav, 
.slicknav_nav ul 
{
	list-style: none;
	overflow:hidden;
	margin: 0;
}

.slicknav_nav li a.slicknav_item, 
.slicknav_nav ul li a.slicknav_item
.slicknav_nav ul li ul.off-canvas-list > li a
{ 
border-bottom: 1px solid #262626;
}

/******* End Off Canvas Menu ***************/
            

         

How it works:

The SlickNav.js file duplicates the original tob-bar navigation and prepends it to the initial li tag, using a css class selector. In this case the .level1 class is used. You will need to define this selector in the SlickNav.js file. After that, edit your css file to get the look and feel you desire. You may want to allow the Fondations CSS file to override the SlickNav styles, by removing the unwanted/unused css from the SlickNav.css file.

You can view a demo here:

http://ericguest.com/development/test/

***** Don't forget your Foundation topbar.js and offcanvas.js files.

Hope this helps

Rafi Benkual over 5 years ago

Eric,

This is really cool of you to share with everyone! Well done!

Teej Tem over 5 years ago

Nice job....
I noticed that the options for the menu disappear if you fiddle with the menu a bit.

Eric Guest over 5 years ago

Hi Teej,
Can you provide a screenshot or something. I am using this on a client site and would like to troubleshoot as much as possible.

Thanks!

Gareth Phillips over 5 years ago

Hi Eric,

I've looked into this and I'm wondering what controls the menu appearing in li.level1 ?

I've tried to replicate what you've done but the menu isn't going in to .level1 for me, it's just appearing at the top of the page!

Gareth

Gareth Phillips over 5 years ago

Actually ignore that last comment, I've figured it out! just adjusted the prepend setting in Jquery settings file.... However I now have another problem (probably the upgrade to 5.2.1) where the off canvas menu closes when you press one of the levels to open!

Any ideas on how to resolve?

Gareth Phillips over 5 years ago

Also, ignore the comment above... in 5.2.1 the following lines changed in the JQuery:

Old :
function(t){t.preventDefault(),e(this).closest(".off-canvas-wrap").toggleClass("move-right")}).on("click.fndtn.offcanvas",".exit-off-canvas",function(t){t.preventDefault(),e(".off-canvas-wrap").removeClass("move-right")}).on("click.fndtn.offcanvas",".right-off-canvas-toggle"

New :

function(e){e.preventDefault(),n(this).closest(".off-canvas-wrap").toggleClass("move-right")}).on("click.fndtn.offcanvas",".exit-off-canvas",function(e){e.preventDefault(),n(".off-canvas-wrap").removeClass("move-right")}).on("click.fndtn.offcanvas",".left-off-canvas-menu a"

So i just nipped that bit out and hey presto it's fine again. Looks like the function was changed so that when you click anything the nav disappears rather than you having to close it manually - handy if it's not multi level but a bit short sighted on Zurb's part if they do bake the accordion in!

Eduardo Cataño about 5 years ago

Right now you can try the new Offcanvas Multilevel Menu:

http://foundation.zurb.com/docs/components/offcanvas.html#off-canvas-multilevel-menu

Don't forget the data-offcanvas property in "off-canvas-wrap" tag.