PDA

View Full Version : Trouble with Drop Down Menus



golfingtitan
08-29-2006, 12:55 PM
Hello all, I thank you for taking the time to read this.

I did a search, but nothing really came up that seemed to help with this problem (other than the one where the guy was missing a "{", but I don't think I am.)

Here's my problem.

I'm using the coding system found here:

http://javascript.internet.com/navigation/cascade-menu.html

My problem is that dispite my best efforts, I can't seem to get the drop down menus to actually drop down.

My coding is:


<head>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Arun kumar (n_arunk@hotmail.com) -->

<link href="CascadeMenu.css" rel="stylesheet">
<script language="javascript" src="CascadeMenu.js">
</script>
</head>

Then, in the body, the coding surrounding the images that are to be the drop down menus is:


<BODY OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy" bgColor=transparent>
<DIV Id="menuBar" class="menuBar">
<DIV Id="Bar1" class="Bar"><img src="images/m0.gif" alt=""></div>
<DIV Id="Bar1" class="Bar" menu="menu1"><a href="#"><img src="images/b1.gif" style="filter:alpha(opacity=50)" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,50,50,5)"></a></div>
<DIV Id="Bar2" class="Bar" menu="menu2"><a href="#"><img src="images/b2.gif" style="filter:alpha(opacity=50)" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,50,50,5)"></a></div>
<DIV Id="Bar3" class="Bar" menu="menu3"><a href="#"><img src="images/b3.gif" style="filter:alpha(opacity=50)" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,50,50,5)"></a></div>
<DIV Id="Bar4" class="Bar" menu="menu4"><a href="#"><img src="images/b4.gif" style="filter:alpha(opacity=50)" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade (this,50,50,5)"></a></div>
<divId="menuBar" class="menuBar"><img src="images/m5.gif"></div>

<!--MenuItem Definition -->

<div Id="menu1" class="menu" >
<div Id="menuItem1_1" class="menuItem" menu="menu6">SubMenu #1</div>
<div Id="menuItem1_2" class="menuItem" title="JavaScripts" cmd="http://javascript.internet.com/">JavaScript Source</div>
<div Id="menuItem1_3" class="menuItem" title="WDVL" cmd="http://www.wdvl.com">WDVL</div>
</div>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem">Page #1</div>
<div Id="menuItem2_2" class="menuItem">Page #2</div>
<div Id="menuItem2_3" class="menuItem">Page #3</div>
</div>
<div Id="menu3" class="menu">
<div Id="menuItem3_1" class="menuItem">Page #1</div>
<div Id="menuItem3_2" class="menuItem">Page #2</div>
<div Id="menuItem3_3" class="menuItem">Page #3</div>
<div Id="menuItem3_4" class="menuItem" menu="menu5">SubMenu #4</div>
</div>
<div Id="menu4" class="menu">
<div Id="menuItem4_1" class="menuItem">Page #1</div>
<div Id="menuItem4_2" class="menuItem">Page #2</div>
<div Id="menuItem4_3" class="menuItem">Page #3</div>
<div Id="menuItem4_4" class="menuItem">Page #4</div>
</div>
<div id="menu5" class="menu">
<div Id="menuItem5_1" class="menuItem">Page #4-1</div>
<div Id="menuItem5_2" class="menuItem">Page #4-2</div>
<div Id="menuItem5_3" class="menuItem">Page #4-3</div>
</div>
<div id="menu6" class="menu">
<div Id="menuItem6_1" class="menuItem">Page #1-1</div>
<div Id="menuItem6_2" class="menuItem">Page #1-2</div>
<div Id="menuItem6_3" class="menuItem" menu="menu7">SubMenu #1-1</div>
</div>
<div id="menu7" class="menu">
<div Id="menuItem7_1" class="menuItem">Page #1-1-1</div>
<div Id="menuItem7_2" class="menuItem">Page #1-1-2</div>
<div Id="menuItem7_3" class="menuItem">Page #1-1-3</div>
</div>
<!-- End of Menu -->

All that extra stuff around the images is DHTML (for the fading in and out effect), but the images are the "b1.jpg" , "b2.jpg", etc.

The CSS coding is as follows:


BODY
{
}
.menuBar
{
POSITION: left;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: left
}
.Bar
{
BORDER-RIGHT: blue 0px outset;
BORDER-TOP: blue 0px outset;
FLOAT: left;
BORDER-LEFT: blue 0px outset;
WIDTH: 0px;
CURSOR: hand;
TEXT-INDENT: 0px;
BORDER-BOTTOM: blue 0px outset;
POSITION: relative;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: center
}
.menu
{
BORDER-RIGHT: buttonhighlight thin outset;
BORDER-TOP: buttonhighlight thin outset;
VISIBILITY: hidden;
BORDER-LEFT: buttonhighlight thin outset;
WIDTH: 150px;
LINE-HEIGHT: 140%;
BORDER-BOTTOM: buttonhighlight thin outset;
POSITION: absolute;
BACKGROUND-COLOR: transparent
}
.menuItem
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
}
.ItemMouseOver
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
WIDTH: 100%;
CURSOR: hand;
COLOR: highlighttext;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid;
BACKGROUND-COLOR: highlight
}
.ItemMouseOut
{
WIDTH: 100%
}
.Arrow
{
FLOAT: right;
FONT-FAMILY: Webdings;
POSITION: absolute;
TEXT-ALIGN: left
}
.barOver
{
BORDER-RIGHT: blue 1px ridge;
BORDER-TOP: blue 1px ridge;
FLOAT: left;
BORDER-LEFT: blue 1px ridge;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 5px;
BORDER-BOTTOM: blue 1px ridge;
POSITION: relative;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: center
}

Now, other than the border going from 1px to 0 px and the bgcolor to "transparent", the only thing I changed is highlighted in red... that went from "100px", down to "0px". The reason why is that with a number in there, it was spacing the buttons apart, almost like cellpadding.

I know I'm supposed to cut down on the coding posted, but I wanted to give you all of the CSS as I'm not sure if one of the other variables is the culprit.

The main issue that I think I'm running into is that the original coding was for text to be turned into the drop down menu, and I'm trying to make images the drop down menu.

I've tried everything I can think of, so any help would be appreciated.

Thanks again for even trying to help. :)


*** Edit: Also, if you're able to tell me why there's such a large gap between the buttons and the image of the film / "Welcome" image, I'd be much obliged... That gap wasn't there until I put in this javascript.

Thanks!

blm126
08-29-2006, 04:08 PM
First of all I don't see the menu in question on that page. Second, what browser are you testing in that menu only works in Internet Explorer.

golfingtitan
08-29-2006, 04:56 PM
I'm using IE as my browser.

And the menu should be "coming down" from the buttons marked, "Becky-n-me", "MJ", "family" and "art".

Top left side of the page.

Do you know of a drop down menu script that allows nested links that would work on Firefox and the rest? I saw the one DD has, but that seemed like it was complicated to install.

golfingtitan
08-29-2006, 05:14 PM
You know what.... nevermind.... I'm going to try to use the one that DD provides.

Thanks for the help though.