Hello all,
I am fairly new to javascript and jquery for the most part. I am trying to instill a seemingly simple navigation/subnav .hover and .slideDown transition to the subnav but I am having a few problems.
When I hover over the main navigation, the subnav slides in just fine but when I go to hover over the subnavigation, it disappears. Obviously I want the subnav div to remain on the screen until I hover off of the id="nav_a" or until I hover off the subnav div completely. Hopefully I am just doing something wrong with my code and this is indeed possible.
- <ul id="main-nav">
<li id="nav"><a id="nav_a">Our Services</a>
<div id="subnav">
<script>
$("#nav_a").hover(function () {
if ($("#subnav").is(":hidden")) {
$("#subnav").slideDown("slow");
$("#nav").addClass('active');
$("#nav_a").addClass('active');
}
else {
$("#subnav").hide("slow");
$("#nav").removeClass('active');
$("#nav_a").removeClass('active');
}
});
</script>
<ul>
<li class="subnav-header">National</li>
<br clear="all" />
<li><a href="">Onsite Corporate Massage</a></li>
<li><a href="">Conventions</a></li>
<li><a href="">Onsite Wellness Programs</a></li>
<li><a href="">Event Marketing</a></li>
<li><a href="">Onsite Wellness Seminars</a></li>
<li><a href="">Health Fairs</a></li>
<li><a href="">Onsite Personal Trainers</a></li>
<br clear="all" />
<li class="subnav-header">Wellness Center</li>
<br clear="all" />
<li><a href="">Custom Massage Therapy</a></li>
<li><a href="">Yoga</a></li>
<li><a href="">Chiropractic</a></li>
<li><a href="">Tai Chi</a></li>
<li><a href="">Acupuncture</a></li>
</ul>
<div id="subnav-btm"></div>
</div>
</li>
<li><a href="#">Latest Events</a></li>
<li><a href="#">Read Our Articles</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Our History</a></li>
<li class="last"><a href="#">Contact Us</a></li>
</ul>
Hopefully someone can point me in the right direction in getting this to work properly.
Thanks