Hey guys,
I’m new to the forums, and new to MODx as a CMS, I’’ve previously used Joomla. I like the flexibility MODx allows for, but I have questions regarding implementing JQuery menus into my template and corresponding the menu with the content of my website in MODx.
Here is the HTML of the navigation I am using:
<img src="images/menuimage_03.jpg" width="223" height="161">
<ul id="menu">
<li>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About Mori','','images/navupdatehover_03.jpg',1)"><img src="images/navupdate_03.jpg" width="223" height="63" border="0" id="About Mori" /></a>
<ul>
<li><a href="#">Link 1 </a></li>
<li><a href="#">Link 2 </a></li>
<li><a href="#">Link 3 </a></li>
</ul>
</li>
<li>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Nursery Products','','images/navupdatehover_06.jpg',1)"><img src="images/navupdate_06.jpg" width="223" height="63" border="0" id="Nursery Products" /></a>
<ul>
<li><a href="#">Link 4 </a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6 </a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
</li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Perennial Products','','images/navupdatehover_08.jpg',1)"><img src="images/navupdate_08.jpg" width="223" height="63" border="0" id="Perennial Products" /></a>
<ul>
<li><a href="#">Link 10 </a>
<li><a href="#">Link 11</a></li>
<li><a href="#">Link 12 </a></li>
</ul>
</li>
<li>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Retail Partners','','images/navupdatehover_10.jpg',1)"><img src="images/navupdate_10.jpg" width="223" height="63" border="0" id="Retail Partners" /></a>
<ul>
<li><a href="#">Link 13 </a></li>
<li><a href="#">Link 14 </a></li>
</ul>
</li>
<li>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Growing & Gardening','','images/navupdatehover_12.jpg',1)"><img src="images/navupdate_12.jpg" width="223" height="63" border="0" id="Growing & Gardening" /></a>
<ul>
<li><a href="#">Link 15 </a></li>
</ul>
</li>
<li>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Our Catalogues','','images/navupdatehover_14.jpg',1)"><img src="images/navupdate_14.jpg" width="223" height="63" border="0" id="Our Catalogues" /></a>
<ul>
<li><a href="#">Link 16 </a></li>
<li><a href="#">Link 17 </a></li>
</ul>
</li>
</ul>
<BR>
</div>
And Here’s a link to a functioning demo of the menu Ive chosen to go with:
http://www.i-marco.nl/weblog/jquery-accordion-menu/
As you can see I’ve altered the original menu, to incorporate images as each menu container,
I’m really having a hard time understanding how to get this menu working with the documents I have on MODx, any suggestions?
Thanks,
