Created
September 11, 2012 21:10
-
-
Save anonymous/3702088 to your computer and use it in GitHub Desktop.
One way of taming nav links gone wild is to transform a list of links into a select menu for small screens. This is a clever way to save real estate.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--Pattern HTML--> | |
<div id="pattern" class="pattern"> | |
<!--Begin Pattern HTML--> | |
<nav class="navigation" role="navigation"> | |
<ul class="nav-list"> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">Products</a></li> | |
<li><a href="#">Services</a></li> | |
<li><a href="#">Locations</a></li> | |
<li><a href="#">About</a></li> | |
<li><a href="#">Contact Us</a></li> | |
</ul> | |
</nav> | |
</div> | |
<!--End Pattern HTML--> | |
<div class="container"> | |
<section class="pattern-description"> | |
<h1>Select Menu</h1> | |
<p>One way of taming nav links gone wild is to transform a list of links into a select menu for small screens. This is a clever way to save real estate.</p> | |
<h3>Pros</h3> | |
<ul> | |
<li><strong>Frees up plenty of space</strong>- a select menu definitely takes up a lot less space than a horizontal or vertical list of links </li> | |
<li><strong>Keeps interactions in the header</strong>- instead of a footer nav, the select menu keeps the navigation functionality in the header, where users are used to seeing web navigation</li> | |
<li><strong>Easily Recognizable</strong>- a select menu with a clear label saying “navigation” or “menu” is definitely easy for users to figure out. </li> | |
<li><strong>Pulls up native controls</strong>- each mobile browser will handle select menus their own way. Touch devices will pull up the nav in a touch friendly list, while trackball/d-pad/pearl devices will pull up a select menu more conducive to that particular input method.</li> | |
</ul> | |
<h3>Cons</h3> | |
<ul> | |
<li><strong>Lack of styling control</strong>- select menus are a pain in the ass to style. Each browser handles them in their own, usually clunky, way. Forget about cross-browser styling and coming out with anything that looks halfway consistent. As a result, the select menu can stick out like a sore thumb and really dirty up an otherwise good-lookin’ design.</li> | |
<li><strong>Potentially confusing</strong> – Users are used to select menus in the context of filling out a form, but I’m not sure they’d grasp a form element out of that context. This is simply a hunch, so it would be interesting to test.</li> | |
<li><strong>Handling subnav items</strong>- nested lists handled by select menus can look weird. Child categories are usually handled by <a href="http://media.smashingmagazine.com/wp-content/uploads/2011/12/prog-resp-nav_13.jpg">indenting with dashes</a>, and while it might get the point across I see it as potentially confusing and a little ugly.</li> | |
<li><strong>Javascript dependency</strong>- It doesn’t require too much JS to convert the list to a select menu, but it’s worth pointing out simply because mobile browsers do the dardest things. But again, the technique is pretty cut and dry so there shouldn’t be too many hang ups using this approach.</li> | |
</ul> | |
<h3>Resources</h3> | |
<ul> | |
<li><a href="http://tinynav.viljamis.com/">TinyNav</a> by <a href="https://twitter.com/viljamis">@viljamis</a></li> | |
<li><a href="http://css-tricks.com/convert-menu-to-dropdown/">Convert a Menu to a Dropdown for Small Screens</a></li> | |
<li><a href="http://coding.smashingmagazine.com/2012/02/13/progressive-and-responsive-navigation/">Progressive and Responsive Navigation</a></li> | |
<li><a href="https://github.com/mattkersley/Responsive-Menu">Responsive Menu</a></li> | |
</ul> | |
<h3>In the Wild</h3> | |
<ul> | |
<li><a href="http://viljamis.com/">Viljami Salminen</a></li> | |
<li><a href="http://retreats4geeks.com/">Retreats 4 Geeks</a></li> | |
<li><a href="http://www.fivesimplesteps.com">Five Simple Steps</a></li> | |
<li><a href="http://www.performancemarketingawards.co.uk/">Performance Marketing Awards</a></li> | |
</ul> | |
</section> | |
<footer role="contentinfo"> | |
<div> | |
<nav id="menu"> | |
<a href="../patterns.html">←More Responsive Patterns</a> | |
</nav> | |
</div> | |
</footer> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() { | |
/*! http://tinynav.viljamis.com v1.03 by @viljamis */ | |
(function ($, window, i) { | |
$.fn.tinyNav = function (options) { | |
// Default settings | |
var settings = $.extend({ | |
'active' : 'selected', // String: Set the "active" class | |
'header' : false // Boolean: Show header instead of the active item | |
}, options); | |
return this.each(function () { | |
// Used for namespacing | |
i++; | |
var $nav = $(this), | |
// Namespacing | |
namespace = 'tinynav', | |
namespace_i = namespace + i, | |
l_namespace_i = '.l_' + namespace_i, | |
$select = $('<select/>').addClass(namespace + ' ' + namespace_i); | |
if ($nav.is('ul,ol')) { | |
if (settings.header) { | |
$select.append( | |
$('<option/>').text('Navigation') | |
); | |
} | |
// Build options | |
var options = ''; | |
$nav | |
.addClass('l_' + namespace_i) | |
.find('a') | |
.each(function () { | |
options += | |
'<option value="' + $(this).attr('href') + '">' + | |
$(this).text() + | |
'</option>'; | |
}); | |
// Append options into a select | |
$select.append(options); | |
// Select the active item | |
if (!settings.header) { | |
$select | |
.find(':eq(' + $(l_namespace_i + ' li') | |
.index($(l_namespace_i + ' li.' + settings.active)) + ')') | |
.attr('selected', true); | |
} | |
// Change window location | |
$select.change(function () { | |
window.location.href = $(this).val(); | |
}); | |
// Inject select | |
$(l_namespace_i).after($select); | |
} | |
}); | |
}; | |
})(jQuery, this, 0); | |
$(".nav-list").tinyNav();}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.navigation { | |
padding: 1em; | |
} | |
select { | |
width: 100%; | |
} | |
.nav-list { | |
overflow: hidden; | |
} | |
.nav-list li { | |
float: left; | |
margin-right: 1em; | |
} | |
/* styles for desktop */ | |
.tinynav { display: none } | |
/* styles for mobile */ | |
@media screen and (max-width: 37.5em) { | |
.tinynav { display: block } | |
.nav-list { display: none } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment