HTML, CSS Menu Navigation Bar Example code

Professional attractive Html, CSS  Menu Navigation Bar Example with source code tutorial
Beautiful hover effect menu bar, with css transition effects sample code.
                                         sample end result :-

HTML, CSS  Menu Navigation Bar Source code

                                         Drop-down  Navigation bar
                                         Navigation bar tutorial with simple example code
Example 1 

HTML  Code :

<div >
  <ul id="button">
    <li><a href="#" >Home</a></li>
    <li><div class="gap"></div></li>
    <li><a href="#">About</a></li>
    <li><div class="gap"></div></li>
    <li><a href="#">Services</a></li>
    <li><div class="gap"></div></li>
    <li><a href="#">F.A.Q</a></li>
     <li><div class="gap"></div></li>
    <li><a href="#">Help</a></li>
    <li><div class="gap"></div></li>  
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

CSS Code :

#button { padding: 0;      }
#button li {
display: inline;
      -moz-border-radius-topleft: 12px;
      -webkit-border-top-left-radius:12px;
      }
#button li a {
font-family: Arial;
font-size:11px;
text-decoration: none;
float:left;
   width:;
   height:20px;
padding: 10px;
color: #fff;

     
 /*Gradient*/

background-image: linear-gradient(bottom, rgb(122,193,255) 17%, rgb(96,123,189) 87%);
background-image: -o-linear-gradient(bottom, rgb(122,193,255) 17%, rgb(96,123,189) 87%);
background-image: -moz-linear-gradient(bottom, rgb(122,193,255) 17%, rgb(96,123,189) 87%);
background-image: -webkit-linear-gradient(bottom, rgb(122,193,255) 17%, rgb(96,123,189) 87%);
background-image: -ms-linear-gradient(bottom, rgb(122,193,255) 17%, rgb(96,123,189) 87%);
}
#button li:first-child a{
    -moz-border-radius: 15px 0px 0px 15px;
    -webkit-border-radius: 15px 0px 0px 15px;
    border-radius: 15px 0px 0px 15px;
}
#button li a:hover {
      background-color: #2586d7;
margin-top:-3px;
       color:#FFF;
padding-bottom:12px;
     -moz-box-shadow: 0 -5px 10px #777; -webkit-box-shadow: 0 -5px 10px #777;
   /*Transition*/
     -webkit-transition: All 0.5s ease;
     -moz-transition: All 0.5s ease;
     -o-transition: All 0.5s ease;
     -ms-transition: All 0.5s ease;
     transition: All 0.5s ease;
/*Gradient*/
background-image: linear-gradient(bottom, rgb(211,191,230) 20%, rgb(210,128,214) 86%);
background-image: -o-linear-gradient(bottom, rgb(211,191,230) 20%, rgb(210,128,214) 86%);
background-image: -moz-linear-gradient(bottom, rgb(211,191,230) 20%, rgb(210,128,214) 86%);
background-image: -webkit-linear-gradient(bottom, rgb(211,191,230) 20%, rgb(210,128,214) 86%);
background-image: -ms-linear-gradient(bottom, rgb(211,191,230) 20%, rgb(210,128,214) 86%);
}
   

Example 2

Html

<div id="menu">
<ul>
<li><a href="#" title="Home" class="active">Home</a></li>
<li><a href="#" title="Blog" >Blog</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Register">Register</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
</div>

CSS

#menu { margin:40px 0 0 150px; }
#menu ul { list-style:none; }
#menu ul li { display:inline; float:left; margin-bottom:20px; }
/* :first-child pseudo selector with rounded top left corner */
#menu ul li:first-child a { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius:12px; }
/* :last-child pseudo selector with rounded top right corner */
#menu ul li:last-child a { -moz-border-radius-topright: 12px; -webkit-border-top-right-radius:12px; }
/* background color set to RGBA, with opacity on 0.5 and also using text-shadow */
#menu ul li a { padding:20px; background: rgba(255,138,30,0.3); text-decoration: none; font: bold 14px Helvetica, Sans-Serif; letter-spacing: -1px; color: #402e16;
text-shadow: #eee 0px 0px 2px; }
/* hover state shows a linear gradient and opacity it brought down to 0.9 and also shows a very slight grey gradient on top */
#menu ul li a:hover { -moz-box-shadow: 0 -5px 10px #777; -webkit-box-shadow: 0 -5px 10px #777;
background: -webkit-gradient(
linear, right bottom, left top, color-stop(0, rgb(237,227,112)), color-stop(0.72, rgb(255,173,10))) !important;
background: -moz-linear-gradient(
right bottom, rgb(237,227,112) 0%, rgb(255,173,10) 72%) !important;
background-color:rgb(255,173,10) !important;
-moz-opacity:.90; filter:alpha(opacity=90); opacity:.90; }
#menu ul li a.active { background: rgba(255,138,30,0.8) !important; }

Related Post:

       Drop-down  Navigation menu
       Navigation bar tutorial with simple example code
________________________________________________________________________________