#building css menu

Html / Css menus are most popular web site parts for a few years and with html5 and javascript libraries there are lots of visiual tricks for html / css menus. But base logic of building a html / css menu is hiding object with display none property and show it on mouse over event with changing display property value to "block" and the important part is alignment of sub menu item (child div).

Now first check html menu part:

<div class="main-navigation">                     <ul>                         <li><a href="#">Home</a></li>                         <li><a href="#">About Us</a></li>                         <li onMouseOver="javascript:showSubItem(1);" onMouseOut="javascript:hideSubItem(1);"><a href="#">Solutions</a>                             <div id="sub-item1" class="sub-item">                                Sub item 1 content                             </div>                         </li>                         <li onMouseOver="javascript:showSubItem(2);" onMouseOut="javascript:hideSubItem(2);"><a href="#">Referances</a>                             <div id="sub-item2" class="sub-item">                                 Sub item 2 content                             </div>                         </li>                         <li><a href="#">Contact</a></li>                     </ul>                 </div>

You see it's a standart menu.Please Focus on javascript functions on mouse over event. Later we'll see these functions codes.

Now Let's check css codes :

.main-navigation ul{     list-style: none outside none;     margin:0 auto;     } .main-navigation ul  li {     position:relative;     float:left;     margin:0 auto;     z-index:999;     } .main-navigation ul  li a {     position:relative;     float:left;     margin:0 auto;     font-size:15px;     font-family:arial, sans-serif;     color:#fff;     padding:7px 10px;     text-decoration:none;    

}

.sub-item {    position:absolute;     left:0px;     top:32px;     display:none;     width:300px;     height:150px;     background-color: #8894AA;     padding:0px;     vertical-align:bottom;     color:#fff;     border:1px solid #efefef;     moz-border-radius: 15px;     order-radius: 15px;     }

Important point is that we have to use properties typed bold in sub item css class. We need position absolute, top, left values to align child horizontally and vertically in parent div and also vertical-align for for base line. Careful about display property. We need display value none. We'll change it to block with javascript.

You can check some other options for vertical align property in http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Finally code javascript mose over and out javascript functions

<script type="text/javascript">                         function showSubItem(i)             {                                    var myElement;                 var myElementId;                 myElementId = 'sub-item'+i;                 myElement = document.getElementById(myElementId);                 myElement.style.display='block'; // changing display property value                                                 }                             function hideSubItem(i)             {    var myElement;                 var myElementId;                 myElementId = 'sub-item'+i;                 myElement = document.getElementById(myElementId);                 myElement.style.display='none';                                 }                     </script>

It's a simple way to show and hide sub items in menu. You can use some other jquery functions like fadeIn, fadeOut or toggle and some other functions to make your menu more visual.

You can search my blog for jquery fadeIn, fadeOut tutorial.

Thanks for reading.