Hide and show multi level menu in jquery


CSS code

<style>
/*menu*/
#menu
{
margin: 0;
background:url(images/menu.png);
background-repeat:no-repeat;
height:45px;
margin-top:-24px;
margin-left:15px;
padding: 0;

}
#menu li
{
float: left;
list-style: none;
font: 12px Tahoma, Arial;

}
#menu .panel
{
position:absolute;
display:none;
text-align:left;
border-top: 1px solid #9D9D9D;
border-bottom: 1px solid #9D9D9D;
background: #A9C251;
padding:7px 7px 7px 7px;
margin:-5px 2px 2px 2px;
}
#menu .panel td
{
background: url(images/arrow.png) no-repeat left ;
padding-left:10px;
}
#menu .panel a
{

color: #24313C;
height:10px;
text-decoration: none;
width: auto;
color:#000;
font-family:Arial, Helvetica, sans-serif;

font-size:12px;
font-weight:bold;
white-space: nowrap;
padding:0px 5px 5px 0px;
float:left;
display:list-item;
margin:10px 10px 10px 10px ;
}
#menu .panel a:hover
{
color:#D8D8D8;

}
#menu li .slide
{
display: block;
background: url(images/divideline.jpg) no-repeat right ;
padding: 15px 12px;
text-decoration: none;
width: 80px;
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
white-space: nowrap;
}
#menu li .slide:hover
{
color:#222;
}

/*end menu*/

</style>


Jquery code

<script type="text/javascript">
$(document).ready(function() {
var hide = false;
var networkinghide = false;
$("#computer").hover(function(){
if (hide) clearTimeout(hide);
$("#panelcomputer").fadeIn();
}, function() {
hide = setTimeout(function() {$("#panelcomputer").fadeOut("slow");}, 250);
});
$("#panelcomputer").hover(function(){
if (hide) clearTimeout(hide);
}, function() {
hide = setTimeout(function() {$("#panelcomputer").fadeOut("slow");}, 250);
});
//network
$("#networking").hover(function(){
if (networkinghide) clearTimeout(networkinghide);
$("#panelnetworking").fadeIn();
}, function() {
networkinghide = setTimeout(function() {$("#panelnetworking").fadeOut("slow");}, 250);
});
$("#panelnetworking").hover(function(){
if (networkinghide) clearTimeout(networkinghide);
}, function() {
networkinghide = setTimeout(function() {$("#panelnetworking").fadeOut("slow");}, 250);
});
//end network menu

});

</script>

HTML code

<div id="menu">
 <ul>
 <li>

<a href="index.html">Home</a>

</li>
 <li>
 <a href="#" id="computer">Computers</a>
 <div id="panelcomputer">
 <table>
 <tr>
 <td>
 <a href="#">Computer setup</a>
 </td>
 <td>
 <a  href="#">Data recovery</a>
 </td>
 <td>
 <a href="#">Data Backup</a>
 </td>
 </tr>
 <tr>
 <td>
 <a href="#">In-home PC Hookup</a>
 </td>
 <td>
 <a href="#">Printer Setup</a>
 </td>
 <td>
 <a  href="#">Hardware Repair</a>
 </td>
 </tr>
 <tr>
 <td>
 <a  href="#">Computer Diagnostics</a>
 </td>
 <td>
 <a  href="#">Hardware Installation</a>
 </td>
 <td>
 <a href="#">Printer Troubleshooting</a>
 </td>
 </tr>
 <tr>
 <td>
 <a href="#">Laptop Repair</a>

</td>

<td>
 <a href="#">Pc Optimization</a>
 </td>
 <td>
 <a href="#">Technology Consultation</a>
 </td>
 </tr>
 <tr>
 <td><a href="#">Computer Repair</a> </td>
 <td>
 <a href="#">Troubleshoot External Device</a>
 </td>
 <td>
 <a href="#">Upgrade/Update OS</a>
 </td>
 </tr>
 <tr>
 <td>
 <a href="#">Secure your PC</a>
 </td>
 <td>
 <a href="#">Set Up an External Device</a>
 </td>
 <td>
 <a href="#">Get Plugged to New Laptop</a>
 </td>
 </tr>
 <tr>
 <td>
 <a href="#">Software Installation & Setup</a>
 </td>
 <td>
 <a href="#">Virus n Spyware Removal</a>
 </td>

</tr>
 </table>
 </div>
 </li>
 <li>
 <a href="#" id="networking">Networking</a>
 <div id="panelnetworking">
 <table>
 <tr>
 <td>
 <a href="#">Email setup</a>
 </td>
 <td>
 <a href="#">Internet Networking</a>
 </td>
 <td>
 <a href="#">Wireless Networking</a>
 </td>
 </tr>
 <tr>
 <td>
 <a href="#">Troubleshoot Internet Problems</a>
 </td>
 <td>
 <a href="#">Secure your network</a>
 </td>
 <td>
 <a href="#">Secure your wireless network</a>
 </td>
 </tr>
 </table>
 </div>
 </li>
 <li>
 <a href="#">IT Consulting</a>
 </li>
 <li><a href="aboutus.html">About Us</a></li>
 <li><a href="services.html">Services</a></li>
 <li><a href="contactUs.html">Contact Us</a></li>
 <li><a href="faq.html">FAQs</a></li>
 </ul>

</div>

Download the sample code:  http://www.4shared.com/file/0Cf2Fb-n/samplejquerymenu.html

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s