Css navigation bar

navigation is important for any web site.

menu is an important element of web site.menu has to be user-friendly and match the design in order to facilitate navigation.

for a web site we can create two types of navigation bars.

  • vertical navigation menu.
  • horizontal navigation menu.

there are two way to create a horizontal navigation bar.using inline or floating list items.

the complete code for simple horizontal navigation bar.

   <html>
   
        <head>
        
            <style   type="text/css" >
            
          ul#list-nav { list-style:none ;
          
                 margin:20px 20px ;
                 
      			 padding:8px 8px ;
      			 
                 }
                 
       ul#list-nav  li{  display:inline ;  }
       
       ul#list-nav  li  a { text-decoration:none ;
       
               padding:10px 10px ;
               
               margin : 1px 1px;
               
               width:100px ;
               
               background-color:#485e49 ;
               
               color:#eee ;
               
               font-weight: bold;          
               
               
      text-align:center;
      
      border-left:1px solid #fff;}
      
      ul#list-nav  li a:hover{ 
      
      text-decoration:underline ;
      
      color:red ; }
      
 </style>  </head>
      
    <body>
    
      <ul  id="list-nav" >
      
      <li> <a href="http//www.google.com" >home  </a> </li>
      
      <li> <a href="#$" >about us  </a> </li>
      
      <li> <a href="#$" >services  </a> </li>
      
      <li> <a href="#$" >products  </a> </li>
      
      <li> <a href="#$" >contact  </a> </li>
      
      </ul>
      
 </body>
     
</html>

Css Navigation - vertical menu.

the  complete code for simple vertical navigation bar using <ul> and <li> elements.

      <html>
      
      <head>
      
      <style   type="text/css" >
      
      ul#list-nav { list-style:none ;
      
       margin:0px ;
       
       padding:0px ;
       
       width:105px ; }
       
       height:151px ; }
       
      ul#list-nav  li  a { text-decoration:none ;
      
      padding:5px 0px ;
      
      width:100px ;
      
      background-color:#485e49 ;
      
      color:#eee ;
      
      display:block ;
      
      text-align:center ;
      
      border-left:1px solid #fff ; }
      
      ul#list-nav  li a:hover{  text-decoration:underline ;
      
      color:pink ; }
      
      </style>  </head>
      
      <body>
      
      <ul  id="list-nav" >
      
<li> <a href="http//www.google.com" >home  </a> </li>      <li> <a href="#$" >about us  </a> </li>
      
      <li> <a href="#$" >services  </a> </li>
      
      <li> <a href="#$" >products  </a> </li>
      
      <li> <a href="#$" >contact  </a> </li>
      
      </ul>
      
      </body>
      
</html>