Drop down menu

[justynb]

I would like to create a drop down menu using Javascript and was wondering if this would be possible and how easy it would be to write.

I'm trying to create a menu which looks like the Bookmarks drop-down list in Netscape 4.

I will need a line of images as main menu items. When you mouseover any one of these, a dropdown list compiled from more individual graphics appears beneath it. Each of these images will be a link and have a mouseover state which changes it to another image. I also want an image at the top and bottom of the dropdown list which isn't a link and doesn't have a mouseover state.

Any help or advice much appreciated.

Regards, Justyn.

 

[iza]

which browser(s) are ou targetting ? do you want it to be cross-browser ?

 

[justynb]

The only browser I want to support is IE5. I know there would be lots more work to create something that supported the various versions of IE & Netscape.

Thanks, Justyn.

 

[iza]

you're right this is the easiest and most supported
i can only give you general guidelines as i don't have much time. There should be plenty of good tutorials and downloadable code. Maybe some nice tt member could point you to those ). But these guidelines should be enough if you're not totally new to jscript & css programming.
ok -
"I will need a line of images as main menu items. When you mouseover any one of these, a dropdown list compiled from more individual graphics appears beneath it."
* create the whole page with all graphics appearing in it and HIDE those who are not visible
* change the imagetag as this : <img src=&quot;....&quot; id=&quot;an_id&quot; onmouseover=&quot;show_dropdown(this)>
* and create a jscript function : &quot;show_dropdown&quot; in which you SHOW the elements corresponding to the img which id id &quot;an_id&quot;

&quot;Each of these images will be a link ...I also want an image at the top and bottom of the dropdown list which isn't a link ...&quot;
* this is done when you create the page, instead of having just the graphics, the links look like <a href=&quot;...&quot;><img src=&quot;...&quot; id=&quot;...&quot; style=&quot;visibility=hidden&quot;></a>, the other are &quot;normal&quot; (i mean, not enclosed in <a ..></a>)

&quot; ...and have a mouseover state which changes it to another image....and doesn't have a mouseover state&quot;
* just the same as above, those which have to react to mouseovers have the <.... onmouseover=&quot;some_func()&quot; onmouseout=&quot;someotherfunc()&quot;> call in them and other don't

 

[justynb]

Thanks for your advice. I'm still having trouble though.

I've created an area using <div> which will contain my dropwdown menu and can change the visibility of it by editing the HTML code. When I try getting Javascript to change the visibility in the example below it doesn't work:

<a href=&quot;#&quot; onMouseOver=&quot;window.dropdown1.visibility='show'&quot;><img src=&quot;a.gif&quot; width=&quot;200&quot; height=&quot;20&quot; border=&quot;0&quot;></a>
<div id=&quot;dropdown1&quot; style=&quot;position:absolute; visibility:hidden; width:188px; height:49px; z-index:1; left: 0; top: 21&quot;>
Sample text.
</div>

Thanks again for your help, Justyn.

 

[iza]

it looks correct tho
maybe window.dropdown1... would be better with document.dropdown1.... ??
also try onclick instead of onmouseover ??
i'll check for you later - if i have time to !!

 

[jaredn]

You need to access the style obejct of dropdown1. Also the correct syntax to show an element with its visibility property is visible:

<a href=&quot;#&quot; onMouseOver=&quot;window.dropdown1.style.visibility='visible'&quot;><img src=&quot;a.gif&quot; width=&quot;200&quot; height=&quot;20&quot; border=&quot;0&quot;></a>
<div id=&quot;dropdown1&quot; style=&quot;position:absolute; visibility:hidden; width:188px; height:49px; z-index:1; left: 0; top: 21&quot;>
Sample text.
</div>
jared@aauser.com -

http://webfx.eae.net

 

[iza]

once again you spotted the point !!! i missed that !!