I've seen lots of questions about jQuery sliding effects and menu the last times.
Here I have a quick and easy solution.
The result is a menu where all elements that have child elements won't load their page but will expand their submenu.
EDIT: This example shows the basic instructions how to integrate jquery effects to your CMSms menu. The effect of the following example only toggles the submenu of one menu entry on/off (slides down and up to show/hide the submenu). To achieve a so-called "accordion" effect - closing automatically all other non selected menu entrys - read this and the following post below:
http://forum.cmsmadesimple.org/index.ph ... #msg199929
Requirements:
This example is using the default page template "Left simple navigation + 1 column", the default menu template "simple_navigation.tpl", a slightly modificated version of the default menu stylesheet "Navigation: Simple - Vertical", a custom javascript file and last not least thejQuery libary javascript file (download it from the developers site).
At first notice, that your page will not work if the visitor has no javascript activated.
Therefore i suggest you not to use sectionheaders as "parent links" but simple pages with a link list to the submenu entries or a short teaser what to find here.
EDIT: Or maybe it would be better to create internal page links that refers to the first child element
1st step: the js stuff
Upload the jQuery libary to your server. (e.g. uploads/js/jquery.js)
Create a simple text file and insert the following code:
Code: Select all
$(document).ready(function() {
$("#menu_vert ul li.parent h3, #menu_vert ul li.menuparent h3, #menu_vert ul li.menuparent a.menuparent, #menu_vert ul li.parent a.parent").click(function () {
$(this).parent().find("ul:first").slideToggle("fast");
return false;
});
});
2nd: the template stuff
Edit your page template and enter in the head section the link to the jQuery libary js file and to the other js file you've just created.
Example:
Code: Select all
<head>
...
<__script__ src="uploads/js/jquery.js" type="text/javascript"></__script>
<__script__ src="uploads/js/navigation.js" type="text/javascript"></__script>
...
</head>
3rd: the stylesheet stuff
Edit the stylesheet "Navigation: Simple - Vertical" and add following lines at the end:
Code: Select all
/* this works with up to 5 menu levels */
/* to increase it up to more levels just copy the last line and add "li.menuactive ul" */
/* (this might be similar to the default stylesheets of the default CSS dropdown menu) */
#menu_vert ul li.currentpage ul,
#menu_vert ul li.menuactive ul,
#menu_vert ul li.menuactive ul li.menuactive ul,
#menu_vert ul li.menuactive ul li.menuactive ul li.menuactive ul,
#menu_vert ul li.menuactive ul li.menuactive ul li.menuactive ul li.menuactive ul
{
display:block;
}
/* hide all other submenus */
#menu_vert ul li ul,
#menu_vert ul li.menuactive ul li ul
{
display:none;
}
Enjoy :)
Edit (06.11.2009) : Modified the CSS to work with more than 2 menu levels.