Sunday, 3 May 2015

Creating a Dropdown Navigation Bar Using just HTML and CSS


 

First of all start with the html

Create the basic syntax

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Drop down Navigation Bar</title>
  <style type="text/css">
  </style>
 </head>
 <body>
 </body>
</html>

Create the Navigation Bar

Inside the body element add the following code:
 <div class='navBar'>
 <ul>
 <li><a href="#">Home</a></li>
    <li><a href="http://shuttereditz.blogspot.com">Shutter</a></li>
    <li><a href="#link1">Link</a></li>
    <li><a href="#dropdown">Dropdown</a>
     <ul class='dropDown'> <!--the drop down menu -->
         <li><a href="http://www.facebook.com/shuttereditz">Facebook</a></li>
            <li><a href="#sub1">Sublink</a></li>
            <li><a href="#sub2">Sublink</a></li>
            <li><a href="#sub3">Sublink</a></li>
        </ul>
    </li>
 </ul>
 </div>

Now create the css

Inside the style tag add the following css code.
.navBar {
 display:block;
 padding:0;
 clear:both !important;
}
.navBar ul{
 list-style-type:none !important;
 display:inline-block !important; /*Removes the indent*/
 margin:0;
 padding:0;
 border-bottom:3px solid #A80059;
 background:#EDEDED;
}
.navBar ul li{
 float:left; /*align the links towards left in navBar Since it is Horizontal*/ 
 display:block;
 transition-duration:1s; /*CSS3 transition effect*/
}

Designing the Navigation links

To Design our navigation links add the following css.
.navBar ul li a{
 display:block;
 padding:5px;
 text-align:center;
 min-width:100px;
 height:30px;
 font-variant:small-caps;
 font-weight:bold;
 text-decoration:none; /*Removes Underline*/
 color:#292929;
 transition-duration:1s;
}
/*You can also give the font-family or any other css styles into this*/

.navBar li:hover >a{
 color:#fff;
 background:#A80059;
}

Creating Dropdown Effect

Let's Create the dropdown effect now. To do this add the following css.
.navBar ul.dropDown {
 height:0px; /*The height and */
 opacity:0; /* the opacity is used to hide the dropdown menu*/
    /*You can also use*/
    /*display:none;*/
    /*but this will alter your transition effect*/
 overflow:hidden !important;/*This also plays a major role in hiding the dropdown*/
    /*YOu don't need to use this if you are using the display:none; option*/
 position:absolute !important; /*This will make the dropdown menu to float over the rest of the web page*/
 transition-duration:1s;
}
.navBar ul.dropDown li{
 float:none !important;/*Removes the float from dropdown menu*/
}
.navBar li:hover >.dropDown{
 height:auto; /*Makes the dropdown menu visible on hovering the list item*/
 opacity:1; /*If you are using display:none; option change this to */
    /*display:inline-block;*/
}
Your Navigation bar is ready Enjoy...
DEMO PDF