Make A Good Looking Navigation Menu ( Step by Step Tutorial )

Unknown
Menu bar simple

If you are searching on Google for a professional navigation bar which attract visitors and fit perfectly on your blog theme then you are at right place. Most of the people, who are just new to web designing or not understand enough web designing find difficulty to integrate navigation bar with blog theme.

So the tutorial given below comprises the basic idea to make menu bar so that beginner web designers can make their own menu bar according to their choice. You can choose font, color, background-color, border etc. like property freely. This tutorial uses simple CSS property and HTML tags. Or you can choose the high quality navigation bar created by our team

The four high quality navigation menu given above can not be completely customized by beginner web designer.

Hence if you want to make your own menu bar then move to the tutorial

How To Make Navigation Menu Bar:-

We will make navigation menu with the help unordered list <ul>, you can make your blog to look from attractive with list from here.

The first thing is to create an HTML unordered list <ul> like this
<ul id="menubar">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Service</a></li> 
   <li><a href="#">Contact</a></li>
</ul>

It will create following output
ul-simple
Now add some CSS property to give it a look of professional menu bar.
#menubar
  {
    list-style-type:none;
    margin:0; 
    padding:0;
    overflow:hidden;
  }
It will remove all circles which is at starting of list.
Next thing is to display these list inline by following code.
#menubar li
   {
     float:left;
     display:inline;
   }
 Set link property of list with following code.
#menubar li a, #menubar li a:link, #menubar li a:visited
   {
     display:block;
     width:120px;
     font-weight:bold;
     color:#FFFFFF;
     background-color:#98bf21;
     padding:4px;
     text-align:center;
     text-decoration:none;
   }


Figure given above explain the full working of above code.

To change the background color on mouse over
#menubar li a:hover, #menubar li a:active
  {
   background-color:#7A991A;
  }
The overall CSS properties will look like this
#menubar
  {
    list-style-type:none;
    margin:0; 
    padding:0;
    overflow:hidden;
  }

#menubar li
   {
     float:left;
 
   }
#menubar li a, #menubar li a:link, #menubar li a:visited
   {
     display:block;
     width:120px;
     font-weight:bold;
     color:#FFFFFF;
     background-color:#98bf21;
     padding:4px;
     text-align:center;
     text-decoration:none;
   }

#menubar li a:hover, #menubar li a:active
  {
   background-color:#7A991A;
  }

Have you seen the result now get ready to make your good looking menu bar for blog.
If you enjoyed this article, you might also like..

Followers