LanguagesJavaScriptCreating a drop-down menu

Creating a drop-down menu

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.



The Spirit of Script Tips…

I have had a tutorial on HTML Goodies for a while now that explains how to get a drop down menu in Internet Explorer. The process is built out of SPAN commands with a little JavaScript to make it all run. If you’d like to visit, head to the, “So, You Want A Menu, Huh?” tutorial.

Well, ever since I put up that tutorial, readers have been clamoring for a script that produces the same effect in Netscape Navigator. Here it is.

The effect is achieved through toggling layers between visible and non-visible. Where this script goes further is that it just doesn’t pop the layer up, it actually produces a scrolling effect.

Right up front, I should tell you that I didn’t write this one. The author is Tom Richardson Jr. Tom was one of the first authors to submit to JavaGoodies. He really helped to build the site when it was just getting under way.

So, here it is. Remember, you must be using a Netscape Navigator browser that understands layers (version 4.0 or better).

 


The Script’s Effects



Here’s the code

 


Yes, yes, I know. I hate the yellow background too. I only put it in there to show the layer and the opening scroll. Before this tutorial is over, you’ll know how to lose it altogether or change it to a better color.

There are not two layers. It is only one that, when loaded, only displays a portion of the layer. The onMouseOver effect triggers a function that displays the remainder of the layer.

We’ll start with the code for the layer itself and then tackle the two functions.


<LAYER BGCOLOR="yellow" 
NAME="click" LEFT=200 TOP=25 CLIP="250,25" 
onMouseOver="showmenu(); return false" onMouseOut="unshow(); return false">

<FONT FACE="arial black" COLOR="black">
HTML Goodies Categories</FONT>

<BR>
<TABLE BORDER=0 CELLSPACING=10>
<TR>
<TD><AHREF= "/stips">ScriptTips</A></TD>
<TD><AHREF= "/new.html">NewPage</A></TD>
<TD><AHREF= "/beyond">BeyondHTML</A></TD>
</TR><TR>
<TD><AHREF="/tutors">Tutorials</A></TD>
<TD><AHREF="/letters">Newsletters</A></TD>
<TD><AHREF= "/tutors/master.html">MasterList</A></TD> 
</TR>
</TABLE>

</LAYER>


As you can see, there’s only the one layer command. This is all one layer.

I’m really only concerned about the main layer command as everything inside the layer is basic HTML. It’s a basic heading created through font flags and then a table containing six cells and six links. The HTML code is quite simple. So, let’s look at the LAYER flag:


<LAYER BGCOLOR="yellow" 
NAME="click" LEFT=200 TOP=25 CLIP="250,25" 
onMouseOver="showmenu(); return false" onMouseOut="unshow(); return false">


It starts with “LAYER” obviously. The next command is your concern if you hate the yellow background. It’s a simple BGCOLOR attribute. Lose, or change it to whatever color you’d like. I think the best effect is setting it so that the layer and the page background are the same. Then you get the effect of the menu floating on the page. Moving along… The layer is given the name “click”. That will attach it to the JavaScript hierarchy statements in the two functions we’ll hit later. Keep in mind that if you double up this script, putting more than one on a page, you’ll need to change this name in both the layer and the function hierarchy statements. There are methods of getting one function to run multiple layers, but I always like the easy way pf putting multiple similar effects on the same page. I just copy and paste the entire script and layer code again and again, changing the names in each. Yes, it gets a little “codey” but it all stays straight in my brain and that’s what’s important to me. Next we set the layer’s position, 200 pixels in from the left and 25 down from the top. Keep in mind that these coordinates refer to the upper left-hand corner of the layer itself. Now we get into shaping the layer when it first appears. The attribute “CLIP” is set to two numbers. The first number refers to the width and the second to the height. I have this layer set to 250 and 25 because that’s all the space I needed to surround the heading text. You may have to change these numbers depending on the size or length of the text you decide to make visible on the page when it loads. Remember that the entire layer is there. You’re just hiding it with these numbers. If your height is too tall, some of the table below may show. Be aware of these numbers. They’re important to the effect. Next up we set the two functions that will perform the look. The function showmenu() displays the remainder of the layer when the mouse passes over it. The function onMouseOut gets rid of it when the mouse leaves. Note the returns are false. That means the function effect will not remain. It will want to go away, but we can’t just have it popping in and out. We need to smooth that run. We’ll do that in the functions and next week.

Next Week: The “For” Loops

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories