github/this-is-responsive
1
1
Fork 0
mirror of https://github.com/bradfrost/this-is-responsive.git synced 2026-01-15 00:58:04 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
425c62f555f3877ef3ee61894de2461d578fa2ac
this-is-responsive/patterns/nav-multi-toggle.html
Brad Frost 4be9009c14 Link Patterns to Codepen 
And remove tips for now.
2012-09-10 02:57:49 -04:00

506 lines
16 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" media="all" href="../styles.css">
<title>Responsive Pattern | This Is Responsive</title>
<script type="text/javascript" src="../js/modernizr.js"></script>
</head>
<body>
<!--Pattern CSS-->
<style id="s" type="text/css">
a.menu-link {
float: right;
display: block;
padding: 1em;
}
.menu, .menu > ul ul {
clear: both;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.js .menu, .js .menu > ul ul {
overflow: hidden;
max-height: 0;
background: rgba(0,0,0,0.1);
}
.menu.active, .js .menu > ul ul.active {
max-height: 55em;
}
.menu > ul {
border-top: 1px solid #808080;
}
.menu li a {
color: #000;
display: block;
padding: 0.8em;
border-bottom: 1px solid #808080;
position: relative;
}
.menu li.has-subnav > a:after {
content: '+';
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.25em 0.5em;
}
.menu li.has-subnav > a.active:after {
content: "-";
}
@media screen and (min-width: 48.25em) {
.pattern {
overflow: visible;
}
a.menu-link {
display: none;
}
.js .menu, .js .menu > ul ul {
max-height: none;
overflow: visible;
background: none;
}
.js .menu > ul ul {
background: #808080;
display: none;
}
.js .menu > ul li:hover > ul {
display: block;
}
.menu ul {
margin: 0 0 0 -0.25em;
border: 0;
}
.menu li a {
border: 0;
}
.menu li.has-subnav > a {
padding-right: 2em;
}
.menu li.has-subnav > a:after {
content: ">";
font-size: 1em;
padding: 0.8em 0.5em;
}
.menu .level-1 > li.has-subnav > a:after {
content: "▼";
}
.menu > ul li {
margin: 0 0.25em;
}
.menu > ul > li {
display: inline-block;
position: relative;
}
.menu > ul ul {
position: absolute;
top: 0;
left: 12em;
width: 12em;
}
.menu > ul ul li {
position: relative;
}
.menu > ul ul.level-2 {
top: 3em;
left: 0;
}
}
</style>
<!--End Pattern CSS-->
<!--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-->
<!--Pattern JS (if needed)-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').addClass('js');
var $menu = $('#menu'),
$menulink = $('.menu-link'),
$menuTrigger = $('.has-subnav > a');
$menulink.click(function(e) {
e.preventDefault();
$menulink.toggleClass('active');
$menu.toggleClass('active');
});
$menuTrigger.click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('active').next('ul').toggleClass('active');
});
});
</script>
<div class="container">
<section class="pattern-description">
<h1>Multi-Toggle Navigation</h1>
<p class="wp-caption-text">Barack Obama's Multi-Toggle Navigation from his redesigned campaign site</p></div><br />
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&#8217;re used to seeing. </p>
<p>Quick tip: use one of two emerging icons: the plus sign (+) or downward caret (▼ &amp;#9660;) to let users know there&#8217;s more content. </p>
<h3>Pros</h3>
<ul>
<li><strong>Scannable</strong> &#8211; users can quickly scan parent categories before making a decision to go to the next level.</li>
<li><strong>Scalable</strong> &#8211; Got a menu that&#8217;s 17 levels deep? This solution can technically handle it with ease (but please don&#8217;t do that)</li>
</ul>
<h3>Cons</h3>
<ul>
<li><strong>Not terribly sexy</strong> &#8211; tapping through a bunch of Russian nesting doll navigation levels isn&#8217;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> &#8211; I say &#8216;potential&#8217; just because most accordion-style interactions I&#8217;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&#8217;s <code>:target</code> pseudo-class. Pretty neat! Also, a JS requirement itself isn&#8217;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> &#8211; 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&#8217;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="../patterns.html">&larr;More Responsive Patterns</a>
</nav>
</div>
</footer>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink