Stylish & Responsive Slide Out Menu with CSS3 and Javascript

Stylish & Responsive Slide Out Menu with CSS3 and Javascript
File Size: 58 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A stylish & responsive navigation menu built with CSS3 and javascript that slides out 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.

How to use it:

1. Markup html structure

<nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper">
<div class="cbp-hsinner">
<ul class="cbp-hsmenu">
<li> <a href="#">Menu 1</a>
<ul class="cbp-hssubmenu">
<li><a href="#"><img src="images/1.png" alt="img01"/><span>Submenu 1</span></a></li>
<li><a href="#"><img src="images/2.png" alt="img02"/><span>Submenu 2</span></a></li>
<li><a href="#"><img src="images/3.png" alt="img03"/><span>Submenu 3</span></a></li>
...
</ul>
</li>
<li> <a href="#">Menu 2</a>
<ul class="cbp-hssubmenu cbp-hssub-rows">
<li><a href="#"><img src="images/1.png" alt="img01"/><span>Submenu 1</span></a></li>
<li><a href="#"><img src="images/2.png" alt="img02"/><span>Submenu 2</span></a></li>
<li><a href="#"><img src="images/3.png" alt="img03"/><span>Submenu 3</span></a></li>
...
</ul>
</li>
<li> <a href="#">Menu 3</a>
<ul class="cbp-hssubmenu">
<li><a href="#"><img src="images/1.png" alt="img01"/><span>Submenu 1</span></a></li>
<li><a href="#"><img src="images/2.png" alt="img02"/><span>Submenu 2</span></a></li>
<li><a href="#"><img src="images/3.png" alt="img03"/><span>Submenu 3</span></a></li>
...
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>
</nav>

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

3. The javascript

<script src="js/cbpHorizontalSlideOutMenu.min.js"></script> 
<script>
var menu = new cbpHorizontalSlideOutMenu( document.getElementById( 'cbp-hsmenu-wrapper' ) );
</script>

This awesome jQuery plugin is developed by codrops. For more Advanced Usages, please check the demo page or visit the official website.