I’m aware some folks have thoughts on the best way to make navigation responsive on websites, I too have thoughts but this is just a straight up giveaway.

Typically responsive menus work in two ways

This is the latter. It’s nothing fancy but hopefully it’s a quick and easy option for someone. Feel free to grab, share, tweet and modify to your hearts content.

Responsive navigation

Simple, responsive JS free jump navigation

Best bet is to have a look at the demo and poke around.

Please note: This is a fairly old (although probably still useful in some cases) bit of code and there may be better alternatives available.

The simple jist of it is that it’s a normal list which we position at the bottom of our screen using position:absolute (because it’s built mobile first) and then we turn into an inline list that appears at the top of the page using some standard styling for bigger screens. You decide your own breakpoints etc. What’s in there is simply what I was working with on a particular project that I built this for.

Benefits

Drawbacks

The nice thing about this sort of navigation is the simplicity, I only use a single extra link in the source code to create the “Jump to navigation” that appears on small screens. The rest is a simple list, there’s no duplication of list+select and it doesn’t need javascript and the “navigate site” title is a pseudo element.

From current experience I’m finding Touchdown type scripts are a better way of updating larger navigation blocks, particularly those where they are a couple of levels deep with dropdowns etc. In the example here our clients website only has a few main sections so this is fine. As ever, this is some rough working code not a “you have to do this” so feel free to evaluate and use or not.

Hope it helps, I’d sure appreciate you sharing it if it does!

James Young

Written by James Young

I'm always looking for interesting work opportunities, if you'd like to work together please get in touch.

Join me on Twitter & Dribbble.