Pop Up Menus For Navigation

We've all been to sites with neat pop up menu navigation schemes. This site has a really simple one that helps the viewer navigate the site much more quickly than if he had to muddle through another links index and wait for that index to load.

Pop up menus are nothing more than the boxes we've already learned how to code with links in them. These links can lead anywhere just like any other link. Pop up menus provide for compact, slick, and attractive site navigation.

Here's the example we'll be coding in this lesson. You may well be able to code this page without any further assisstance. You should definitely be able to code the basic page and style and position the <div> boxes at this point.

It really pays to code, style, and position the menus one at a time. The first menus content and styling can act as a template for the others. Once a menu is styled and positioned, code its "visibility:" to "hidden". Them move on to the next menu.

Events & Parameters

The events I've chosen for the example, and my site, use clicking a text link to open the menus. The menus are closed by a link inside the menu itself. I like this scheme because it's clear, stable, and easy to code.

I can't stand menus that dance around so much I can't click the link I want. They always seem to disappear right before I click the link and pop up for no apparent reason. There are plenty of these on the Web. This is something you want to avoid at all costs when making navigational pop up menus. Just like with any navigation scheme, the menus should be clear and easy to use.

So the events will be a function call in the HREF of the links that open the menus. This works the same as "onClick". The "Close This Menu" links will also have their function call coded in their HREF.

The parameters we need are the same as in the last lesson. We'll need a parameter to return the active <div>'s ID and another to send the needed value for the "visibility:" property.

Here's the code for the link that opens the search engine menu in the example:

<a href="javascript:menus('search','visible')">
Search</a><br><br>

I'll be calling my menu control function "menus()". The above link will make the "search" menu (<div id="search">) "visible" -- at least after we code the function. The other links are coded similiarly. Note that these links only open the menus, they don't close them.

Coding The Menus

In our previous examples, the contents of the menus have been plain text and simply styled. Menus contain links which are coded like any other links, and are generally much more heavily styled than in the example.

Below is the coding for the "search" menu. No big deal really. Pay special attention to the "Close This Menu" link.

<div id="search">

<a href="http://www.google.com/" target="_blank" class="menulink">
Google</a><br><br>

<a href="http://www.yahoo.com/" target="_blank" class="menulink">
Yahoo!</a><br><br>

<a href="http://www.about.com/" target="_blank" class="menulink">
About.com</a><br><br>

<a href="javascript:menus('search','hidden')" class="menulink">
Close This Menu</a>

</div>

The links are pretty much straighforward. They open their respective HREFs in a new window and are styled with the "menulinks" class.

The last link that closes the menu needs some special attention. First, the HREF is a call to the "menus()" function (that we have yet to code). This has the same effect as the "onClick" event. Notice that the "visibility:" parameter is "hidden". This is what will close the menu.

Also note that I removed the "target='_blank'" from this link. If you try to run this JavaScript in another window, it won't work. Give it a try and see what happens.

Coding The Function

The function to open and close the menus is almost an exact copy of what we used in the last lesson. Here's the function code:

<script lanugage="JavaScript">

function menus (whichMenu,whatState){

if (document.getElementById)
{document.getElementById(whichMenu).style.visibility = whatState; }

else {document[whichMenu].visibility = whatState;}

}

</script>

You should recognize all of the above by now. Note the detection code used and the different object references to the "visibility" property.

Some Tweaking Ideas

Once you've got the page working, you may well want to change some items. Begin by changing the boxes dimensions if you feel you need to. Start here because the dimensions will effect both the content styling and positioning.

Next restyle content and finish off by tweaking the menu's position. For now just try to get the position near the opening link so that it will be visually associated with the link that opened it. This visual association is very important to make pop ups a clear navigation scheme. We'll be talking a lot more about positioning in a later lesson.

Summary & Exercises

Make a simple four page site and make a pop up menu to navigate it. Now add a pop up menu for some off-site links. Note: use one page/menu arrangement as a template for the others.

Put a <table> of links in a <div> menu. This allows you to make columns of links and "fake buttons" by coloring table cells. Also try using image buttons as links.

Try using some other JavaScript Events to open and close your menus. Try onMouseOver and others. We'll be discussing more menu events in the next lesson, but get a head start.

To Next Beginning JavaScript Lesson

Back To Beginning JavaScript Index