Search code examples
javascriptjqueryjquery-uisuperfish

jQuery Drop-down navigation menu library to open all at once

I am trying to implement a similar menu behavior as on Harvard's website: http://www.seas.harvard.edu/computer-science where all the sections drop down no matter which link you put the mouse over.

Does anybody know what they are using for that? The closest I could find is the jQuery Superfish menu, but it only allows to open one menu section at a time.

Thank you in advance!

Solution

  • I've created a demo on JSFiddle which portrays what I was talking about in my comment. The particular result you are looking for is a simple modification of a normal drop down menu. Instead of having each of the drop downs be their own separate divs, you put them in a container div and display it when a drop down is needed.

    So instead of:

    <div id="drpDwn1"></div>
<div id="drpDwn2"></div>
<div id="drpDwn3"></div>

    You'd have:

    <div id="drpDwnFull">
    <div id="drpDwn1"></div>
    <div id="drpDwn2"></div>
    <div id="drpDwn3"></div>
</div>

    You would change the visibility on drpDwnFull instead of the individual items to get the full menu effect.

    Then you can add highlighting as you wish. In my Demo I chose to highlight the menu associated with the menu item, as well as the individual item you are hovering over.