Multi-Toggle Menu
This is probably one of the best navigation patterns for responsive design - especially when it comes to large menus. If you have huge drop-down menus with lots of pages in your navigation, then this method could be your best bet.
I am of the philosophy that you shouldn't hide any of your website's content when you view it on mobile. Some "experts" claim that when a user visits your site on their phone, they have different "context". Bullshit. It shouldn't matter where I view your website - I want the same content. I don't want the "lite" version of your website. If you think I need different content when I view your website on my phone, then you probably need to rethink your content strategy. This navigation pattern allows you to keep your full menu and allow your users to easily navigate your site's menu.
OK, getting back on topic.
The concept is really simple - once you get to a certain breakpoint, the menu is "opened" via javascript (although not totally necessary) and the user is presented with an accordion type navigation. jQuery probably popularized this layout pattern with it's UI library.
Overall, I love this navigation pattern because it's scalable, user-friendly, and easy to implement.
The CSS:
.menu-link { display: none;}
.menu {
float: left;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.menu ul {
padding: 0px;
margin: 0px;
list-style: none;
position: relative;
display: inline-table;
}
.menu > li > ul.sub-menu {
min-width: 10em;
padding: 4px 0;
background-color: #f4f4f4;
border: 1px solid #CCC;
}
.menu ul li { padding: 0px; }
.menu > ul > li { display: inline-block; }
.menu ul li a { display: block; text-decoration: none; color: #000; font-size: .9em; }
.menu ul li > a { height:58px; padding: 19px 12px; }
.menu ul ul {
display: none;
position: absolute;
top:100%;
min-width: 160px;
background-color: #f4f4f4;
border: 1px solid #CCC;
}
.menu ul li:hover > ul { display: block; }
.menu ul ul > li { position: relative; }
.menu ul ul > li a { padding: 5px 15px 5px 10px; height: auto; background-color: #f4f4f4; }
.menu ul ul > li a:hover { background-color: #42BBA3; color: #fff; }
.menu ul ul ul { position: absolute; left: 100%; top:0; }
@media all and (max-width: 768px) {
.example-header .container { width: 100%; }
a.menu-link { display: block; color: #fff; background-color: #333; float: right; text-decoration: none; padding: 19px 10px;}
.menu { clear: both; min-width: inherit; float: none; }
.menu, .menu > ul ul { overflow: hidden; max-height: 0; background-color: #f4f4f4; }
.menu > li > ul.sub-menu { padding: 0px; border: none; }
.menu.active, .menu > ul ul.active { max-height: 55em; }
.menu ul { display: inline; }
.menu > ul { border-top: 1px solid #808080; }
.menu li, .menu > ul > li { display: block; }
.menu li a { color: #000; display: block; padding: 0.8em; border-bottom: 1px solid #808080; position: relative; }
.menu li.has-submenu > a:after {
content: '+';
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.55em 0.5em;
}
.menu li.has-submenu > a.active:after {
content: "-";
}
.menu ul ul > li a { background-color: #e4e4e4; height:58px; padding: 19px 18px 19px 30px; }
.menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top:auto; border:none; }
}