Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Priority+ Navigation
<!--Pattern HTML-->
<div id="pattern" class="pattern">
<!--Begin Pattern HTML-->
<nav id="menu" class="menu" role="navigation">
<ul>
<li class="priority"><a href="#">Link #1</a></li>
<li class="priority"><a href="#">Link #2</a></li>
<li class="priority"><a href="#">Link #3</a></li>
<li><a href="#">Link #4</a></li>
<li><a href="#">Link #5</a></li>
<li><a href="#">Link #6</a></li>
<li><a href="#">Link #7</a></li>
<li><a href="#">Link #8</a></li>
</ul>
</nav>
</div>
<!--End Pattern HTML-->
<div class="container">
<section class="pattern-description">
<h1>Priority+ Navigation</h1>
<p>The <a href="http://justmarkup.com/log/2012/06/19/responsive-multi-level-navigation/">Priority+ pattern</a> was coined by <a href="http://justmarkup.com/">Michael Scharnagl</a> (<a href="http://twitter.com/justmarkup">@justmarkup</a>) to describe navigation that exposes what&#8217;s deemed to be the most important navigation elements and tucks away less important items behind a &#8220;more&#8221; link. The less important items are revealed when the user clicks the &#8220;more&#8221; link.</p>
<h3>Pros</h3>
<ul>
<li><strong>Relatively simple to implement</strong> &#8211; The logic required to execute this technique isn&#8217;t terribly complicated. It&#8217;s just a basic show/hide toggle to reveal the hidden navigation items.</li>
<li><strong>(hopefully) exposes the most accessed features</strong> &#8211; it&#8217;s hopefully revealing the three or four things the majority of users frequently access anyways.</li>
</ul>
<h3>Cons</h3>
<ul>
<li><strong>Hides potentially important nav items</strong> &#8211; what you may deem most important may not be what&#8217;s important to your users. Burying nav items means having to make some assumptions, and while it hopefully works out for most users, it might also piss some people off.</li>
<li><strong>Doesn&#8217;t work well with multi-level navigation</strong> &#8211; The priority+ pattern seems good for navs that have a lot of items at the same hierarchy level, but unfortunately it doesn&#8217;t seem to solve the sub-nav dilemma.</li>
</ul>
<h3>Resources</h3>
<ul>
<li><a href="http://justmarkup.com/log/2012/06/19/responsive-multi-level-navigation/">Responsive Multi Level Navigation &mdash; let's try.</a></li>
<li><a href="http://justmarkup.com/lab/juma/nav/example2/">Priority+ Demo</a></li>
</ul>
<h3>In the Wild</h3>
<ul>
<li><a href="http://www.wm.edu/">William and Mary</a></li>
<li><a href="http://m.usatoday.com/sports">USA Today&#8217;s mobile site section pages</a> don&#8217;t follow this exactly, but expose the most important categories by default and an arrow or swipe reveals the remaining navigation items. Pretty slick.</li>
</ul> </section>
<footer role="contentinfo">
<div>
<nav id="menu">
<a href="http://bradfrost.github.com/this-is-responsive/patterns.html">&larr;More Responsive Patterns</a>
</nav>
</div>
</footer>
</div>

Priority+ Navigation

The Priority+ pattern was coined by Michael Scharnagl (@justmarkup) to describe navigation that exposes what’s deemed to be the most important navigation elements and tucks away less important items behind a “more” link. The less important items are revealed when the user clicks the “more” link.

Forked from Brad Frost's Pen Priority+ Navigation.

A Pen by Carl V. Lewis on CodePen.

License.

/*
Warning: extremely sloppy code.
*/
$(document).ready(function() {
var $menu = $('#menu'),
$menuList = $menu.find('ul'),
bp = window.getComputedStyle(document.body,':after').getPropertyValue('content'),
$toggler;
if(!$('#toggler').length) {
$('<li class="priority" id="toggler"><a href="#">More+</a></li>').appendTo($menuList);
$toggler = $('#toggler');
}
function checkSize() {
if(bp=='large') {
showNav();
} else {
hideNav();
$toggler.text('More+');
}
}
function showNav() {
$menu.find('li:not(.priority)').removeClass('hidden');
}
function hideNav() {
$menu.find('li:not(.priority)').addClass('hidden');
}
function changeNavLabel() {
$toggler.toggleClass('active');
if($toggler.hasClass('active')) {
$toggler.text('Less-');
showNav();
} else {
$toggler.text('More+');
hideNav();
}
}
$menu.on("click", "#toggler", function(e){ //Clicking toggle
e.preventDefault();
changeNavLabel();
});
$(window).resize(function() { //On Window resize
bp = window.getComputedStyle(document.body,':after').getPropertyValue('content');
checkSize();
togglerVisibility();
});
checkSize();
togglerVisibility();
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
.menu li {
display: inline-block;
margin: 0 0.25em;
}
.menu li.hidden {
display: none;
}
.menu li a {
display: block;
padding: 1em 0.5em;
}
@media screen and (min-width: 48.25em) {
body:after {
content: 'large';
display: none;
}
#toggler {
display: none;
}
}
<link href="https://bradfrost.github.com/this-is-responsive/styles.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.