Creating menubar using HTML and CSS

Menu bar or navigation bar is a a collection of list items. Menu bar can be either horizontal or vertical. Both types of menubar and menu items are created using HTML list items.  Let us see how we can create menubars easily using HTML and CSS.

Unordered list items are created using <ul> and list items created using <li> . These two HTML tags are used to create menubar and menu items. Within each <li> tag there should be one <a> tag referencing to other links.

Vertical Menubar

Following example shows how to create vertical menubar using <ul> and <li> elements.  Within each <li> elements there is a <a> that is linking to different pages. This is how we create menu items.

[codepen_embed height=300 slug_hash=’waEOXQ’ user=’bhatmahesht’ default_tab=’result’] Vertical Menubar [/codepen_embed]

Creating a simple list is enough to create a vertical menubar .

<ul>
                <li> <a href="#"> Home </a> </li>
                <li> <a href="#"> About </a> </li>
                <li> <a href="#"> Products </a> </li>
                <li> <a href="#"> Contact </a> </li>
</ul>

 Horizontal Menubar

Following example shows how to create a horizontal menubar using HTML and CSS.

[codepen_embed height=300 slug_hash=’bdxaze’ user=’bhatmahesht’ default_tab=’result’] Horizontal Menubar [/codepen_embed]

If you look at the code, some amount of CSS has been added to make list items to display horizontally and display as menubar.

The first is list-style-type is set to none.

div.horizontal_menu ul{
    list-style-type: none;
    margin:5px;
    padding:5px;
    display:block;
}

Secondly instead of arranging list items as block, they are made to arrange as inline.

div.horizontal_menu li{
    float:left;
    margin:0px;
    padding:4px;
    display:inline;
    background-color:yellow;
}

Thirdly to beautify the menu elements <a> tags are displayed as block and given a background colour.

div.horizontal_menu a {
    display:block;
    background-color: greenyellow;
 }

You can play with CSS to alter the design of menus in many different ways.  As each website has atleast one menubar it is always useful to know how to create menubar and play with them to create wonderful menubar designs.