TinyNav.js · Convert navigation to a select dropdown on small screen 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. Pull Down to Refresh Pull down to refresh was a concept first introduced to the mobile world by Loren Brichter in his Twitter app, Tweetie as you can see in the screenshot here. Pull Down for Navigation You can see where I’m going with this but the whole thinking of replacing a UI element with a natural gesture (scrolling on a touch screen is about as close to a ‘natural gesture’ you can get in technology) is very valuable on a mobile screen. Demo Currently this exists as a great solution to single level navigation only. Step 1 The HTML Step 2 The CSS Step 3 The jQuery
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: There are of course advantages and disadvantages of each method and definitely some things to look out for when choosing what method’s right for your project. Top Nav or “Do Nothing” Approach One of the easiest-to-implement solutions for navigation is to simply keep it at the top. Pros Cons Height issues- Height matters in mobile. Responsive navigation breaking to multiple lines on small screens In the Wild Resources The Select Menu The Toggle In The Wild
Progressive And Responsive Navigation - Smashing Coding Advertisement 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 Below is the HTML structure of a navigation menu created by WordPress. Please note: Any ellipses (…) in the snippets below stand in for code that we have already covered. Our navigation, unstyled. Our Tools CSS ResetHTML5 elementsLESS CSSjQuery CSS Reset Resetting our CSS styles is where we’ll start. HTML5 and CSS3 Elements We’ll be wrapping the menu in HTML5’s nav element, which is one HTML5 feature that we should be using right now5. CSS3 will give our menu the progressive feel we’re looking for. jQuery