Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2005
    Thanked 0 Times in 0 Posts

    Free Javascript Menu Questions

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


  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    In a place far, far away...
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by http://free-javascript.all-faqs.info/
    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.

  • #3
    New to the CF scene
    Join Date
    Sep 2005
    Thanked 0 Times in 0 Posts
    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..

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Thanked 0 Times in 0 Posts
    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;};


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts