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.

Two lists, one menu

I utilised touchdown.js by Samuel Cotterall for the dropdown menus but modified the script slightly. I added support for the attributes parent and title.

$('footer .menu').Touchdown({
	parent: 'footer',
	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.

Search

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.