Mobilized header and footer
When creating a prototype for a recent project I came up with a solution to improve navigation on mobiles / tablets. At smaller resolutions, header and footer navigation items can be grouped into an easy-to-use dropdown menu. This also saves precious screen space.
Many lists, one menu
touchdown.js by Samuel Cotterall for the dropdown menus but modified the script slightly. I added support for the attributes
title: 'Information Links:'
Now, any links within the
parent element can be added to the dropdown, as opposed to it only targeting a single
<ul>. Use the
.add class on any element that contains links you wish to add to the menu. The
title attribute allows you to set the default option for the menu, useful if you have more than one per-page like I did.
Sam's functionality for indenting nested lists is still supported too, e.g. those you might use for fly-out menus.
I've also created a simple toggle function to show / hide the search box on smaller screens, a common feature on mobile sites these days.