Navigation Menu Bar Design using HTML and CSS Tutorial………

Posted 1:01 pm by muni & filed under CSS, HTML5, PHP.

When you do application with great quality back end program, but font-end design was not upto the client satisfactions. Then you can’t make them satisfied after that. So here one of the great technique to satisfy your client in the great way is make your application or website more attractive.

Here is simple nice looking navigation bar, I had designed with html and css.
Step 1:

Using an unordered list tag I listed all the menu items needed.

<ul class="nav">
<li><a href="#home">Home</a>
<li><a href="#about">About Us</a>
<li><a href="#product">Product</a>
<li><a href="#services">Services</a>
<li><a href="#contact">Contact Us</a>
</ul>

Step 2:
Then I used css style to make navigation bar look more attractive.

By default the unordered list is vertical. To make horizontal use following css property in your program.

.nav{
 width:100%;
 float:left;
 background-color:#00F;
 padding:0;
 margin:0;
 border-bottom:1px solid #fff;
 border-top:1px solid #fff;
 list-style-type:none;
 }
 .nav li {
 float: left; }

where list-style-type:none; removes bullets in the unordered list, and border-bottom, border-top are sets 1px border top and bottom of the navigation bar.
float:left – align navigation to the left.

.nav li a{
  display:block;
  text-transform:uppercase;
  padding: 28px 45px;
 text-decoration: none;
 font-weight: bold;
 color: #fff;
 border-right: 1px solid #ccc;
  }

where we set font property to bold, decoration-none and uppercase, and as well set font color.

.nav li a:hover {
 color: #c00;
 background-color: #fff; }

when hover over navigation bar to show changes on the element in the navigation bar we set different font color and background color.

Here is full customized css style code.

<style type="text/css">
.nav{
 width:100%;
 float:left;
 background-color:#00F;
 padding:0;
 margin:0;
 border-bottom:1px solid #fff;
 border-top:1px solid #fff;
 list-style-type:none;
 }
 .nav li {
 float: left; }
 .nav li a{
  display:block;
  text-transform:uppercase;
  padding: 28px 45px;
 text-decoration: none;
 font-weight: bold;
 color: #fff;
 border-right: 1px solid #ccc;
  }
  .nav li a:hover {
 color: #c00;
 background-color: #fff; }
</style>

.