Help adding my first js menu on C5

Permalink
So I found this awesome navigation menu with instruction on how to put it into a regular HTML style website. I've been working on it all day, and the CSS works perfectly fine, but I can't get the .js scripts to run on my C5 website.

Here's the webpage with the example menu and scripts I am attempting to use.

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.h...

Below is the code I've added in the header I'm using. The only thing I really changed in the original code sample is the paths and filenames to my own preferences I like.

<style type="text/css">@import "<?php  echo $this->getThemePath()?>/accordion_side_menu/accordion_side_menu.css";</style>
<script type="text/javascript" src=<?=$this->getThemePath()?>http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visithttp://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>


[Edit - For some reason this code ^above^ isn't displaying correctly in this forum post when I review it. There is not supposed to be any of that garbled hyperlink text between the first </style> and the next <script> tag. Every time I copy and paste the actual code, it appears differently in this post.]


Also in the header...

<script type="text/javascript">
ddaccordion.init({
   headerclass: "expandable", //Shared CSS class name of headers group that are expandable
   contentclass: "categoryitems", //Shared CSS class name of contents group
   revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
   mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
   collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
   defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
   onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
   animatedefault: false, //Should contents open by default be animated into view?
   persiststate: true, //persist state of opened contents within browser session?
   toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
   togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
   animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
   oninit:function(headers, expandedindices){ //custom code to run when headers have initialized



On my page I added an HTML block with this page. Menu looks fine, but it doesn't collapse or open or do any of the fun javascript. It just shows a fully expanded navigation menu.

<div class="arrowlistmenu">
<h3 class="menuheader expandable">CSS Library</h3>
<ul class="categoryitems">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>
<h3 class="menuheader expandable">CSS Drive</h3>
<ul class="categoryitems">
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>



What's one way to implement this menu? Can I change a few lines of the code or script to make it work?

 
radrickdavis replied on at Permalink Reply
Here's my web page with the navigation menu that doesn't fully work yet.

http://www.abandonedadventures.com/rickdavis/index.php/background...