News

Build a responsive-ready retina menu

Make sure your menu is both responsive and ready for retina screens by using custom fonts instead of images

resposnivemenus608

Designing the navigation element for your website in this age of mobile devices and differing screen widths can be a real pain in the mouse. Balancing usability with aesthetic credibility is the challenge that responsive design now presents to all designers. There are a wide variety of solutions and techniques available to solve the issue, from fixed drop-down menus to side-sliding variations. The problem is that, while these solutions all solve the problem of maintaining functionality at different screen widths, they can sometimes lacking visual impact.

These days it’s nice to see a menu that remembers to look good, too. Longer, scrolling pages are reducing the number of menu elements some sites need to present, and those sites, in particular, can afford to be a little more adventurous with how they deliver the navigation. So it’s time to give the responsive menu a much needed paint job and raise it above the purely functional. This tutorial will demonstrate how to create a responsive menu that is both eminently usable and visually striking. And to keep it retina friendly, we’ll be using a custom-made icon font rather than images.

Choose your icons

In order to create the custom icon font, we’ll be using the excellent IcoMoon tools at icomoon.io/app/#/select. You have a choice here of creating your own icons as vector images to import into the font creator or choose from the extensive selection already available. We’ll choose ours from the library as they have exactly what we need.

Create a custom font

Having selected your icons, click the bottom Font button. On the next page, you can amend the icon’s tags and corresponding letters used to call each icon. Click on Download and you will get access to the folder with its font files and stylesheet. Place the font folder into your root.

Add the custom font

Copy the custom CSS that came with your download and paste it into the top of your site stylesheet. Ensure that the path for the font files is still correct. You may also want to make sure that each icon is assigned to the font family individually by name rather than with the default blanket icon class.

001 @font-face {
002     font-family: 'icomoon';
003     src: url('../fonts/icomoon.eot');
004     src: url('../fonts/icomoon.eot?#iefix')    format('embedded-opentype'),    
005            url('../fonts/icomoon.woff')             format('woff'),            006         url('../fonts/icomoon.ttf')        format('truetype')
007 url('../fonts/icomoon.svg#icomoon')     format('svg');
008     font-weight: normal;
009     font-style: normal;            010 }
011 .icon-happy,.icon-loved,.icon-uniF4F1,.    icon-skull,.icon-uniF539,.icon-rocket,.icon-    menu {
012         font-family: 'icomoon';
013         speak: none;
014            font-style: normal;            015         font-weight: normal;
016         font-variant: normal;
017         text-transform: none;
018         line-height: 1;            019         -webkit-font-smoothing: antialiased;
020     }
021        .icon-happy:before {content: "e603";}    022     .icon-loved:before {content: "e61c";}
023     .icon-uniF4F1:before {content: "e613";}
024     .icon-skull:before {content: "e607";}
025     .icon-uniF539:before {content: "e612";}    026     .icon-rocket:before {content: "e600";}
027 

Base CSS

Before we start putting all the menu HTML into the index.html, we just need to prepare some base CSS for the project. Start by creating a container, main <div> and a header into which the site title will be placed, making sure to call the stylesheet in the head. Use the following CSS to style the wrapping elements.

001 .main,
002 .container > header {
003         width: 100%;
004         margin: 0 auto;    
005            padding: 16px 32px;            006 }
007 .main {
008         max-width: 1300px;
009         min-height: 640px;            010 }
011 header {
012         text-align: center;
013         font-size: 16px;
014            background: rgba(255,255,255,0.6);    015 }
016 header h1 {    017         font-family: 'Hammersmith One', sans-    serif;
018         font-size: 75px;
019            line-height: 0.8;            020         margin: 0;
021         font-weight: 300;            022         color:#3f3782;
023        }                                    024     .movie {
025         font-size:102px;
026         color:#e63c2b;
027     }

Menu HTML

Create your menu <ul> using span classes for both the icon and the text label. The span class ‘fon’ will create the styling for the custom icons, while the class ‘item’ is used for the labels. The icon name, as declared in the IcoMoon CSS calls each custom icon to its element.

001 <div>
002 <header>
003 <h1>LONDON<br><span>MOVIE</    span><br>REVIEWS</h1>
004 </header>
005 <div> 
006 <nav id="menu">
007 <ul>
008 <li><a href="#"><span></span><span>COMEDY</    span></a></li>
009 <li><a href="#"><span></span><span>ROMANCE</    span></a></li>
010 <li><a href="#"><span></span><span>ACTION</    span></a></li>
011 <li><a href="#"><span></span><span>HORROR</    span></a></li>
012 <li><a href="#"><span></span><span>DRAMA</    span></a></li>
013 <li><a href="#"><span></span><span>SCI-FI</    span></a></li>
014 </ul>
015 </nav>
016 </div>
017 </div>

Non media query CSS

There are some styles that apply to all three of the upcoming menu sizes, setting some navigation styles and using a WebKit trick to eliminate blue bordering on click. Here we also colour our navigation element backgrounds, using the nth property to alternate the colour between the site theme red and blue.

Large screen query

Our first media query targets screens of 800px or more. The layout is a horizontal strip of rounded squares, with each element at a percentage for maximum flexibility. Icon and label are stacked one above the other. We set the position and size of our ‘.fon’ icon, while the ‘.item’ label begins opaque, to be animated later.

First transition step

Now we can arrange hover effects. The first step will see the .item label fade in on hover, with a .5s transition, while the ‘.fon’ icons change their colour to match the appearing label. Both elements are now black from white.

Second transition step

The black characters don’t look bad against the coloured elements, but what would really make the highlighted icon stand out is having no background at all. So, we’ll add a transition that fades out the background on hover, leaving just the icon and visible label. We can also close that first media query here.

001 .nav li:hover {
002        background:none;
003        -moz-transition: background .5s;
004        -o-transition: background .5s;
005        -ms-transition: background .5s;
006        transition: background .5s;
007    }
008 }

Add the background

We’ll finish off the site properly with an appropriate background image. In keeping with the London Underground theme, we’re using for our London Movie site, we’re going with a white tile motif, and making sure the Google font is used throughout.

001 body {
002        font-family: 'Hammersmith One', sans-    serif;
003        background: url(../img/bg.jpg);
004    }
005    margin: 20px;
006       border: 1px solid red; /* take off     asap     */
007 }

Second media query

Our second media query targets screen widths between 520px and 799px, which covers tablet screens and some larger smartphones at landscape. Our layout will differ considerably at this size. Two rows of three blocks, no margins and no rounded corners. Our fonts are also considerably smaller and sit side by side.

Tablet animation

In a reversal of our hover effects for large screens, this time we’re going to change the background colour of the li element to black and give the white font and icon an off-white shade and a very slight fade. With that, all of the tablet styles are completed, so make sure you remember to close the media query here.

001 .nav li:hover {
002        background:rgba(0,0,0,0.9);
003        -moz-transition: background .5s;
004        -o-transition: background .5s;
005        -ms-transition: background .5s;
006        transition: background .5s;
007    } 
008    .nav a:hover .fon,    
009    .nav a:active .fon,
010    .nav a:active .item,
011 .nav a:hover .item{    012        color:rgba(259,259,259,0.9);
013        -webkit-transition: color .5s; 
014        -moz-transition: color .5s;    
015        -o-transition: color .5s;
016        -ms-transition: color .5s; 
017     transition: color .5s;        018    } 
019    }
020 

Target smaller screens

The final media query sets the layout for screens smaller than 520px, essentially targeting smartphones. Since we have so few menu elements, we can be bold and eschew the trend for JavaScript drop-down menus. We’ll also lose the corners and have six circular elements, with icon and label fitting together snugly.

Header and fonts

The font sizes for the site title need to be reduced for this screen size, using iPhone as a guide. We can also allow for a nice, large font size for our icon and we need to make sure that fumbling fingers are able to click on the elements. Notice that the icons remain crisp at all sizes – that’s the benefit of our custom font.

Background changes

Since the order of the elements has now changed, we’ll need to do some tweaking to the background colours. At the moment we have one column of red and one column of blue, which looks a little bit odd. In order to keep the alternating pattern, we need to arrange a one, two, two, one repeat of the colours.

001 .nav li:nth-child(6n+1) {
002        background: rgb(230, 60, 43);
003    }
004    .nav li:nth-child(6n+2) {
005        background: rgb(63, 55, 130);
006    }
007    .nav li:nth-child(6n+3) {
008    background: rgb(63, 55, 130);
009    }
010 .nav li:nth-child(6n+4) {    011        background: rgb(230, 60, 43);
012    }
013    .nav li:nth-child(6n+5) {
014        background: rgb(230, 60, 43);
015    }
016    .nav li:nth-child(6n+6) {
017        background: rgb(63, 55, 130);
018 }

Small screen transitions

This time, we’ll still fade out the background of the clicked element, but change the icon and label to the same colour as the background it sits on. The CSS used here fades the background of all li elements on hover, but the colour changes need to be targeted individually. Here we are handling all of the red elements.

Last transition

And finally, we’re handling the blue elements. Close the media query and we’re done. We now have three very distinct layouts between the three breakpoints. Your menu at small-screen width doesn’t have to be a small version of the large screen layout. You have the opportunity to give each menu its own appropriate design.

×