Navigation

Facebook Twitter
Pen Actions Create New Pen Save Info Panel (if owned) Editor Commands Indent Code Right A Pen by inpixelitrust A Pen by inpixelitrust
Responsive Navigation | Examples of Navigation in Responsive Design Responsive Navigation | Examples of Navigation in Responsive Design Navigation in RWD can be tough! Responsive Web Design can be a fickle thing - especially if you are retro-fitting an existing website. There are lots of things to think about:

TinyNav.js · Convert navigation to a select dropdown on small screen

TinyNav.js is a tiny jQuery plugin (452 bytes minified and gzipped) that converts <ul> and <ol> navigations to a select dropdowns for small screen. It also automatically selects the current page and adds selected="selected" for that item. This isn’t the first plugin to do this and it doesn't provide a lot of options, but it might be the smallest (file size). Scale this page to see the plugin in action. Check out also the new version called Responsive Nav. TinyNav.js · Convert navigation to a select dropdown on small screen
Pull Down for Navigation Pull Down for Navigation 27th February, 2012 Tom Kenny Tutorials Mobile screen real estate is at a premium and one of the biggest problems to solve is how to display navigation when screen widths become quite narrow so I decided to have a look and see what I could come up with using some nifty CSS and a touch of jQuery. Trying to condense a navigation down onto a mobile screen tends to push the actual content of the site down and out of initial view. Luke Wroblewski has explored some solutions in Mobile First but I’ve developed something that I haven’t come across just yet. In fact, in the process of writing this tutorial, Brad Frost released a great roundup of responsive navigation patterns so I suppose this could be an additional technique to add to his list. Pull Down to Refresh

Responsive Navigation Patterns

Update: I’ve also written about complex navigation patterns for responsive design. Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness. Here’s some of the more popular techniques for handling navigation in responsive designs: Responsive Navigation Patterns
Progressive And Responsive Navigation - Smashing Coding Developing for the Web can be a difficult yet rewarding job. Given the number of browsers across the number of platforms, it can sometimes be a bit overwhelming. But if we start coding with a little forethought and apply the principles of progressive enhancement from the beginning and apply some responsive practices at the end, we can easily accommodate for less-capable browsers and reward those with modern browsers in both desktop and mobile environments. A Common Structure Progressive And Responsive Navigation - Smashing Coding