Advertisement

Building a Responsive Layout With Skeleton: Navigation

by

Our Skeleton layout contains a number of responsive challenges, not least of which being the primary navigation. In these screencasts we'll prepare things by tidying up the baseline grid, talking about image replacement, styling the menu and finally using some jQuery to help make things responsive.


Baseline Grid and Logo

Before we dive into the primary navigation itself, we need to tidy up a few aspects of our layout. To begin with we'll need to make sure that all measurements we have so far work in harmony with our baseline grid. Secondly, we're going to talk about an alternative approach to image replacement which highlights some important points about performance.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!


Primary Navigation Base

The basis of our primary navigation is a slick looking menu with a dropdown submenu and some subtle transitions. In this video we're going to cover the basic mechanics of a css dropdown menu, plus some points (relating to what we were talking about with image replacement) about performance and accessibility.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!


Responsive Navigation

Having gotten the navigation working, it's time to consider how our mobile users will experience it. We're going to use jQuery and CSS media queries to swap out the standard menu with a <select> alternative for small screen sizes.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube


One Last Point

As mentioned by Michael, the submenu items as they currently stand will look dreadful when they drop drown from small menu items:

This is because the submenu width is set to equal the width of the parent link. Text within the links is wrapping and the whole thing is messed up. We can solve this by adding one additional rule to the submenu links:

nav.primary ul ul li a {
white-space: nowrap;
}

which prevents text wrapping and forces the submenu to grow width-ways. Much better!


Additional Resources

Some useful links to further build on what's been covered in these videos.

Advertisement