News

Build a CSS expanding navigation menu

Create a space saving menu for all screens with the help of CSS and Font Awesome

Screen shot 2015-02-26 at 14.55.06

Create a space saving menu for all screens with the help of CSS and Font Awesome

Screen shot 2015-02-26 at 14.55.06


Get the code to help complete this tutorial


Navigation menus are vital to the success of any website. The navigation menu on a website is like a road sign on a street or a level directory in a shopping centre. You cannot reach your destination without first knowing where you are.

Just like in real life, navigation in web design is very important and plays a major role in a website’s usability as well as in the user experience. Nowadays you can see plenty of different types of navigation menus with interesting, creative and unusual designs.

In this tutorial, we will look at how we can develop a simple and clean navigation menu. The menu will expand horizontally and when closed will be tucked away neatly with just the popular Navicon icon showing. This icon (which is three horizontal or vertical bars) is quickly becoming known as something that ‘should’ be clicked on. To help us develop this menu, we’re also going to be using Font Awesome, which is an iconic font and CSS toolkit, and we will be adding some vector icons to each menu button. So let’s get started on our expanding navigation menu!

Use Font Awesome

Throughout this tutorial we’ll be using Font Awesome’s scalable vector icons that can instantly be customised using CSS. There’s two ways to use Font Awesome, you can use their content delivery network CDN (as shown), or download the whole file from the home page: http://fortawesome.github.io/Font-Awesome, which is what we’re going to do so that we can take a peek inside the CSS file.

001    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Create the menu

Our first bit of HTML will be a div with five different class names that we’ll use to position and style our menu. Then add in an input field and label element which we’ll use to animate the menu. The first icon font we’ll use is the popular Navicon which has a class name of ‘fa-bars as seen below:

001    <div class="menu top left horizontal blue">
002    <input id="slide" name="slide"         type="checkbox">
003    <label for="slide" class="icon open">
004    <i class="fa fa-bars"></i>
005    </label>
006    </div>

Menu buttons

Inside our div that we created in the last step, let’s start adding in our menu buttons. We’re going to use the HTML5 <nav> element, and then give it a class name of ‘navigation’. Then within that element, we need to add an unordered list. We leave the unordered list empty for now as we will fill that in throughout the next few steps.

001    <nav class="navigation">
002    <ul>
003    </ul>
004    </nav>
005    

The home button

Within our unordered list, we’re now going to add in our buttons using a combination of list items and additional unordered lists. Adding a class called ‘active’ for our first list allows us to use that as a trigger for when we add the CSS for our animation. Then our class name is called fa-home and this class pulls in our icon fonts from the Font Awesome CSS file.

001    <li class="active">
002    <a href="">
003    <ul>
004    <li><i class="fa fa-home"></i></li>    
005    <li><span>home</span></li>
006    </ul>
007    </a>
008    </li>

The about button

Now underneath the closing list item of our home button, we’re going to add in another set of lists and wrap this within an anchor tag. This time we’re going to target a font icon that’s called fa-user as this font icon is perfect for our about button.

001    <li>
002    <a href="#">
003    <ul>
004    <li><i class="fa fa-user"></i></li>
005    <li><span>about</span></li>
006    </ul>
007    </a>
008    </li>

Finish off the buttons

To finish off our navigation we’re going to add in another three buttons. We are going to pull in a camera icon font for our portfolio button, a bookmark icon for our blog button and finally a paper plane icon for our contact button. These seem like good icons to use, but feel free to experiment with other available icons.

001    <li>
002    <a href="#">
003    <ul>
004    <li><i class="fa fa-camera"></i></li>
005    <li><span>portfolio</span></li>
006    </ul>
007    </a>
008    </li>
009    <li>
010    <a href="#">
011    <ul>
012    <li><i class="fa fa-bookmark"></i></li>
013    <li><span>blog</span></li>
014    </ul>
015    </a>
016    </li>017    <li>
018    <a href="#">
019 <ul>
020    <li><i class="fa fa-send"></i></li>
021    <li><span>contact</span></li>
022 </ul>
023    </a>
024    </li>
025    </ul>
026    </nav>
027    </div>
028    

Import Font Awesome

Create a new CSS file and open it up within your favorite text editor. If you haven’t already done so, create a new folder called CSS and put both your new CSS file and the font-awesome.css file in it. Now we simply import our font-awesome.css file using the @import url rule.

001    @import url(font-awesome.css);
002    

CSS reset

Adding in a reset to our CSS file is standard practice these days, but we’re going to target every element by using the asterisk symbol and removing all margins, padding and any borders. It’s not always a good idea to reset every single element, but this will do nicely this time for the tutorial.

001    * {
002        margin: 0;
003        padding: 0;
004        border: 0;
005        }
006        

Body styles

Another part of our CSS reset is to specify both the ‘html’ and ‘body’ elements as 100% height. This will allow our page to stretch to fit the whole browser window. Lastly because our menu will be blue, we’re going to make the page background dark, which will make our menu pop off the page a bit better than if we were to use white as our background colour.

001    html,
002    body {
003    height: 100%;
004    }
006    body {
007    background: #1b1b1b;
008    }

Menu position

Making sure the menu is in a fixed position will prevent vertical scrollbars from popping up. Then we’re going to use the z index to make sure this falls above everything else. To give us some breathing space, we will move the menu down by 50 pixels.

001    .menu {
002    position: fixed;
003    z-index: 9999;
004    margin: 50px 0 0 0px;
005    }

Hide the menu

Before we can have any kind of animation occur, we first need to hide all of our menu buttons. So by targeting the nav element, we can set its opacity to zero. Then when the input checkbox is clicked (which will be our Navicon), we set its opacity to ‘1’ and the menu will appear underneath.

001    .menu nav {
002    -webkit-opacity: 0;
003    -moz-opacity: 0;
004    opacity: 0;
005    }
006        .menu input#slide:checked ~ nav {
007        -moz-opacity: 1;
008        -webkit-opacity: 1;
009        opacity: 1;
010        }

Label styles

Now we’re going to give our Navicon (the horizontal lines) some default styles. Give this a position of fixed will pull the icons up into alignment with the Navicon. Then we make sure that this will act like a button by adding in ‘cursor: pointer’ and we’re going to remove the little checkbox by specifying ‘display: none’ for the input field.

001    .menu label {
002      position: fixed;
003        font-size: 30px;
004        cursor: pointer;
005        z-index: 9999;
006      }
007        .menu input#slide {
008        display: none;
009        }
010        

Navicon rotation

When the Navicon is clicked on, we want it to rotate 90 degrees by using the transform property. This will make the menu more appealing as it spins around once clicked on and then the menu will slide out from underneath. At the moment though, the rotation is way too quick, so let’s sort that out in the next step.

001    .menu input#slide:checked ~ label.open i {
002        -webkit-transform: rotate(90deg);
003        -moz-transform: rotate(90deg);
004        transform: rotate(90deg);
005

Navicon and button transitions

Having the Navicon rotate as quick as it does isn’t all that easy on the eye. What we really want to do is add a little easing to it so that we have a nice smooth rotation when it’s clicked on. Same goes with the menu buttons. Having them suddenly drop down in a blink of an eye isn’t all that nice or comfortable to look at, so we add some easing to those too.

001    .menu label i,
002    .menu nav,
003    .menu nav ul li a span {
004    -webkit-transition: all 0.2s ease-in-out;
005    -moz-transition: all 0.2s ease-in-out;    006    transition: all 0.2s ease-in-out;
007    }
008    

Space out the buttons

We’ve got the menu buttons and Navicon looking a lot better now, so let’s add some spacing to our buttons. Then once we have the spacing sorted, we can remove the bullet points. Make sure the overflow is hidden and then increase the size of our font icons to 20 pixels. Having the ability to change the size of our icons, is what makes Font Awesome, awesome!

001    .menu label,
002    .menu nav ul li a i,
003    .menu nav ul li a span {
004        line-height: 60px;
005        text-align: center;
006      width: 60px;
007        height: 60px;
008    }
009    .menu nav ul {
010    list-style: none;
011        overflow: hidden;
012    }
013    .menu nav ul li a i {
014    font-size: 20px;
015    }
016

Button text

The next step is to set the styling for our button text. We’re going to use a Google Font called Lato, but you can experiment with any font you want. Then set the size to 16px and make sure it’s all in upper-case. Then we’re going to set the width to zero.

001    .menu nav ul li a span {
002    font-family: 'Lato', sans-serif;
003    font-size: 16px;
004    text-transform: uppercase;
005    width: 0;
006    }
007    0

Animate the buttons

Now this is where things get a little more interesting. We are going to animate the buttons by using padding and this is so that when the buttons are hovered over, they will move to the right by 10px. Then we need to make sure that the active state is set and that they are given 100px in width.

001    .menu nav ul li a:hover span {
002            width: 100px;
003            padding: 0 10px;
004    }
005    .menu nav ul li.active a span {
006            width: 100px;
007            padding: 0 10px;
008    }

Horizontal menu

Our main aim in this tutorial is to create a horizontal menu, so by targeting the horizontal class, we can float the list items left which will make the whole menu horizontal. Then by adding a negative 50 pixels to our menu, we can tighten things up nicely.

001    .menu.horizontal nav ul li,
002    .menu.horizontal nav ul li a span {
003    float: left;
004    }
005    .menu.left.horizontal nav {
006    margin-left: -50px;
007    }

Home button

At the moment the icon for our home button is hidden underneath the Navicon. So by adding some margins we can push all of our buttons over to the right slightly so the home icon is then seen. You’ll also notice that when you click on both the navicon and the home icon, the menu will close.

001    .menu.left.horizontal input#slide:checked ~ nav {
002        margin-left: 60px;
003    }
004    .menu.right.horizontal nav {
005        margin-right: -50px;
006    }
007    .menu.right.horizontal input#slide:checked ~ nav {
008        margin-right: 60px;
009    }

Menu colour

In the last few steps of this tutorial we are going to add some colour to both our menu and buttons. The first thing to do then is to add a nice light blue to our menu background. Then we will give our icons a different shade of blue which will be slightly darker than our main menu background.

001    .menu.blue label, 
002    .menu.blue nav ul li a ul li i {
003        background-color: #3498db; bg
004        color: #2980b9; icons
005    }

Button colour

In this last step, all we need to do is add some colour to our menu buttons. What we’re going to do is reverse the colours so that the background colour to our buttons is the same colour as our icons and the text will be the same colour as the menu background. Lastly, let’s add in a hover state for our button text with white as the colour for that.

001    .menu.blue nav ul li a span {
002    background-color: #2980b9;
003    color: #3498db;
004    }
005    .menu.blue nav ul li a span:hover { color: white;}

Final thoughts

You’ll more than likely see plenty of navigation menus like this, especially now that responsive webpages are now part of our design workflow. Using vector icons such as Font Awesome, will really help make your navigation menus more easy and fun to develop.

×