Please support us by disabling ad blocker for smarttutorials.net ...

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

Posted by & 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>

web menu design-css-html5-html

.

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]smarttutorials.net

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!