Help the n00b [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : Help the n00b

Zero-Blade

09-09-2003, 10:03 AM

Hi everyone. I have never used JS before so I want some help from the professionals. I'm making myself a web site and i want to make the buttons and links on it animated with JS, and make falling menus like the ones on blizzard.com . Any help will be apriciated.

96turnerri

09-09-2003, 10:06 AM

hi you mean menus where you place the mouse over them and then a menu pops down?

96turnerri

09-09-2003, 10:08 AM

<HEAD>





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

<BODY OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy" bgColor=aliceblue>

font color="#800080"><b>Sample Menu</b></font></p>
<DIV Id="menuBar" class="menuBar" >
<DIV Id="Bar1" class="Bar" menu="menu1">Menu #1</DIV>
<DIV Id="Bar2" class="Bar" menu="menu2">Menu #2</DIV>
<DIV Id="Bar3" class="Bar" menu="menu3">Menu #3</DIV>
<DIV Id="Bar4" class="Bar" menu="menu4">Menu #4</DIV>
</DIV>

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

Now just fiddle with the font, colours and names

hope this helps
Rich

Zero-Blade

09-09-2003, 04:16 PM

Thanks alot man, thats just what I needed, but I have one more question. At the beginning of the script at line <link href=""> there's an css. Do I need to make one for the script?

Jack O'Connell

09-09-2003, 04:33 PM

Yes, this will get you started:
BODY
{
}
.menuBar
{
POSITION: relative;
BACKGROUND-COLOR: 000066;
TEXT-ALIGN: center
}
.Bar
{
BORDER-RIGHT: blue 1px outset;
BORDER-TOP: blue 1px outset;
FLOAT: left;
BORDER-LEFT: blue 1px outset;
WIDTH: 120px;
CURSOR: hand;
TEXT-INDENT: 5px;
TEXT-DECORATION: bold;
BORDER-BOTTOM: blue 1px outset;
POSITION: relative;
BACKGROUND-COLOR: 000066;
font-style=bold;
TEXT-ALIGN: center
}
.menu
{
BORDER-RIGHT: buttonhighlight thin outset;
BORDER-TOP: buttonhighlight thin outset;
VISIBILITY: hidden;
BORDER-LEFT: buttonhighlight thin outset;
WIDTH: 200px;
LINE-HEIGHT: 105%;
BORDER-BOTTOM: buttonhighlight thin outset;
POSITION: absolute;
BACKGROUND-COLOR: 000066
}
.menuItem
{

PADDING-RIGHT: 0px;
PADDING-LEFT: 5px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
}
.ItemMouseOver
{
TEXT DECORATION: bold;
PADDING-RIGHT: 0px;
PADDING-LEFT: 5px;
WIDTH: 100%;
CURSOR: hand;
COLOR: highlighttext;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid;
BACKGROUND-COLOR: blue
}
.ItemMouseOut
{
WIDTH: 100%
}
.Arrow
{
FLOAT: right;
FONT-FAMILY: times new roman;
POSITION: absolute;
TEXT-ALIGN: left
}
.barOver
{
BORDER-RIGHT: blue 1px ridge;
BORDER-TOP: blue 1px ridge;
FLOAT: left;
BORDER-LEFT: blue 1px ridge;
WIDTH: 150px;
CURSOR: hand;
TEXT-INDENT: 5px;
BORDER-BOTTOM: blue 1px ridge;
POSITION: relative;
BACKGROUND-COLOR: 000066;
TEXT-ALIGN: center
}

Zero-Blade

09-10-2003, 04:00 AM

Ok, so when I used the first script the menu became one big with submenus, but they're not clickable... :( btw the second script is the css right?

Jack O'Connell

09-10-2003, 07:53 AM

View this source and you will understand:

http://ibstotalspa.com/IBSPage/shopcartindex.html

The page is in frames so click to view source near the top.

Jack