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
- Jump navigation with media queries and a tiny bit of extra markup
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.
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.
- Simplicity & speed
- Just HTML & CSS with some media queries so easy to customise
- Menu is in correct place in source code and only needs a single extra “jump” link
- Needs an extra link to create the “jump” bit
- Probably not ideal for larger menus with dropdowns/more than half a dozen links
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!