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 website 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:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Menu</title>
<link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css' />
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div id="menu">
<nav>
<ul>
<li>
<a href="#">
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<span>About Us</span>
</a>
</li>
<li>
<a href="#">
<span>Blog</span>
</a>
</li>
<li>
<a href="#">
<span>Work</span>
</a>
</li>
<li>
<a href="#">
<span>Contact Us</span>
</a>
</li>
</ul>
</nav>
</div>
</form>
</body>
</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 is 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:
nav ul{
list-style: none;
overflow: hidden;
position: relative;
}
nav ul li {
float: left;
margin: 5px 25px 5px 5px;
}
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 a 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.
nav ul li a {
display: block;
width: 128px;
height: 128px;
}
nav ul li:nth-child(1) a {
background-image: url(iconHome.png);
background-repeat: no-repeat;
}
nav ul li:nth-child(2) a {
background-image: url(icon_about.png);
background-repeat: no-repeat;
}
nav ul li:nth-child(3) a {
background-image: url(iconBlog.png);
background-repeat: no-repeat;
}
nav ul li:nth-child(4) a {
background-image: url(icon_port.png);
background-repeat: no-repeat;
}
nav ul li:nth-child(5) a {
background-image: url(iconContact.png);
background-repeat: no-repeat;
}
Output:
![3.png]()
We now see that our menu is looking good but its 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
nav ul li a span {
font: 45px "Kavoon", Arial;
position: absolute;
text-transform: uppercase;
left: 830px;
top: 100px;
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 a color to each list item.
CSS:
nav ul li a:hover span {
display: block;
}
nav ul li:nth-child(1) a span {
color: #fe9b00;
}
nav ul li:nth-child(2) a span {
color: #000000;
}
nav ul li:nth-child(3) a span {
color: #fa2e09;
}
nav ul li:nth-child(4) a span {
color: #0d27f1;
}
nav ul li:nth-child(5) a span {
color: #50f604;
}
Output
![CSS MENU.png]()
Now our stylish flat menu is ready to use. Let's have a look at the final design:
![6.png]()