Opening Menus

We've used the HREF of a link or onClick to open and close menus so far. You're not limited to these events You can code any event you want in the link that opens a pop up box/menu.

One of the more popular events used to open a menu is the onMouseOver event. This has some advantage in that it makes very clear that the link opens a menu and is used for navigation. With menu opening links that require a click, like mine, the viewer might no be able to find or recognize them. Using onMouseOver to activate menus reduces this confusion a little. On the downside, it can be confusing having menus popping up all the time.

In certain cases, using the onLoad and onUnload events comes in handy. You can use a pop up box opened by the onLoad event to make site announcements. Boxes styled like this are much easier on the viewer than using alert boxes. They're more flexible, too.

Closing Menus

Events to close menus are a different matter than opening them. It's usually quite clear when you want a menu to open, but it's not as clear as to when the menu should close.

The pop ups on this site and in our examples had "Close Me" links in them. This lets the viewer close the menu as they see fit. This also has the advantage of being easily coded to work in all browsers.

Another closing method is to use the onMouseOut in the pop up's <div> tag. This is erratic at best and simply won't work in Netscape. Netscape doesn't support JavaScript Events in the <div> tag.

There aren't any easy workarounds for getting onMouseOut to work in closing a menu. One of the simpler solutions is to put the whole <div> inside a link (<a>) and code the events there. This doesn't really solve the problem as performance is very erratic.

There is also a second problem in using onMouseOut. When the menu is opened, it must be opened under the cursor's position or it will immediately disappear. This can be offset with either menu positioning or using a "setTimeout()" to create a short delay before the menu is closed.

The solution to the above problems generally requires the constant monitoring of mouse movements using more advanced JavaScript. You'll be coding what amounts to a custom onMouseOut event based on screen coordinates. We'll be doing this in the Advanced JavaScript section.

Positioning

A menu should be positioned to pop up near the link that opens it. That visually associates the menu with the link that opened it as opposed to another event. This make your menu navigation clear.

On sites styled like mine, this isn't too big of a problem. All of my links are to the left and in a column. The menus don't have to line up exactly with anything, just be near the text link that opened them. I just coded them where they looked okay at a variety of resolutions.

This is not the case on many sites. The very precise placement of <div> boxes is becoming more popular and it gives a site a very polished look.

Take the case of a site that has a horizontal bar of links across the page. When you hover over or click one of these links, a menu drops down with options. These are really cool, but tricky to code.

The problem lies in that the menus won't be in the same position at all resolutions. There are three basic approaches to making these menus behave.

First, you can absolutely size your page. This generally only applies the the width of your page. To do this you must size your layout table or layout <div>s to absolute pixel sized and positions.

Your page will be the same size at all resolutions. Your boxes will always line up. On the downside, people with lower resolutions will have to side-scroll and people with higher resolutions will have a blank column on the right of their screen. You can make the blank column look a little better by using an appropriate background color or image.

Secondly, you can make a proportionately sized page using percentage values in your layout. The menus can then be positioned by using percentages in "top:" or "left:":

#box1 {
position: absolute;
top: 25px;
left: 20%;
...
}

Notice that we still use "position: absolute;". Not "position: relative;" as you might think. The "position:" property doesn't actually place a <div> box at all, it only describes the whether the box should be rendered along with the normal flow of the code (relative, default) or removed from the normal flow and rendered according to CSS properties (absolute).

In many case using percentage values will do the trick, but they may not be as precise as you'd like.

The last method of positioning menus is to actually measure the viewer's screen resolution and use this to dynamically position your menus. I'll be covering this in Advanced JavaScript.

There are a lot of ways to present your menus and boxes and you should experiment with them all. Make sure you can use all of the methods described above except for the ones requiring advanced JavaScript.

In the next lesson, we'll be using percentage values to position our pop up boxes so they'll be in the same place over various resolutions.

To The Pop Up Exam

Back To Beginning JavaScript Index