Thursday, 13 December 2012

Responsive Navigation

Many responsive websites provide a horizontal navigation bar on large screens and drop-down navigation for smaller viewports. It’s a perfectly decent approach, but it’s not without its issues. Firstly, devices don’t just come in large and small; they come in every size imaginable. Secondly, the navigation might well change over time. Thirdly, the layout or font size might vary across screen sizes. We’re going to do things differently…

Why not check (with JavaScript) to see how much of our the navigation actually fits in the space available? Once we know that, we can take items that don’t fit within the navbar and move them into a dropdown menu. On especially small screens, we can choose to put the entire menu into a dropdown.