flat menu main

Navigation Menu with HTML and CSS- Flat Icon style

In this article, I am going to show you how to implement a flat-icon style navigation menu in your HTML. You don’t have to use it as a menu, technically you can create “buttons” by following the same tutorial as well. It’s a fairly simple tutorial for those new to Cascade Style Sheets (CSS).

I will also introduce you to the process of implementing FontAwesome Icons. If you’ve never used FontAwesome before, it offers a completely free icon-set available to everyone, and it’s very easy to utilize on your website. For this tutorial, you may need prior HTML & CSS experience, but I will try to explain things as best as possible for newbies. You should be able to follow along, nonetheless, if you have any programming experience.

Create Flat Icon Navigation Menu

The flat-icon style navigation menu that we will create will look like this:


The text only shows when “hovering” over icons

Notice that the navigation’s icons are off to the side–this was done on purpose, however you can easily center the icons by adjusting the CSS file we will be creating.

First, set up the directory structure as follows:

To add FontAwesome to your website, you need to insert the following HTML code:


<head>
<link rel="stylesheet" href="style.css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
</head>

Notice how there is a Cascade Style Sheet(CSS) that we are linking to above also — We haven’t created it yet, however we will soon. First, we need to create a list of the navigation menu. This can be done with the following code:


<nav>
	<ul>
		<li>
			<a href="/category/windows">
			<span>Windows</span></a>
		</li>
		<li>
			<a href="/category/linux"><
			<span>Linux</span> </a>
		</li>
		<li>
			<a href="/category/mac"><
			<span>Mac/OSX</span> </a>
		</li>
		<li>
			<a href="/category/android">
			<span>Android</span> </a>
		</li>		
	</ul>
</nav>

Remember to change the <a href="/category/windows"> (link location) to wherever you want to point the user when he or she clicks the individual icons.

As you can see, the code above generates a simple unordered list (ul), with bullet points. Now, let’s go ahead and add the FontAwesome icons to our HTML. We will be using the generic OS icons available at fontawesome.io. To see a list of the icons, please visit https://fontawesome.io/icons. Here are the icons we will be using:

  • for Windows
  • for Linux
  • for Apple/OSX
  • for Android

If you want to make a navigation menu with different flat icons, feel free to use any of the icons on the FontAwesome icons page. If you have another set of icon’s you prefer, those can be uploaded and used as icon images as well.

To add FontAwesome icons to our navigation menu, insert the following code before the <span> HTML tag for each category:


<i class="fa fa-windows" aria-hidden="true"></i>
<i class="fa fa-linux" aria-hidden="true"></i>
<i class="fa fa-apple" aria-hidden="true"></i>
<i class="fa fa-android" aria-hidden="true"></i>

Now, our complete HTML page should look as follows:


<!DOCTYPE html>
<html>
<head>
	<title>Nav Menu Tutorial</title>
	<link rel="stylesheet" href="style.css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body style="background-color:grey;">
<div>

<nav>
	<ul>
		<li>
			<a href="category/windows/"><i class="fa fa-windows fa-3x" aria-hidden="true"></i>
			<span>Windows</span></a>
		</li>
		<li>
			<a href="category/linux/"><i class="fa fa-linux fa-3x" aria-hidden="true"></i>
			<span>Linux</span> </a>
		</li>
		<li>
			<a href="category/mac/"><i class="fa fa-apple fa-3x" aria-hidden="true"></i></i>
			<span>Mac/OSX</span> </a>
		</li>
		<li>
			<a href="android"><i class="fa fa-android fa-3x"  aria-hidden="true"></i>
			<span>Android</span> </a>
		</li>		
	</ul>
</nav>
</div>

</body>
</html>

That does it for the HTML part of our navigation menu. I saved my HTML file as index.html. You can name it whatever you like. If you run the index.html file, you should get the following page:

navigation list

As you can see, there is nothing special about our page. It’s just a bulleted list with some FontAwesome icons. We are going to change that with CSS. Go ahead and create another file in the same directory as your HTML file and call it style.css.

First, let’s get rid of the ugly bullets and have our list line up side-by-side. This can be done with the following code in your CSS:


nav ul { /*get rid of bullets & define some properties*/
	list-style: none;
	overflow:hidden;
	position:relative;
	width:auto;
	height:300px;
} 

nav ul li {
	float:left; /*allow list contents line up next to each other */
	margin: 10px; /* define margin between list contents */
}


If you run your code now, you should see the following:

navigation bar

Now, we are ready for setup our flat-style “squares” for our navigation menu. This can be done by modifying the display:block and then defining the size as follows:


nav ul li a { /*make squares */
	display: block;
	width:48px; /*set the size of our squares */
	height:48px;
	border-radius:3px;
	/*box-shadow: 2px 2px 10px #000;*/
	color:#fff; /*set the color of our icons
	margin:auto;
}

Please feel free to remove the comment characters (/* */) around box-shadow to add a drop shadow to your navigation menu.

Now, our icons should be white, but the squares themselves have no color. To add color to the squares (or blocks/cubes/boxes or whatever you want to call them), we have to append the following code to our style.css file:


nav ul li:nth-child(1) a {
	background-color: #cc3322;
}
nav ul li:nth-child(2) a {
	background-color: #55AA44;
}
nav ul li:nth-child(3) a {
	background-color: #79AAFF;
}
nav ul li:nth-child(4) a {
	background-color: #ffaa11;
}

color navigation menu

If we open up the index.html file in our browser, our navigation bar should look more like a navigation because it fills the squares with colors. Feel free to change the colors to whatever color you desire by changing the CSS code above. It looks good, however we need to get rid of the text, and only show it when the user points his/her mouse over the icon. Lets go ahead and add some more code to our style.css file.


nav ul li a span {
	font:48px "Verdana";
	text-transform:uppercase;
	position:absolute;
	left:50px; /*defines where to position the text when visible*/
	top:70px;
	display:none; /*hide text*/
}

Now, you should see nothing but your navigation menu icons because we have “hidden” our text (display:none). To see where all your text is, comment out the display:none (or change to display:block) and that should give you the relative position of the text. When you have figured out where you want your text to appear, go ahead and change the property back to display:none.

Let’s setup what happens when the user “hovers” over our navigation menu icons. Append the following code to your CSS file:


nav ul li a:hover span{ /*display text block when user hovers over the icon with a mouse*/
	display:block;
}
/*change display color of text to match icon background */
nav ul li:nth-child(1) a span{
	color: #CC3322;
}
nav ul li:nth-child(2) a span{
	color: #55AA44;
}
nav ul li:nth-child(3) a span{
	color: #79AAFF;
}
nav ul li:nth-child(4) a span{
	color: #ffaa11;
}

As you can see we are using nth-child(#) in our CSS. This selects the individual child of the li (list element) based on the index number inside the parenthesis.

Run the index.html file again in your browser. You should now have a decent looking navigation menu that you created with HTML and CSS only. Feel free to change the code around and make it unique to your website. For example, if you want to make your icons change to a “grey” color when the user hover’s over the FontAwesome Icons with his or her mouse, add the following bit of code:


nav ul li a:hover { 
	color:#ccc;
}

Summary

We have just created a neat little navigation menu by utilizing HTML, CSS and FontAwesome. FontAwesome is a great place for free icons for your website. The html file we created just contained an unordered list and we used all CSS to make it pretty. As stated earlier, please do not hesitate to play around with the code and colors to make the navigation unique to your website.

I used Sublime Text 3 as an IDE to do all my programming above. To setup a Sublime Text IDE, click here.
To setup WebStorm IDE, click here.

Leave a Reply

Your email address will not be published. Required fields are marked *