Design Websites People Will Love

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with three in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

Email Address *

Free. No spam. Unsubscribe any time.

Pull Down for Navigation

February 27, 2012

Tom Kenny

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

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. Basically, pulling down on the list view when at the top updates the content. A simple and effective way of removing a button from the interface and a great use of touch screen input. This technique has been widely adopted amongst a range of different apps.

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

Obviously the demo is best viewed on a smartphone device but hasn’t been tested on many Android as I devices I don’t have access to many! Works fine on iPhones. I’ve added the code onto GitHub but I’ve only just started using it. Right now it feels like a different language but please feel free to do whatever you need to do there if you want to improve it or use it for whatever you want to use it for.

Currently this exists as a great solution to single level navigation only. I haven’t tried to solve the second (and possibly third) level navigation just yet as I wanted to get this idea out as soon as possible.

As you can see we have two nav elements. One is the main navigation which will be hidden at mobile widths and the other is the mobile navigation which will be hidden at all other widths and only shown when the browser window becomes too narrow.

The first thing you’ll notice is the mobile navigation (#mobile) isn’t hidden by display: none; but by visiblity: hidden. This allows the jQuery code to work out what the height of the element is as we’ll want to move the page up by that amount to hide the navigation on load.

The #site div has to have a higher z-index than the navigation in order for it so slide over the top and the #mobile nav has fixed positioning so it doesn’t move it when scrolling.

Using a media query with device-width allows us to target mobile devices specifically and add a bar at the top with the text “Pull Down for Navigation”. As the vast majority of smartphones use touchscreen inputs I think it’s appropriate to word in this way as that’s exactly what you’ll be doing. As you can see, the whole bar is controlled through CSS including the text through the use of the content property.

Step 3

The jQuery

As much as I would have liked to complete this solution with only CSS, it isn’t quite possible. What’s basically happening in the jQuery is that we’re getting the height of the mobile navigation and then moving the site up by that number of pixels. Follow the comments in the jQuery code to see how it works.

<script type="text/javascript" charset="utf-8">
function checkWidth () {
// Get the height of the div and set it in a variable called mabileNavHeight to access later
var mobileNavHeight = $('#mobile').height();
// Check to see if the browser width is less than 480px wide
if ($(window).width() < 481) {
$('#site').css({
// Change the CSS top value of #site to whatever mobileNavHeight outputs
top: mobileNavHeight + 'px !important'
});
// Scroll the window the height of mobileNavHeight
$(window).scrollTop(mobileNavHeight);
}
// Check to see if the browser width is more than 480px wide
else if ($(window).width() > 480) {
$('#site').css({
// Make sure the top value of #site is 0 so we don't see the space for the mobile nav
top: 0 + 'px'
});
// Scroll to the absolute top of the page
$(window).scrollTop(0);
}
}
$(document).ready(function(){
// Check the window size when page loads
checkWidth();
});
</script>

Advantages and Disadvantages

Advantages:

Keeps the navigation at the top

Allows content to move up the page and become the focus

Uses simple touch based input

Disadvantages:

No solution for further levels of navigation

Maintaining two separate menus (although not a problem if dynamically generated)

Conclusion

It’s clear that there isn’t a one-size-fits-all approach to responsive navigation design so this is just another alternative. What I love about responsive web design is that there is no ‘right’ or ‘wrong’ way. In this case it’s the context of how it’s used that’s important, much like all design.

Update: I’m getting reports of it both working and not working on Android devices. Unfortunately I don’t have any way of testing on an Android device currently so would it would be great if someone can help test and get it working for more devices. Thanks! Grab the code from GitHub.

Update 2: Matthias Kretschmann on Twitter has informed me of some good news:

@tkenny just a small heads up that your pull for navigation example works fine under Android 4 in Browser, Chrome beta & Opera

Design Websites People Will Love

Learn why the best designers make the decisions they do to design successful websites people love in this eBook with three in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

About Tom Kenny

I’m a freelance web designer and front-end developer with over 7 years of experience designing for the web.
Follow me on Twitter here.

Design Websites People Will Love

Learn why the best designers make the decisions they do to design successful websites people love in this eBook with three in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

Design Websites People Will Love

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with three in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

Design Websites People Will Love

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with three in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.