MENUS (TUTORIAL)
HORIZONTAL MENUS
Horizontal menus can be easily created with use of an unordered list and anchor tags.
Simple Horizontal Menu:
<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;}
