simple-top-horizontal-nab-menu-creation

Simple horizontal nab menu:

Menu is most impotent for every website.using menu a website viewer can travel every page in your website.Thus, suitable menu can increase your website page view and popularity.

you can design different type menu like top horizontal menu,side,responsive menu.you should design as per your requirement.

In this session i am going to show you how can design a Horizontal menu.

I am use simple html tag. this html are:

<ul>
<li><a href="#">Link1</a></li>

<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>

when you run this code then it look like a list.but you need manipulate and make a simple horizontal menu using css.

css code are:

 <style type="text/css">        

    ul

    {

        list-style-type:none;

        margin:0;

        padding:0;

        background-color:green;

        overflow:hidden;

    }     
   li{
     float:left
      }
li a {

        display:block;

        color:White;

        text-decoration:none;

        padding:14px 16px;

        text-align:center;

     }

     ul li :hover

     {

         background-color:White;

         color:Black;

     }  

    </style>

Now if you use this code then your menu looking better. try it.

1.convert horizontal (top) menu to vertical (side):

using some minor changes on html and css code you  can convert your horizontal menu to side menu.you have to your html value into a div tag which having a attribute width="200" 

<div style="width:200px;">

<ul>
<li><a href="#">Link1</a></li>

<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>

</div>

css code are:


 <style type="text/css">        

    ul

    {

        list-style-type:none;

        margin:0;

        padding:0;

        background-color:Red;

        overflow:hidden;

    }     

  li a {

        display:block;

        color:White;

        text-decoration:none;

        padding:14px 16px;

        text-align:center;

     }

     ul li :hover

     {

         background-color:White;

         color:Black;

     }  


    </style>



2.How to remove underline from a tag using css.



using a property text-decoration    i am alrady use in this session,if you not use text-decoration   property value none. then a underline automatically come.




 li a {        

        text-decoration:none;

      }



Download the Sample Project for Visual Studio click below.



Download sample project  for notepad.