How to use Mootools in Dreamweaver CS3

Hi Experts,
i am trying to use this bySlideMenu script i download from this site.

http://www.byscripts.info/scripts/javascript-dynamic-accordion-menu

i know i have to use Mootools for this script to work
i have dowload the Mootools script file and the BySlideMenu script . this is my HTML mark which i am creating using Dreamweaver CS#

but when i preview in any browser, i am not seeing the accordion effect for the menu.

i think i am making a mistake in Mootools implementation. This is the first time i am using Mootools.

can someone please help me out where am i making the mistake.

Thanks and appreciate it

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><!-- InstanceBegin template="/Templates/test.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="../assets/css/style.css" type="text/css">
<!-- InstanceBeginEditable name="head" -->
<script language="javascript" src="../assets/js/mootools.js" type="text/javascript" ></script>
<script language="javascript" src="../assets/js/byslidemenu.js"  type="text/javascript"></script>
<!-- InstanceEndEditable -->
</head>

<body>

<div id="wrap">
	<div id="header">
    
    </div>
	<div id="top"></div>
	<div id="sidebar">
    <!-- InstanceBeginEditable name="sidebar" -->
    <script language="javascript" type="text/javascript">
	 var verticalmenu = new BySlideMenu('verticalmenu', {vertical: true});
	</script>
	  <ul id="verticalmenu">
        <li>Home</li>
         <li>About Us</li>
         <li>Contact Us</li>
         <li>Directions</li>
         <li>Products</li>
     </ul>
     
   <!-- InstanceEndEditable -->
    </div>
	<div id="main" align="left">
    <!-- InstanceBeginEditable name="main" -->

    <!-- InstanceEndEditable -->
   </div>
	<div id="footer">
    <!-- InstanceBeginEditable name="footer" -->

    <!-- InstanceEndEditable -->
    </div>
</div>
</body>
<!-- InstanceEnd --></html>

Open in new window

LVL 2
niceoneishereAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineDon't talk to me.Commented:
There is not a "Dreamweaver" way to use MooTools.  It's just javascript include files and HTML.  So the things to check are:

1) All mootools files are uploaded to the server and the paths to those files are correct

2) Make sure the syntax of the code is correct.

You've customized the code from the demo, so you may have made a typo.  I always recommend a straight copy/paste of the demo code into a blank page just to see if it will work.  Once you know the script is not flawed, then you should customize it.
niceoneishereAuthor Commented:
Thanks for replying and i am glad that i am atleast on right track. Now do you think there is something wrong with the way i am calling the script in the HTML. currently i am calling like below
 <script language="javascript" type="text/javascript">
         var verticalmenu = new BySlideMenu('verticalmenu', {vertical: true});
        </script>
          <ul id="verticalmenu">
        <li>Home</li>
         <li>About Us</li>
         <li>Contact Us</li>
         <li>Directions</li>
         <li>Products</li>
     </ul>

Thanks

Open in new window

Jason C. LevineDon't talk to me.Commented:
Try moving the script block into the <head></head> area of the page and reload?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
niceoneishereAuthor Commented:
tired that sir, its still not working.

here is my corrected code. i have loaded all the requried script files as mentioned in BySlideMenu script site.

Thanks

<script language="javascript" src="../assets/js/Element.Event.js" type="text/javascript" ></script>
    <script language="javascript" src="../assets/js/Element.Dimensions.js" type="text/javascript" ></script>
    <script language="javascript" src="../assets/js/Fx.Tween.js" type="text/javascript" ></script>
    <script language="javascript" src="../assets/js/Fx.Transitions.js" type="text/javascript" ></script>
<script language="javascript" src="../assets/js/byslidemenu.js"  type="text/javascript"></script>

<ul id="verticalmenu">
        <li>Home</li>
         <li>About Us</li>
         <li>Contact Us</li>
         <li>Directions</li>
         <li>Products</li>
     </ul>
     <script language="javascript" type="text/javascript">
	 var verticalmenu = new BySlideMenu('verticalmenu', {vertical: true});
	</script>

Open in new window

niceoneishereAuthor Commented:
got it working, i forgot to load the core script file duh. lol thanks a lot for your help
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JScript

From novice to tech pro — start learning today.