HORIZONTAL MENUS TUTORIAL

MENUS (TUTORIAL)

HORIZONTAL MENUS

Horizontal menus can be easily created with use of an unordered list and anchor tags.

Simple Horizontal Menu:                               

A horizonatal menu with no sub-menu or dropdowns is the easiest to create. First create an unordered list (ul) with the menu items as the list-items (<li>). Inside the list-items create anchor tags (<a>) to hold the links. Here is the html for that:

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

This creates a simple list of items. Now the only thing left to make it look like a horizontal menu is to add css to the html. To make the list horizontal add list-style-type : none; the list horizon to the <ul> style. To make it look as above, below is the final html and css:

Html:

<div class="horizontal1">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Contact</a></li>

<li class="selected"><a href="#">About Us</a></li>

<li><a href="#">Profile</a></li>

</ul>

</div>

CSS:

.horizontal1{
  display: inline-block;
}

.horizontal1 ul{
  font-size: 14px;
  width:100%;
  padding:0;
  margin:0;
  list-style-type:none;
}

.horizontal1 a{
  float:left;
  width:6em;
  text-decoration:none;
  padding:7px 5px 5px 5px;
  background: #232323;
  color: #FFF;
  border-bottom: solid thick #232323;
}

.horizontal1 a:hover {
  background-color: #1b7d5a;
  border-bottom: solid thick #1b7d5a;
}

.horizontal1 a:visited {
  color: #FFF;
}

.horizontal1 li {display:inline;}

.horizontal1 .selected a{
  border-bottom: solid thick #1b7d5a;
}


Horizontal Menu With Dropdown:     

A horizontal menu with dropdowns can be created using multiple unorderd lists (<ul>). Required depth can be achieved as per needed. Below is the required html code:

Html:

<div class="horizontal2">

<ul>

<li><a href="#" class="top_parent">Item 1</a>

<ul>

<li><a href="#">Item 1.1</a></li>

<li><a href="#" class="parent">Item 1.2</a>

<ul>

<li><a href="#">Item 1.2.1</a></li>

<li><a href="#">Item 1.2.2</a></li>

<li><a href="#">Item 1.2.3</a></li>

</ul>

<li><a href="#">Item 1.3</a></li>

</ul>

</li>

</ul>

<ul>

<li class="selected"><a href="#" >Item 2</a></li>

</ul>

<ul>

<li><a href="#" >Item 3</a>

<ul>

<li><a href="#">Item 3.1</a></li>

<li><a href="#" class="parent">Item 3.2</a></li>

<li><a href="#">Item 3.3</a></li>

</ul>

</li>

</ul>

<ul>

<li><a href="#" >Item 4</a></li>

</ul>

</div>

CSS:

.horizontal2

{

  font-size: small;

  font-family: arial, helvetica, sans-serif;

  display: inline-block;

}

    

.horizontal2 a

{

  text-align: center;

  display:block;

  white-space:nowrap;

  margin:0;

  padding: 0.3em;

}

  

.horizontal2 a:link, .horizontal2 a:visited, .horizontal2 a:active 

{

  color: white;

  background-color: #232323;   

  text-decoration:none;

  font-size: 15px;

}

  

.horizontal2 a:hover          

{

  background-color: #1b7d5a;

} 

  

.horizontal2 a.top_parent, .horizontal2 a.top_parent:hover 

{

  background-position: right center;

  background-repeat: no-repeat;

}

  

.horizontal2 a.parent, .horizontal2 a.parent:hover  

{

  background-position: right center;

  background-repeat: no-repeat;

}

.horizontal2 ul

  {

  list-style:none;

  margin:0;

  padding:0;

  float:left;

  width:9em; 

  }

.horizontal2 .selected a{

  border-bottom: solid thick #1b7d5a;

}

.horizontal2 li

{

  position:relative;

  min-height: 1px;    

  vertical-align: bottom;   

}

.horizontal2 ul ul

{

  position:absolute;

  z-index:500;

  top:auto;

  display:none;

  padding: 1em;

  margin:-1em 0 0 -1em;

}

.horizontal2 ul ul ul

{

  top:0;

  left:100%;

}

div.horizontal2 li:hover

{

  cursor:pointer;

  z-index:100;

}

div.horizontal2 li:hover ul ul,

div.horizontal2 li li:hover ul ul,

div.horizontal2 li li li:hover ul ul,

div.horizontal2 li li li li:hover ul ul

{display:none;}

div.horizontal2 li:hover ul,

div.horizontal2 li li:hover ul,

div.horizontal2 li li li:hover ul,

div.horizontal2 li li li li:hover ul

{display:block;}