CODEWITHSUNDEEP
javascriptcssxhtml
iceteea
iceteea

Reputation: 1224

Creating a Drop-Down Menu with Javascript

Question about logics here:

What's the most elegant way to make the menu appear/disappear onmouseover/onmouseout?

See the following JsBin:

http://jsbin.com/owayeb/edit#source

The Menu is hidden by default.

If the user moves his cursor above the Link the showme() function gets called.

When the user moves his cursor away the hideme() functions gets called.

How would I get the Menu to persist while the user moves his mouse away from the Link to above the Menu?

Or is this all the wrong school of thought?

Upvotes: 0

Views: 1282

Answers (5)

Mojtaba
Mojtaba

Reputation: 177

I use the superfish jQuery plugin to build Javascript drop-down menus. Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds some useful enhancements.

Upvotes: 1

emilyk
emilyk

Reputation: 713

Not sure if this is what you're looking for or not, but check it out!

http://jsfiddle.net/5NmTB/

Let me know if you have questions

Upvotes: 1

Norm
Norm

Reputation: 583

Best and most simple way I've done it is use the :hover selector to keep the submenu displayed.

Here's how I would go about it:
1. define a menu structure

<ul id='menu'>
  <li>Menu Item</li>
  <ul id='submenu'>
    <li>Sub menu item 1</li>
    <li>Sub menu item 2</li>
  </ul>
</ul>
  • Hide submenu in css and define submenu:hover to leave display: block

  • Attach to the menu item, the onmouseover to display the submenu (you might just toggle a class or something and toggle again about 5 secs later.)

  • Hopefully that works for you. The idea here is that you are hovering over the menu item to display the submenu, then the hover selector will keep the menu displayed, finally when the user hovers out the hover selector stops.

Can't remember exactly how I did it before because this was an on the fly thing, but the idea is there.

Upvotes: 1

Kory Sharp
Kory Sharp

Reputation: 490

Assuming this is for cascading navigation or something similar, I would do something like...

<style type="text/css">
ul#nav li {
    position: relative;
    height: 20px;
}
ul#nav li ul {
    display: none;
    position: absolute;
    top: 20px;
}
ul#nav li.selected ul { display: block; }
</style>

<ul id="nav">
<li>
    <a href="#" title="Link">Link</a>
    <ul>
        <li><a href="#" title="">Hi There!</a></li>
        <li><a href="#" title="">Secone Nav Item</a></li>
        ...
    </ul>
</li>
</ul>

Within the onmouseover state of your list items, you would add the .selected class to #nav thus causing all child UL's to be displayed. Because the child UL elements are within ul#nav, your hover state will still be active while you're rolling over the children.

You'll obviously need to tweak the CSS to match the desired look you want, but that's the general idea. If you were using prototype js for example, your javascript would look something like...

$$('#nav li').each(function(x) {
    x.onmouseover = function() { $(this).addClassName('selected'); }
    x.onmouseout = function() { $(this).removeClassName('selected'); }
});

Upvotes: 2

Robot Woods
Robot Woods

Reputation: 5687

you could add the same onmouseover listener to the drop div, so that it stays open:

<div id="drop" class="dropdown" onmouseover="showme('drop')" onmouseout="hideme('drop')">
    Hi there!
  </div>

Upvotes: 1

Related Questions