Trying To Consolidate And Condense This Code For A Menu

[simcoweb]

I inherited this menu for a client project where the basic functions were already in place. However, it was not 100% complete and my job was to adapt it to a Wordpress theme. I was able to do that and was also able to finish the menu using their methods.

 

Here's the code:

 

<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery('img[data-hover]').hover(function() {
jQuery(this).attr('tmp', jQuery(this).attr('src'))
.attr('src', jQuery(this).attr('data-hover'))
.attr('data-hover', jQuery(this).attr('tmp'))
.removeAttr('tmp'); }).each(function() {
$('<img />').attr('src', jQuery(this).attr('data-hover'));
});
});
jQuery(document).ready(function($) {
jQuery("div.productmenu").hide();
jQuery("div.biomenu").hide();
jQuery("div.companymenu").hide();
jQuery("div.contactmenu").hide();
jQuery("div.terciarymarket").hide();
jQuery("div.byservice").hide();
jQuery("div.byproduct").hide();
jQuery("#product").mouseenter(function(){
jQuery("div.biomenu").slideUp("slow");
jQuery("#biodropanimate").animate({paddingTop:"0px"},"slow");
jQuery("div.companymenu").slideUp("slow");
jQuery("#companydropanimate").animate({paddingTop:"0px"},"slow");
jQuery("div.contactmenu").slideUp("slow");
jQuery("#contactdropanimate").animate({paddingTop:"0px"},"slow");
jQuery("div.productmenu").slideDown("slow");
});
jQuery("div.productmenu").mouseleave(function(){
jQuery("div.productmenu").slideUp("slow");
});

jQuery("#bymarket").mouseenter(function(){
jQuery("div.byproduct").slideUp("slow");
jQuery("div.byservice").slideUp("slow");
jQuery("div.terciarymarket").slideDown("slow");
jQuery("#marketdropanimate").animate({paddingTop:"40px"},"slow");
});
jQuery("div.terciarymarket").mouseleave(function(){
jQuery("div.terciarymarket").slideUp("slow");
jQuery("#marketdropanimate").animate({paddingTop:"0px"},"slow");
});

jQuery("#byproduct").mouseenter(function(){
jQuery("div.terciarymarket").slideUp("slow");
jQuery("div.byservice").slideUp("slow");
jQuery("div.byproduct").slideDown("slow");
jQuery("#marketdropanimate").animate({paddingTop:"40px"},"slow");
});
jQuery("div.byproduct").mouseleave(function(){
jQuery("div.byproduct").slideUp("slow");
jQuery("#marketdropanimate").animate({paddingTop:"0px"},"slow");
});

jQuery("#byservice").mouseenter(function(){
jQuery("div.byproduct").slideUp("slow");
jQuery("div.terciarymarket").slideUp("slow");
jQuery("div.byservice").slideDown("slow");
jQuery("#marketdropanimate").animate({paddingTop:"40px"},"slow");
});
jQuery("div.byservice").mouseleave(function(){
jQuery("div.byservice").slideUp("slow");
jQuery("#marketdropanimate").animate({paddingTop:"0px"},"slow");
});
jQuery("#biodegradability").mouseenter(function(){
jQuery("div.productmenu").slideUp("slow");
jQuery("div.terciarymarket").slideUp("slow");
jQuery("div.byproduct").slideUp("slow");
jQuery("div.byservice").slideUp("slow");
jQuery("#marketdropanimate").animate({paddingTop:"0px"},"slow");
jQuery("div.companymenu").slideUp("slow");
jQuery("#companydropanimate").animate({paddingTop:"0px"},"slow");
jQuery("div.contactmenu").slideUp("slow");
jQuery("#contactdropanimate").animate({paddingTop:"0px"},"slow");
jQuery("div.biomenu").slideDown("slow");
jQuery("#biodropanimate").animate({paddingTop:"40px"},"slow");
});
jQuery("div.biomenu").mouseleave(function(){
jQuery("div.biomenu").slideUp("slow");
jQuery("#biodropanimate").animate({paddingTop:"0px"},"slow");
});
jQuery("#company").mouseenter(function(){
jQuery("div.productmenu").slideUp("slow");
jQuery("div.terciarymarket").slideUp("slow");
jQuery("div.byproduct").slideUp("slow");
jQuery("div.byservice").slideUp("slow");
jQuery("#marketdropanimate").animate({paddingTop:"0px"},"slow");
jQuery("div.biomenu").slideUp("slow");
jQuery("#biodropanimate").animate({paddingTop:"0px"},"slow");
jQuery("div.contactmenu").slideUp("slow");
jQuery("#contactdropanimate").animate({paddingTop:"0px"},"slow");
jQuery("div.companymenu").slideDown("slow");
jQuery("#companydropanimate").animate({paddingTop:"40px"},"slow");
});
jQuery("div.companymenu").mouseleave(function(){
jQuery("div.companymenu").slideUp("slow");
jQuery("#companydropanimate").animate({paddingTop:"0px"},"slow");
});
jQuery("#contact").mouseenter(function(){
jQuery("div.productmenu").slideUp("slow");
jQuery("div.terciarymarket").slideUp("slow");
jQuery("div.byproduct").slideUp("slow");
jQuery("div.byservice").slideUp("slow");
jQuery("#marketdropanimate").animate({paddingTop:"0px"},"slow");
jQuery("div.biomenu").slideUp("slow");
jQuery("#biodropanimate").animate({paddingTop:"0px"},"slow");
jQuery("div.companymenu").slideUp("slow");
jQuery("#companydropanimate").animate({paddingTop:"0px"},"slow");
jQuery("div.contactmenu").slideDown("slow");
jQuery("#contactdropanimate").animate({paddingTop:"40px"},"slow");
});
jQuery("div.contactmenu").mouseleave(function(){
jQuery("div.contactmenu").slideUp("slow");
jQuery("#contactdropanimate").animate({paddingTop:"0px"},"slow");
});
});
</script>

 

We're using the 'jQuery' instead of the '$' sign due to the 'conflict' parameters apparently inherent to the jQuery in use with Wordpress.

 

You can see it's highly repetitious. Here's how it looks when it works: http://wp.shieldssecuritybags.com

 

What I'm looking for is some sleeker use of the jQuery event functions and animations to consolidate this. I'm not that well versed on what jQuery functions could be substituted for much of this code. Any help/suggestions, as usual, is GREATLY appreciated!

[Adam]

That menu is a usability nightmare. Took me about 10-15 seconds just to get the hang of how to use it, and then browsing about was tedious because you hide parent parts of the menu when you scroll down to a child. Honestly I think you should forget reducing repetition for now and concentrate on making it easy to use.

[simcoweb]

Adam, thanks for your response. Yeah, I don't like it myself but it's how they want it to work with a couple of exceptions. When you mouse over Products the grey bar menu should appear. When mousing over the 3 items there it should remain (which it does) but once you move to the sub-menus of the grey bar then the grey bar disappears. I need for that to stay put while they are in any of the 3 sub-menus of the grey bar. That will improve the usability just doing that.

 

The other goal was to condense this to a more efficient use of jQuery.

[Adam]

Okay well it's worth pointing out that internally jQuery will use, where possible, document.querySelectorAll to find elements. This is a native function that will perform miles better than jQuery can ever do manually. By combining multiple jQuery selectors in one call, you can combine them all into one call to this function..

 

// Previously
jQuery("div.productmenu").hide();
jQuery("div.biomenu").hide();
jQuery("div.companymenu").hide();
jQuery("div.contactmenu").hide();
...

// After
jQuery(
  "div.productmenu,"
+ "div.biomenu,"
+ "div.companymenu,"
+ "div.contactmenu,"
).hide();

 

Probably won't have any noticeable effect though if I'm honest, but it's certainly not wasteful and it's cleaner. Just generally learning how to write the syntax cleanly will help. Everything you posted is on one single line and very difficult to read.

 

Beyond that though I can't really help, I'm not about to sit down and work out everything happening there. If you indent it, explain it, etc. Then I'll be happy to help with anything.

[codefossa]

Since they work in sets, you could add a class to each that would group them, letting you do it in one line of JS for each group moving. This would probably mean two or three lines per action.