In a previous article, I’ve showed you how to make Pure CSS Dropdown Menu. And one of our readers suggested that we add CSS Transitions to it. But I’ve decided not to add it to that tutorial, Instead I’m making a new one!
In today’s article, we’re going to create a CSS DropDown Menu with FontAwesome Icons and CSS3 Effects to make it look more nice.
[tutorial_details]
1. Creating the HTML Markup
For the sake of this tutorial, we’re going to make a navigation menu with 6 menu items, and 2 dropdown section. Firstly we create the unordered list with 7 items in it. :
<nav id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Snippets</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Demos</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>After we’re done, we add the dropdown sections. We do this by adding an other ul inside any of the navigation items, inside the <li></li> tags:
<nav id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">Development</a></li>
<li><a href="#">Graphics</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Logos</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Snippets</a></li>
<li><a href="#">Resources</a>
<ul>
<li><a href="#">Free</a></li>
<li><a href="#">Premium</a></li>
</ul>
</li>
<li><a href="#">Demos</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#"></i>Facebook</a></li>
<li><a href="#"></i>Twitter</a></li>
</ul>
</li>
</ul>
</nav>And we’re done with the most of the HTML Markup we need. We’ll get back to it when we’re adding the icons to the navigation items.
2. Including FontAwesome into our Project
To include FontAwesome into our project, we need to use a CDN link, or we can download the whole package and add it into our project’s folder. Now we’re going to use a CDN link, so go ahead and add the following lines into your <head></head> Section. Note that we’re also adding jQuery. This is because we’ll need it later on.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
3. Adding the Right Icons
To add icons to your navigation menu, all we have to do is to find the correct icon IDs, and warp our anchor tags with the <I class=”icon-class”><a href=”#”>Text</a></i> tag to add it. To find the icons, check this link.
You can also change the Icon’s size by adding a second class to the specific icon’s <i> tag. These tags are the following : fa-lg (33% increase), fa-2x, fa-3x, fa-4x and fa-5x. We use fa-2x on our main navigation bar, and none on the dropdowns.
Here’s how our code will look after we added the right icons to the right navigation items.
<nav id="nav">
<ul>
<li><a href="#"><i class="fa fa-home fa-2x"></i><Br/>Home</a></li>
<li><a href="#"><i class="fa fa-book fa-2x"></i><Br/>Tutorials</a>
<ul>
<li><a href="#"><i class="fa fa-desktop fa-1x"></i>Design</a>
<ul>
<li><a href="#"><i class="fa fa-html5 fa-1x"></i>HTML</a></li>
<li><a href="#"><i class="fa fa-css3 fa-1x"></i>CSS</a></li>
<li><a href="#"><i class="fa fa-code fa-1x"></i>jQuery</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-cog fa-1x"></i>Development</a></li>
<li><a href="#"><i class="fa fa-paint-brush fa-1x"></i>Graphics</a>
<ul>
<li><a href="#"><i class="fa fa-picture-o fa-1x"></i>Photoshop</a></li>
<li><a href="#"><i class="fa fa-cog fa-1x"></i>Illustrator</a></li>
<li><a href="#"><i class="fa fa-code fa-1x"></i>Logos</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-code fa-2x"></i><Br/>Snippets</a></li>
<li><a href="#"><i class="fa fa-folder fa-2x"></i><Br/>Resources</a>
<ul>
<li><a href="#"><i class="fa fa-folder-open fa-1x"></i>Free</a></li>
<li><a href="#"><i class="fa fa-folder-open fa-1x"></i>Premium</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-eye fa-2x"></i><Br/>Demos</a></li>
<li><a href="#"><i class="fa fa-user fa-2x"></i><Br/>About</a></li>
<li><a href="#"><i class="fa fa-envelope fa-2x"></i><Br/>Contact</a>
<ul>
<li><a href="#"><i class="fa fa-facebook fa-1x"></i>Facebook</a></li>
<li><a href="#"><i class="fa fa-twitter fa-1x"></i>Twitter</a></li>
</ul>
</li>
</ul>
</nav>4. Styling the Navigation bar
And finally we add some styling to out navigation menu, to make it look better. I’ll use a simple flat design, but you can make it look however you want.
#nav {
width:100%;
display:block;
background-color:#64abfb;
border-bottom:5px solid #2980b9;
}
#nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
#nav ul:After {
content: "";
display:block;
clear:both;
}
#nav ul li {
display:list-item;
list-style: none;
float:left;
background-color:#64abfb;
}
#nav ul li i {
font-size:25px;
width:30px;
}
#nav ul li a {
display:block;
padding:15px 30px;
color:#FFF;
font-size:20px;
text-decoration:none;
font-family: 'Bree Serif', 'serif';
text-align:center;
}Adding the Dropdown functionality:
/* The Dropdown Styles */
/* =================== */
/* Hide Dropdowns by Default */
#nav ul ul {
display: none;
position: absolute; top: 79px;
}
/* Display Dropdowns on Hover */
#nav ul li:hover > ul {
display:list-item;
}
/* Fisrt Tier Dropdown */
#nav ul ul li {
width:200px;
float:none;
position: relative;
border-bottom:none;
}
#nav ul ul li i {
margin-right:10px;
}
#nav ul ul li a {
padding:15px 20px;
text-align:left;
}
/* Second, Third and more Tiers */
nav ul ul ul li {
position: absolute relative;
top:-79px;
left:200px;
}Now let’s add a marker to the dropdown menu:
#nav li > a:after { content: ' »'; }
#nav > li > a:after {content: ' »'; }
#nav li > a:only-child:after {content: ''; }And finally add the active class, so the user can see on which page he/she is: ( See tutorial here )
#nav ul .active {
color:#FFF;
}And at this point we are done. Your navigation bar should look exactly or similar to the one on our demo page.
Conclusion
Creating a stylish navigation bar using font awesome is pretty easy, right? All you have to do is make a normal html and css navigation menu and add the preferred icons to the specific menu items. If you have any questions, suggestions and/or feedback, feel free to leave a comment down below! I’ll reply to each and every comment and feedback!