View Full Version : Free Javascript Menu Questions

09-16-2005, 07:35 AM
HI, I am new to javascripts and would like to make a menu.. I

got it from this website http://free-javascript.all-faqs.info/ and it says download menu.js (http://free-javascript.all-faqs.info/downloads/download.php?file=menu.js) and a CSS stylesheet.

Can anyone teach me where i shld put my codings for the menu.js? Is it under <head> or <body>?
How shld i make the menu work?


09-16-2005, 07:45 AM
Easy to use

* Download menu.js file from our site
* Download CSS file from our site or create one
* Add the following string to HTML body: <SCRIPT SRC="menu.js" LANGUAGE="JavaScript"></SCRIPT><NOSCRIPT><a href="http://free-javascript.all-faqs.info/">Advanced JSMenu</a> </NOSCRIPT>
* Add link to CSS file: <link rel="stylesheet" type="text/css" href="your.css"> or add STYLE tag to HTML header
* Add onLoad event to BODY tag: <BODY onLoad="initMenu();">
* Add a visible link back to http://free-javascript.all-faqs.info
* Now you can create menu just adding simple code with MENU tags in your HTML
The directions tell you (if you read them carefully, probably didn't) to put the script inside of the body tags and the link to the stylesheet in your head tags.

09-16-2005, 08:10 AM
Is it i just add this <SCRIPT SRC="menu.js" LANGUAGE="JavaScript"></SCRIPT><NOSCRIPT><a href="http://free-javascript.all-faqs.info/">Advanced JSMenu</a> </NOSCRIPT> to the body and thats it?

Do i need to add in the menu.js contents too?

And for CSS <link rel="stylesheet" type="text/css" href="your.css"> , Just add this line or the whole of CSS contents?

Sorry, i did read the instructions just that i am so dumb that i dun really understand.. sorry for being tt dumb of me.. :(

09-16-2005, 03:08 PM
If you look on the site they have all sorts of examples, but I took one of their examples and removed the images for easier reading. Hope this helps some.

You already have the javascript file. So just create the two files below and put them all in the same folder and you are good to go.


<link rel="stylesheet" href="menu.css" />

<body onLoad="initMenu();">

<script src="menu.js" type="text/javaScript"></script>
<noscript><a href="http://free-javascript.all-faqs.info/">Advanced JSMenu</a> </noscript>

<MENU id="menu1" open="onclick" close="onclick">

<DIV menu="menu2">Folder 1</DIV>
<MENU id="menu2" open="onclick" close="onclick">
<DIV>Item 1.1</DIV>
<DIV>Item 1.2</DIV>
<DIV>Item 1.3</DIV>

<DIV menu="menu22" >Folder 2</DIV>
<MENU id="menu22">
<DIV>Item 2.1</DIV>
<DIV>Item 2.2</DIV>
<DIV>Item 2.3</DIV>
<DIV>Item 2.4</DIV>


<DIV menu="menu3" class="last">Folder 3</DIV>
<MENU id="menu3">
<DIV>Item 3.1</DIV>
<DIV>Item 3.2</DIV>
<DIV>Item 3.3</DIV>
<DIVItem 3.4</DIV>



MENU {font-size: 8pt; font-family: Arial; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;

margin-left: 7px; border-left: 1px solid #ABABAB;}
#menu1 {display: block !important; border: 1px dotted #ABABAB; width: 150px; height: 200px;

background-color: #eeeeee; padding-top: 5px; overflow: auto;}
MENU DIV { padding: 1px 1px 1px 1px; border: 1px none white; vertical-align: middle; cursor: pointer;

background-image: url('../img/Line.gif'); background-repeat : no-repeat; background-position : left

center; padding-left: 15px;}
.HOVER {background-color: #C7CDE7;}
.EXPANDABLE {background-image: url('../img/Plus.gif');}
.EXPAND {background-image: url('../img/Minus.gif');}
.EXPANDABLEHOVER {background-color: #C7CDE7; background-image: url('../img/Plus.gif');}
.folder {display: inline !important; width: 16px; height: 14px; border-style: none;};