Apr 7, 2013

An elegant navigation menu bar using css 3


In this post we will try to create an elegant navigation menu bar as shown in the image above as well as explaining the css tricks used to achieve the same.

Create an unordered list of menu and sub menu items
<html>
<body>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a> 
       <ul>
          <li><a href="#">Education</a></li>
          <li><a href="#">Consultation</a></li>
          <li><a href="#">Training</a></li>
          <li><a href="#">Recruitment</a></li>
        </ul>
       </li>
      <li><a href="#">Products</a> 
       <ul>
          <li><a href="#">eShop</a></li>
          <li><a href="#">ePlanner</a></li>
          <li><a href="#">eProjectManagement</a></li>
          <li><a href="#">eBiz</a></li>
        </ul>
      </li>
      <li><a href="#">Careers</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
</body>
</html>

Styling the unordered list
Step 1. Create a div block with id navblock around the ul list.
Step 2. Add list-style-type: none in the css rule for navblock
<html>
<head>
<style type="text/css">
body {
 font-family: 'Verdana';
}
#navblock ul{
 list-style-type: none;
}
</style>
</head>
<body>
<div id="navblock">
    <ul>
      <!-- Content trimmed for space and readability -->
    </ul>
</div>
</body>
</html>
This removes all the bullets before the text links and changes the font family to Verdana.
Making the list horizontal
Step 1. Using the id selector nav for the top level ul item, create a new rule #nav > li with the following properties float: left; and display: inline. This rule #nav > li is applied to only child level elements of the ul element. So, it affects only the top level menu items and the items are aligned horizontally.
Step 2. Reset all the padding and margin within the div navblock to 0px to align all the content to the left and the top.
#navblock ul{
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}
#nav > li {
 float: left;
 display: inline;
}
Now our navigation menu looks like as below. Not so appealing :(

Positioning the sub menus
Currently the size of the top level menu is determined by the size of the sub menu items. If the length of the text in the sub menu item is large, the top level menu size also increases accordingly. To handle this we specify the rule position: absolute in the sub unordered list menus as below
#nav ul {
 position: absolute;
}
You will see some overlapping of the text in the sub menus as below. Bear with me, this is still not good.

Hiding the sub menus and adding the hover effect on top level menu items
Step 1. Set the display property to none under the rule #nav ul
#nav ul {
 position: absolute;
 display: none;
}
Step 2. Add a new rule #nav li:hover ul which sets the display property back to block
#nav li:hover ul {
  display: block;
}
We can see some effects rolling up now. The sub menus show up when you hover over the top links.

Beautifying the links
Step 1. Add rules for anchor tag within the nav menu using the rule #nav a
#nav a {
  text-decoration: none;
  color: inherit;
  font-size: 0.8em;
    padding: 2px 5px;
}
Step 2. Decorating the sub menu items by setting properties under #nav li rule. Here, we have also added some fancy properties box-shadow, border-radius to demonstrate new effects which can be achieved through css 3.
#nav li {
  box-shadow: 1px 1px 2px #333;
  border-radius: 3px 7px;
  border: 1px solid #ccc;
  margin: 3px 5px;
  padding: 2px 0px;
  color: #666;
}
Step 3. Some additional formatting for positioning the sub menus.
#nav li li{
  position: relative;
  left: -1px;
  margin: 4px 0px;
  padding: 2px 0px;
  border: 1px solid #ccc;
}
Step 4. Changing background color when hovering over the menus.
#nav li:hover {
  background-color: #ccc;
  color: #fff;
}
Step 5. Some margin fixes to the #nav ul so that sub menus and top level menus are shown separately
#nav ul {
 margin-top: 3px;
}
Your final navigation bar now appears super cool.
The Complete Code
<html>
<head>
<style type="text/css">
body {
 font-family: 'Verdana';
}
#navblock ul{
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}
#nav > li {
 float: left;
 display: inline;
}
#nav ul {
 margin-top: 3px;
 position: absolute;
 display: none;
}
#nav li:hover ul {
 display: block;
}
#nav a {
  text-decoration: none;
  color: inherit;
  font-size: 0.8em;
    padding: 2px 5px;
}
#nav li {
  box-shadow: 1px 1px 2px #333;
  border-radius: 3px 7px;
  border: 1px solid #ccc;
  margin: 3px 5px;
  padding: 2px 0px;
  color: #666;
}
#nav li li{
  position: relative;
  left: -1px;
  margin: 4px 0px;
  padding: 2px 0px;
  border: 1px solid #ccc;
}
#nav li:hover {
  background-color: #ccc;
  color: #fff;
}
</style>
</head>
<body>
 <div id="navblock">
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a> 
       <ul>
          <li><a href="#">Education</a></li>
          <li><a href="#">Consultation</a></li>
          <li><a href="#">Training</a></li>
          <li><a href="#">Recruitment</a></li>
        </ul>
       </li>
      <li><a href="#">Products</a> 
       <ul>
          <li><a href="#">eShop</a></li>
          <li><a href="#">ePlanner</a></li>
          <li><a href="#">eProjectManagement</a></li>
          <li><a href="#">eBiz</a></li>
        </ul>
      </li>
      <li><a href="#">Careers</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
 </div>
</body>
</html>

Note: The above has been tested on Chrome and firefox. The script has not been verified on IE versions
Read more ...

0 comments
Subscribe to: Posts (Atom)