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!
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!