Hi All,

I have done a lot of searching around and cant find an answer.

Is it possible at all upon hover over a single parent to expand entire menu showing all children?

There are 5 Parents with 5 or so children in each.

A good example is bu.edu

Thanks

Comments

benjmarr’s picture

benjmarr commented

any ideas??

mehrpadin’s picture

mehrpadin commented

Hey there,

It's not a drop-down, it's just a <div> with overflow:hidden; here's how I'll do it I think:

1. Create a new region, put 4 menu blocks and a search block there, and make them stay side by side with something like float:left;height:200px;width:20%;.

2. Add overflow:hidden; and some height (let's 40px) to the div containing the region:

.my-new-region {
  height: 40px;   
  overflow: hidden;
}

3. Guessed the rest already? :)

.my-new-region:hover {
  height: 200px;
}

jQuery(document).ready(function(){
  jQuery('.my-new-region').mouseenter(function(){
    jQuery(this).animate({height:'200px'},{queue:false,duration:200});
  }).mouseleave(function(){
    jQuery(this).animate({height:'40px'},{queue:false,duration:200});
  });
}
benjmarr’s picture

benjmarr commented

Hi mehrpadin,

Thanks for your response. So your saying to create a menu for each parent, then add the CSS (can do all that). Where is the jquery code inserted? Just the head?

Thanks,
Ben

mehrpadin’s picture

mehrpadin commented

Sorry for the late reply, jQuery can be anywhere, header through drupal_add_js is optimal.

mehrpadin’s picture

mehrpadin commented
Status: Active » Closed (fixed)