|
<!--Pattern HTML--> |
|
<div id="pattern" class="pattern"> |
|
<!--Begin Pattern HTML--> |
|
<a href="#menu" class="menu-link">Menu</a> |
|
<nav id="menu" class="menu" role="navigation"> |
|
<ul class="level-1"> |
|
<!--Parent #1--> |
|
<li class="has-subnav"> |
|
<a href="#">Parent #1</a> |
|
<ul class="level-2"> |
|
<li class="has-subnav"> |
|
<a href="#">Child #1</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="has-subnav"> |
|
<a href="#">Child #2</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="has-subnav"> |
|
<a href="#">Child #3</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="has-subnav"> |
|
<a href="#">Child #4</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
|
|
<!--Parent #2--> |
|
<li class="has-subnav"> |
|
<a href="#">Parent #2</a> |
|
<ul class="level-2"> |
|
<li class="has-subnav"> |
|
<a href="#">Child #1</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="has-subnav"> |
|
<a href="#">Child #2</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="has-subnav"> |
|
<a href="#">Child #3</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="has-subnav"> |
|
<a href="#">Child #4</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
|
|
<!--Parent #3--> |
|
<li class="has-subnav"> |
|
<a href="#">Parent #3</a> |
|
<ul class="level-2"> |
|
<li class="has-subnav"> |
|
<a href="#">Child #1</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="has-subnav"> |
|
<a href="#">Child #2</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="has-subnav"> |
|
<a href="#">Child #3</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="has-subnav"> |
|
<a href="#">Child #4</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
|
|
<!--Parent #4--> |
|
<li class="has-subnav"> |
|
<a href="#">Parent #4</a> |
|
<ul class="level-2"> |
|
<li class="has-subnav"> |
|
<a href="#">Child #1</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="has-subnav"> |
|
<a href="#">Child #2</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="has-subnav"> |
|
<a href="#">Child #3</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="has-subnav"> |
|
<a href="#">Child #4</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
|
|
<!--Parent #5--> |
|
<li class="has-subnav"> |
|
<a href="#">Parent #5</a> |
|
<ul class="level-2"> |
|
<li class="has-subnav"> |
|
<a href="#">Child #1</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="has-subnav"> |
|
<a href="#">Child #2</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="has-subnav"> |
|
<a href="#">Child #3</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="has-subnav"> |
|
<a href="#">Child #4</a> |
|
<ul class="level-3"> |
|
<li><a href="#">Grandchild #1</a></li> |
|
<li><a href="#">Grandchild #2</a></li> |
|
<li class="has-subnav"> |
|
<a href="#">Grandchild #3</a> |
|
<ul class="level-4"> |
|
<li><a href="#">Great-Grandchild #1</a></li> |
|
<li><a href="#">Great-Grandchild #2</a></li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</li> |
|
|
|
</ul> |
|
</nav> |
|
</div> |
|
<!--End Pattern HTML--> |
|
|
|
<div class="container"> |
|
<section class="pattern-description"> |
|
<h1>Multi-Toggle Navigation</h1> |
|
|
|
<p>From <a href="http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/">Complex Navigation Patterns for Responsive Design</a>:</p> |
|
The multi-toggle is basically just nested accordions. The user taps on the parent category to reveal children categories underneath. Once enough screen real estate becomes available, they convert to the usual <a href="http://devsnippets.com/article/reviews/10-brilliant-multi-level-navigation-menu-techniques.html">multi-level dropdown</a> we’re used to seeing. </p> |
|
<p>Quick tip: use one of two emerging icons: the plus sign (+) or downward caret (▼ &#9660;) to let users know there’s more content. </p> |
|
<h3>Pros</h3> |
|
<ul> |
|
<li><strong>Scannable</strong> – users can quickly scan parent categories before making a decision to go to the next level.</li> |
|
<li><strong>Scalable</strong> – Got a menu that’s 17 levels deep? This solution can technically handle it with ease (but please don’t do that)</li> |
|
</ul> |
|
<h3>Cons</h3> |
|
<ul> |
|
<li><strong>Not terribly sexy</strong> – tapping through a bunch of Russian nesting doll navigation levels isn’t the most elegant thing in the world, but then again I suppose you could say that about any multi-level navigation solution.</li> |
|
<li><strong>Potential JS requirement</strong> – I say ‘potential’ just because most accordion-style interactions I’ve seen uses JS to make the interaction happen. However, the brilliant <a href="http://twitter.com/aarongustafson">Aaron Gustafson</a> demonstrated that you can <a href="http://www.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks">accomplish this effect</a> using CSS’s <code>:target</code> pseudo-class. Pretty neat! Also, a JS requirement itself isn’t necessarily a con, just make sure the navigation is accessible for users with poor/no JS support.</li> |
|
</ul> |
|
<h3>Resources</h3> |
|
<ul> |
|
<li><a href="http://www.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks">Build a smart mobile navigation without hacks</a></li> |
|
<li><a href="http://jsfiddle.net/leaverou/zwvNY/">Animate using min-height</a> by <a href="https://twitter.com/leaverou">Lea Verou</a> – This technique is insanely badass. I use it for all my height-animating needs, including accordions.</li> |
|
<li><a href="http://jqueryui.com/demos/accordion/">jQuery Accordion</a></li> |
|
</ul> |
|
<h3>In the Wild</h3> |
|
<ul> |
|
<li><a href="http://www.barackobama.com/">Barack Obama’s</a> (redesigned) site in conjunction with the <a href="http://bradfrostweb.com/blog/web/responsive-nav-patterns/#footer-anchor">footer anchor</a> pattern. </li> |
|
</ul> |
|
</section> |
|
<footer role="contentinfo"> |
|
<div> |
|
<nav id="menu"> |
|
<a href="http://bradfrost.github.com/this-is-responsive/patterns.html">←More Responsive Patterns</a> |
|
</nav> |
|
</div> |
|
</footer> |
|
</div> |