By
Create a space saving menu for all screens with the help of CSS and Font Awesome
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.
