Post
Ask Question

Creating a Flat Style Navigation Menu Using CSS

Introduction

 
In my last article Creating Some Impressive Buttons Using CSS, I designed some stylish buttons using CSS without any image. In this article, we will make a menu with some stylish hover effects. These days flat design navigation has become so popular that we can't neglect this beautiful design. If you have some doubt then have a look at some of these websites with the same concept:
I hope you like these design concepts. So in this article, we'll create a menu using some clean icons and some bright solid colors. We'll be using some well-known CSS techniques also. 
 

The Game Plan

 
Before building a menu we need some clean icons, here we used some simple icons courtesy of the iconfinder.com website and we'll be using a "Kavoon" font via Google Web Fonts. Whenever the user hovers the icon box the text label emerges on the right side.
 

The HTML Structure

 
Before we start working with the styling we need to build the structure of the menu in HTML. We can use the HTML5 nav element that is now widely supported by nearly every browser.
 
HTML
  1. <!DOCTYPE html>  
  2.    
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title>Menu</title>  
  6.     <link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css' />  
  7.     <link href="StyleSheet.css" rel="stylesheet" />  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <div id="menu">  
  12.         <nav>  
  13.             <ul>  
  14.                 <li>  
  15.                     <a href="#">  
  16.                         <span>Home</span>  
  17.                     </a>  
  18.                 </li>  
  19.                 <li>  
  20.                     <a href="#">  
  21.                         <span>About Us</span>  
  22.                     </a>  
  23.                 </li>  
  24.                 <li>  
  25.                     <a href="#">  
  26.                         <span>Blog</span>  
  27.                     </a>  
  28.                 </li>  
  29.                 <li>  
  30.                     <a href="#">  
  31.                         <span>Work</span>  
  32.                     </a>  
  33.                 </li>  
  34.                 <li>  
  35.                     <a href="#">  
  36.                         <span>Contact Us</span>  
  37.                     </a>  
  38.                 </li>  
  39.             </ul>  
  40.         </nav>  
  41.     </div>  
  42.     </form>  
  43. </body>  
  44. </html> 
In the code above we used basic HTML code that includes doctype, title and link to the CSS file that we'll use later. We have attached stylesheet and the "Kavoon" font via Google Webfonts. The structure of the navigation menu starts from the nav element, inside which we used a basic unordered list. Every list item has a link using an anchor tag that is wrapped in a "span" element.
 
Output
 
1.PNG
 

The CSS Styling

 
As we can see, we have an unordered list with bullets that are not looking good and we don't want these things. We need to remove those bullets and also need to float each <li> side by side. To solve this we can use this CSS styling
  1. nav ul{  
  2.     list-style: none;  
  3.     overflow: hidden;  
  4.     position: relative;  
  5. }  
  6.   
  7. nav ul li {  
  8.     float: left;  
  9.     margin: 5px 25px 5px 5px;  
  10. } 
Output
 
2.PNG
 
So, the bullets are removed and our list is appearing side by side. But now we need to provide some icons. Before adding icons we need to give height and width of 128px to each list element and after that, we need to convert it into a block from an inline element by using "display: block;".
 
Now we can use icons as a background image to each li element that we downloaded from iconfinder.com.
  1. nav ul li a {  
  2.     display: block;  
  3.     width: 128px;  
  4.     height: 128px;  
  5. }  
  6.   
  7. nav ul li:nth-child(1) a {  
  8.     background-image: url(iconHome.png);  
  9.     background-repeat: no-repeat;  
  10. }  
  11.   
  12. nav ul li:nth-child(2) a {  
  13.     background-image: url(icon_about.png);  
  14.     background-repeat: no-repeat;  
  15. }  
  16.   
  17. nav ul li:nth-child(3) a {  
  18.     background-image: url(iconBlog.png);  
  19.     background-repeat: no-repeat;  
  20. }  
  21.   
  22. nav ul li:nth-child(4) a {  
  23.     background-image: url(icon_port.png);  
  24.     background-repeat: no-repeat;  
  25. }  
  26.   
  27. nav ul li:nth-child(5) a {  
  28.     background-image: url(iconContact.png);  
  29.     background-repeat: no-repeat;  
  30. } 
Output
 
3.png
 
We now see that our menu is looking good but it's not over yet, we need to use the hover effect on each element and this can be done by targeting the "span" element that is added to each anchor. But first, we need to give the font styling that we take from Google WebFont and also we use the "text-transform" property to make these fonts in uppercase.
 
CSS
  1. nav ul li a span {  
  2.     font: 45px "Kavoon", Arial;  
  3.     position: absolute;  
  4.     text-transform: uppercase;  
  5.     left: 830px;  
  6.     top: 100px;  
  7.     display: none; 
Output
 
4.png
 
We now see that all the labels are visible, but we need to hide them, so we can use "display: none;" to hide the text. Then use the "display: block;" property. Now only one thing remains to do, that is to use the ":nth-child" in which we give color to each list item.
 
CSS
  1. nav ul li a:hover span {  
  2.         display: block;  
  3. }  
  4.   
  5. nav ul li:nth-child(1) a span {  
  6.     color: #fe9b00;  
  7. }  
  8.   
  9. nav ul li:nth-child(2) a span {  
  10.     color: #000000;  
  11. }  
  12.   
  13. nav ul li:nth-child(3) a span {  
  14.     color: #fa2e09;  
  15. }  
  16.   
  17. nav ul li:nth-child(4) a span {  
  18.     color: #0d27f1;  
  19. }  
  20.   
  21. nav ul li:nth-child(5) a span {  
  22.     color: #50f604;  
  23. } 
Output
 
CSS MENU.png
 
 
Now our stylish flat menu is ready to use. Let's have a look at the final design
 
 
6.png


Similar Articles