Question

I am working with an older navigation system that uses jQuery + CSS to expand the vertical menu parents -> children. I want to work change it to use animate instead b/c I would like to add padding on roll over + adjust the speed.

Here is the current block I am hoping to convert:

jQuery('ul#nav-main-links > li.standby').mouseenter(function() {
    if (!jQuery(this).hasClass('selected')) {
     jQuery('ul#nav-main-links > li.exposed').attr('class', 'standby');
     this.className='exposed';
    }
});

Current CSS for the menu

#inner-wrapper #nav-main #nav-main-links {
}
#inner-wrapper #nav-main #nav-main-links li {
  /*height:38px;*/
  margin-bottom:1px;/*width:181px;*/
}
#inner-wrapper #nav-main #nav-main-links li a {
  display:block;
  padding-right:13px;
  font:14px/38px 'TitilliumText14L800wt', Arial, sans-serif;
}
#inner-wrapper #nav-main #nav-main-links li a:link,
#inner-wrapper #nav-main #nav-main-links li a:visited {
  background:transparent url('/includes/images/sprite-nav-main.png') no-repeat scroll 0 -38px;
  color:#292929;
  line-height:38px;
}
#inner-wrapper #nav-main #nav-main-links li a:hover,
#inner-wrapper #nav-main #nav-main-links li a:active {
  background:transparent url('/includes/images/sprite-nav-main.png') no-repeat scroll 0 -76px;
  color:#292929;
}
#inner-wrapper #nav-main #nav-main-links li.selected a,
#inner-wrapper #nav-main #nav-main-links li.selected a:link,
#inner-wrapper #nav-main #nav-main-links li.selected a:visited,
#inner-wrapper #nav-main #nav-main-links li.selected a:hover,
#inner-wrapper #nav-main #nav-main-links li.selected a:active {
  background:transparent url('/includes/images/sprite-nav-main.png') no-repeat scroll 0 0;
  color:#fff;
}
#inner-wrapper #nav-main #nav-main-links li.exposed a,
#inner-wrapper #nav-main #nav-main-links li.exposed a:link,
#inner-wrapper #nav-main #nav-main-links li.exposed a:visited,
#inner-wrapper #nav-main #nav-main-links li.exposed a:hover,
#inner-wrapper #nav-main #nav-main-links li.exposed a:active {
  background:transparent url('/includes/images/sprite-nav-main.png') no-repeat scroll 0 -76px;
  color:#292929;
}
#inner-wrapper #nav-main #nav-main-links li ul {
  display:none;
}
#inner-wrapper #nav-main #nav-main-links li.selected ul,
#inner-wrapper #nav-main #nav-main-links li.exposed ul {
  display:block;
  left:10px;
  position:relative;
  width:171px;
}
#inner-wrapper #nav-main #nav-main-links li.selected ul li {
  border-bottom:1px solid #4f4f4f;
  margin-bottom:0;
}
#inner-wrapper #nav-main #nav-main-links li.exposed ul li {
  border-bottom:1px solid #adaaa2;
  margin-bottom:0;
}
#inner-wrapper #nav-main #nav-main-links li.selected ul li a,
#inner-wrapper #nav-main #nav-main-links li.selected ul li a:link,
#inner-wrapper #nav-main #nav-main-links li.selected ul li a:visited {
  background-color:#000;
  background-image:none!important;
  font:12px/26px 'TitilliumText14L400wt', Arial, sans-serif;
}
#inner-wrapper #nav-main #nav-main-links li.exposed ul li a,
#inner-wrapper #nav-main #nav-main-links li.exposed ul li a:link,
#inner-wrapper #nav-main #nav-main-links li.exposed ul li a:visited {
  background-color:#d0ccc3;
  background-image:none!important;
  color:#292929;
  font:12px/26px 'TitilliumText14L400wt', Arial, sans-serif;
}
#inner-wrapper #nav-main #nav-main-links li.selected ul li a:hover,
#inner-wrapper #nav-main #nav-main-links li.selected ul li a:active {
  color:#eb5d21;
  background-image:none!important;
}

#inner-wrapper #nav-main #nav-main-links li.exposed ul li a:hover,
#inner-wrapper #nav-main #nav-main-links li.exposed ul li a:active {
  color:#eb5d21;
  background-image:none!important;
}

Here is what I am currently working with:

<script>
$(document).ready(function(){  
    $('ul#nav-main-links > li.standby').mouseover(function() {
        if (!$(this).hasClass('selected')) {
            $(this).switchClass("standby","exposed",600)
        }
    });
    $('ul#nav-main-links > li.standby').mouseout(function() {
        if (!$(this).hasClass('selected')) {
            $(this).switchClass("exposed","standby",600);
        }
    });
});     
</script>

So far I can not reduce the jitteryness.

Answer 1

I redid the menu to use this plugin http://bassistance.de/jquery-plugins/jquery-plugin-accordion/ based on the jquery accordion