javascript - How to create a horizontal sliding sub-menu panel for my site? -

i want create horizontal sliding sub-menu site. when click on menu item 2 sub-menu panel show/hide sliding function or that.

just example, it's not i'm copyrighting or - godaddy.com navigation menu.

here - jsfiddle

there few things want in menu -

1. fades out whole page when menu expand.

2. when click anywhere else sub-menu on fade out page, sub-menu panel auto collapse.

3. and collapse when click same menu item again.

4. it slideup , slidedown smoothly.

html

<div id="header">     <div id="main-header" class="center">         <div id="menu">             <ul>                 <li><a href="#">menu item 1</a>                 </li>                 <li><a href="#" id="button" onclick="showhide()">menu item 2</a>                 </li>                 <li><a href="#">menu item 3</a>                 </li>                 <li><a href="#">menu item 4</a>                 </li>                 <li><a href="#">menu item 5</a>                 </li>                 <li><a href="#">menu item 6</a>                 </li>             </ul>         </div>     </div> </div> <div id="sub-menu"><a href="#">sub menu panel</a> </div> <div id="container"></div> <div id="footer"></div> 

css

body {     font-family: arial, helvetica, sans-serif;     position: absolute;     width: 100%;     height: auto;     margin: 0px;     padding: 0px; } {     text-decoration: none; } .center {     margin-right: auto;     margin-left: auto; } #header {     background-color: #333333;     position: relative;     width: 100%;     height: auto;     top: 0px; } #main-header {     position: relative;     width: 1200px;     height: 115px; } #menu {     position: absolute;     width: 100%;     top: 85px; } #menu ul {     margin: 0px;     padding: 0px; } #menu ul li {     float: left;     list-style: none; } #menu ul li {     font-size: 16px;     color: #ffffff;     display: block;     clear: both;     margin-right: 40px; } #menu ul li a:hover {     color: #99ff00; } #sub-menu {     font-size: 24px;     background-color: #eee;     position: relative;     width: 100%;     height: 300px;     text-align: center;     padding-top: 30px; } #container {     background-color: #ff00ff;     position: relative;     z-index: -999;     width: 100%;     height: 600px; } #footer {     background-color: #333333;     position: relative;     width: 100%;     height: 200px; } 

javascript

function showhide() {     var div = document.getelementbyid("sub-menu");     if (div.style.display !== "none") {         div.style.display = "none";     } else {         div.style.display = "block";     } } 

please me using javascript or jquery, know i'm missing whole script me.

first of all, never called hiding function, sub-menu never hidden. second, here's example produced in 2 minutes using jquery achieve have in mind. here's js/jquery:

function showhide(){     var div = document.getelementbyid("sub-menu");     if (div.style.display != "none") {         div.style.display = "none";     } else {         div.style.display = "block";     }  } // calling function showhide();  $(document).ready(function(){     $('#menu li:nth-child(2)').click(function(){         $('#sub-menu').slidetoggle(300);     });     $('a.close').click(function(){         $('#sub-menu').slideup(300);     }); }); 

here's fiddle: http://jsfiddle.net/ux4c5/4/