4
\$\begingroup\$

This does the job, and it's pretty much all the functionality I need at the moment. However, I feel like it could be optimized a bit. Namely, is there a way I can do this without the div#boundary? Also, the drop down re-fires if I go back up into the menu, which not a big deal, but it would be nice to prevent this behavior.

Demo

$('#press, #contact, #about').bind('mouseenter', function() {       
   var n = $(this).attr("id");
   $('#dd_'+n).stop(true, true).slideDown('fast'); 
        
   $('#menu').children().not('#'+n).bind('mouseenter', function () {
      $('#dd_'+n).slideUp('fast');
   });    

   $('#boundary').bind('mouseenter', function () {
      $('#dd_'+n).slideUp('fast');
   });    

    $('#dd_'+n).bind('mouseleave', function () {
      $('#dd_'+n).slideUp('fast');
   });

});
<div id="container">
    <div id="header">
        <div id="boundary"></div>
        <div id="menu">
            <div id="press"></div>    
            <div id="contact"></div>
            <div id="about"></div> 
        </div>
    </div>
    
    <div id="dd_press"></div>
    <div id="dd_contact"></div>
    <div id="dd_about"></div>
</div>

\$\endgroup\$
  • \$\begingroup\$ What do you think the purpose of the boundary is? It currently has both a visual and programmatic purpose; is the visual purpose important? \$\endgroup\$ – jdmichal Feb 1 '12 at 13:46
2
\$\begingroup\$

I've come up with two options, but I'm not sure if either are an acceptable replacement for you.


Option 1

Overlay the expanding menu on the original menu. This allows simplification of the eventing. Only tricky part is that by moving quickly, you could leave one menu and enter another before your mouse was in the expanding menu. Hence the last line of the "mouseover" function. Also, the original menu basically must be duplicated between the two menus, as you are overlaying it. If you were going to have some sort of effect on the original menu anyway, this could be an OK thing.

http://jsfiddle.net/KY2kY/1/


Option 2

Add everything to the header menu, but hide most of it. Expand and contract that element. Biggest downside here is that now your heights must be set in the code, not the CSS. But it is very, very clean.

http://jsfiddle.net/KY2kY/2/

\$\endgroup\$
  • \$\begingroup\$ excellent answers jdmichal. a much appreciated code review. option 1 - works very well, however from a UI standpoint, I'd rather the containers appear to grow from below the control blocks, which granted is a small thing but to me feels more normal. \$\endgroup\$ – lyndonr Feb 2 '12 at 14:30
  • \$\begingroup\$ option 2 - very nice! in my final layout however my containers are rather wide so they overlap each other visually on drop down... in order to never have them on top of each other (when one is rolling up while the other is rolling down), I'd have to devise some way to stop the animation and go directly back to the default height? I'll "fiddle" with it a bit.. but if you see an easy way to do this, I'd much rather use 4 lines of code instead of 10. again, many thanks. I'll try to go help someone out now. \$\endgroup\$ – lyndonr Feb 2 '12 at 14:40
  • \$\begingroup\$ @lyndonr For option 1, if the top looks the same, the user would not notice the first part of the animation. Just change the #dd background to yellow and remove the white color from .header and you will see what I mean. \$\endgroup\$ – jdmichal Feb 3 '12 at 6:04
  • \$\begingroup\$ @lyndonr As for your concerns about option 2, it wouldn't be impossible to queue the sliding actions, since slideUp and slideDown offer a "complete" callback. But, it would decidedly have to be more complicated code to achieve that. The conciseness of option 2 comes directly from each element only having to be concerned about itself. \$\endgroup\$ – jdmichal Feb 3 '12 at 6:05
  • \$\begingroup\$ well explained. thank you again for the review. \$\endgroup\$ – lyndonr Feb 3 '12 at 16:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.