0

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
Chris Hough
  • 3,389
  • 3
  • 41
  • 80

2 Answers2

0

There are a number of ways to achieve your desired effect.

If you class changes the following properties:

.my-class {
    height      : 200px;
    width       : 200px;
    padding-top : 10px;
}

Then instead of adding this class to the element, you can just copy the properties and their values into an .animate() call:

$(SELECTOR).animate({
    height      : 200px,
    width       : 200px,
    padding-top : 10px
}, 500);

Alternatively you can use CSS3 Transitions to create your animation effect:

.my-class {
    height      : 200px;
    width       : 200px;
    padding-top : 10px;

    -webkit-transition : all 0.5s linear;
       -moz-transition : all 0.5s linear;
        -ms-transition : all 0.5s linear;
         -o-transition : all 0.5s linear;
            transition : all 0.5s linear;
}

This removes the need for any changes to your JS code, but it will only work in modern browsers.

Another alternative is to use .switchClass() which is a jQuery UI function that animates the change from one class to another, this way you can keep your CSS in a stylesheet, your JS in one place, and still animate the change of the CSS properties.

Jasper
  • 75,717
  • 14
  • 151
  • 146
0

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

Chris Hough
  • 3,389
  • 3
  • 41
  • 80
  • This is what you ended up using but does it answer the question? Also, rather than using that out of date plugin, go download a custom build of jquery ui with only the accordion widget. – Jasper Apr 19 '12 at 23:56
  • I wish I had more time to play with it, but it worked perfectly for the application's needs, especially the css layout. his plugins are well documented and easy to use – Chris Hough Apr 19 '12 at 23:59
  • Yeah but the author states that the plugin is no longer supported because out is part of jquery ui now. So to get the most up to date version, use jquery ui. You can build a custom jquery ui with just the accordion widget. – Jasper Apr 20 '12 at 00:05
  • Sorry, I just realized my first comment was regarding a different question I had open in another tab. jQuery UI's Accordion Widget certainly answers your question. Although I still suggest using the up-to-date version since the non jQuery UI version hasn't been updated in four years. – Jasper Apr 20 '12 at 00:25
  • good point. I am not 100% happy with it for now, but it works. we are definitely going to look into re-doing it soon. thank you for your help. – Chris Hough Apr 20 '12 at 00:29