HowTo: Menu & jQuery slide Effects (slideUp/slideDown/accordion)

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
NaN

HowTo: Menu & jQuery slide Effects (slideUp/slideDown/accordion)

Post by NaN »

Hello there.

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;
	});
});

Upload this file to this directory you stored the jQuery libary and name it "navigation.js" (or what ever you want).

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>

Search for the menu tag and remove the collapse parameter (since you need the full menu with all submenus).

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;
}

4rth:
Enjoy  :)


Edit (06.11.2009) : Modified the CSS to work with more than 2 menu levels.
Last edited by NaN on Fri Jul 16, 2010 3:06 pm, edited 1 time in total.
Deak

Re: HowTo: jQuery slide menu

Post by Deak »

Thanks for the tip, NaN. jQuery is all the rage, but I'm a luddite so haven't used it for menus yet. I might have a play with this once I've finished my current projects.

What would make me really happy is a quality CSS Tips & Tricks section under the Support section of this website. I'd even be happy to write a few articles.
yannkee
Forum Members
Forum Members
Posts: 14
Joined: Thu Apr 17, 2008 6:37 pm

Re: HowTo: jQuery slide menu

Post by yannkee »

Hello,
Thanks, it works great !
BUT... :)
I use it with a sub-submenu and the second level doesn't toogle... :(
Explain :
Home
Products
-- Range 1
----- Product R1.1
----- Product R1.2...
-- Range 2
----- Product R2.1
----- Product R2.2...
...

When I open the page R2.1 for exemple, the level Products toogles rightly but Range2 level does not...

Have you got an idea ?
Thanks anymore I worked around this with no results for too many hours...

Yann
yannkee
Forum Members
Forum Members
Posts: 14
Joined: Thu Apr 17, 2008 6:37 pm

Re: HowTo: jQuery slide menu

Post by yannkee »

Ok I found it : add the css

#menu_vert ul li.menuactive ul li.menuactive ul
{
display:block;
}
yannkee
Forum Members
Forum Members
Posts: 14
Joined: Thu Apr 17, 2008 6:37 pm

Re: HowTo: jQuery slide menu

Post by yannkee »

Another question :
How to close ALL the levels of the menu BUT the last clicked AND the active level

Explain with my products/range exemple :

Home
Products
-- Range 1
----- Product R1.1
----- Product R1.2...
-- Range 2
----- Product R2.1
----- Product R2.2...
Services
...

1./ everything is closed excepted my current page (myFirstService), so the menu looks like that
Home
Products
Services
-- myFirstService

2./ I click on Products, so it expands
-- Range 1
-- Range 2
appears

3./ I click on Range 2, it expands
-- Range 1
-- Range 2
----- product R2.1
----- product R2.2
appears, it's all right

4./ I click on Range 1
it expands, right, but I want the other to close excepted Services>MyFirstService level...

HOW CAN I DO THAT ???

thanks,
Yann
Last edited by yannkee on Fri Nov 06, 2009 6:14 pm, edited 1 time in total.
NaN

Re: HowTo: jQuery slide menu

Post by NaN »

yannkee wrote: Ok I found it : add the css

#menu_vert ul li.menuactive ul li.menuactive ul
{
display:block;
}
This might be similar to the default stylesheets of the default CSS dropdown menu.
You always need to adapt your CSS if your menu has more levels than that are styled in the CSS.
(View first post for example)
Last edited by NaN on Fri Nov 06, 2009 6:34 pm, edited 1 time in total.
NaN

Re: HowTo: jQuery slide menu

Post by NaN »

yannkee wrote: Another question :
How to close ALL the levels of the menu BUT the last clicked AND the active level
[...]
it expands, right, but I want the other to close excepted Services>MyFirstService level...
This is tricky.
To be honest i don't have a solution yet.
You will need to adapt the javascript that toggles the submenus.
yannkee
Forum Members
Forum Members
Posts: 14
Joined: Thu Apr 17, 2008 6:37 pm

Re: HowTo: jQuery slide menu

Post by yannkee »

Ok thanks a lot anymore, I'll try it out later.
thx again for your very fast answers.
Yann
User avatar
jd447
Forum Members
Forum Members
Posts: 134
Joined: Wed Jun 20, 2007 7:06 am
Location: geneva

Re: HowTo: jQuery slide menu

Post by jd447 »

Hey NaN,

great job, it works really fine!

quick question though, would it be possible to have the same effect, but with a mouseOver instead of click?

i tried to change the navigation.js, but doesn't seem to work.

thanks mate,

jd
________________________
http://www.pixinside.ch
NaN

Re: HowTo: jQuery slide menu

Post by NaN »

jd447 wrote:quick question though, would it be possible to have the same effect, but with a mouseOver instead of click?

i tried to change the navigation.js, but doesn't seem to work.
What changes did you try?
You just need to change the "click" into "mouseover" (i guess at least - did not test it yet):

$(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").mouseover(function () {
$(this).parent().find("ul:first").slideToggle("fast");
return false;
});
});
User avatar
jd447
Forum Members
Forum Members
Posts: 134
Joined: Wed Jun 20, 2007 7:06 am
Location: geneva

Re: HowTo: jQuery slide menu

Post by jd447 »

{solved}

to have the accordeon effect on mouse over change the navigation.js:

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;
	});
});
by

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").hover(function () {
		$(this).parent().find("ul:first").slideToggle("fast");
		return false;
	});
});
g'day mates!
________________________
http://www.pixinside.ch
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: HowTo: jQuery slide menu

Post by Dr.CSS »

Any chance you have a link to a working menu to see what it looks like?...
NaN

HowTo: Menu Accordion Effect (jQuery)

Post by NaN »

Dr.CSS wrote:
Any chance you have a link to a working menu to see what it looks like?...
I'm not using this kind of menu.
Just wanted to show how it can be realized ;)

yannkee wrote:
How to close ALL the levels of the menu BUT the last clicked AND the active level
[...]
I want the other to close excepted Services>MyFirstService level...

HOW CAN I DO THAT ???
Okay, here we go again... :)

The example above shows how to toggle the menu entrys on and off with a nice sliding effect using jquery.
To close automatically all other non selected menu entrys (called accordion effect) you would need additionally jquery UI with accordion widget or the jquery accordion plugin and dimensions plugin.
However i found a simple solution without all these additional plugins so you only need to adapt the menu template and another custom javascript. All you need to do is what was already mentioned above and the following steps:
(I'm referring again to the default menu template "simple_navigation.tpl".)

1. template stuff

Import the tpl file into your database using the MenuManager import funcion. Name it what ever you want and modify it like this:
Add to all elements of active menu entrys that have children an additional classname (e.g. "open") . .  .

[quote="excerpt from menu template "simple_navigation.tpl""][...]

{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
url}">{$node->menutext}

[...][/quote]

Edit your page template and set the parameter "template" to your {menu} tag to use the new adapted menu template.
E.g:

Code: Select all


{menu ... template="your new database template"}

2. Javascript stuff

Use this custom javascript instead of the one given in the first example to achieve the accordion effect:

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 () {
		// if we're not selecting an open element...
		if($(this).parent().attr('class').indexOf('open') < 0 || $(this).parent().find('ul:first').css('display') != 'block') {
			// show children 
			$(this).parent().find('ul:first').slideDown('fast');
			// search for all elements of class openparent -> change class to open
			$('#menu_vert ul li.openparent').each(function(i,elm) {
				$(elm).removeClass('openparent');
				$(elm).addClass('open');
			});
			// search for parents of class open -> change class to openparent
			$(this).parent().parents('li').each(function(i,elm) {
				$(elm).removeClass('open');
				$(elm).addClass('openparent');
			});
			// search for elements of class open -> hide children -> change class to closed
			$('#menu_vert ul li.open').each(function(i,elm) {
				$(elm).find('ul:first').slideUp('fast');
				$(elm).removeClass('open');
				$(elm).addClass('closed');
			});
			// change class to open
			$(this).parent().removeClass('openparent');
			$(this).parent().removeClass('closed');
			$(this).parent().addClass('open');
		}
		else {
			// if we're selecting an open element -> just close it an change class to closed
			$(this).parent().find('ul:first').slideUp('fast');
			$(this).parent().removeClass('open');
			$(this).parent().removeClass('openparent');
			$(this).parent().addClass('closed');
		}
		return false;
	});
});

3. Enjoy again :D



PS: Don't use the this effect together with the hover function ... your menu will expand and collapse uncontrollably since it always changes its height when other menu entrys collapse. So the hover status of your mouse will always change ;)
Last edited by NaN on Mon Mar 22, 2010 1:03 am, edited 1 time in total.
horton
New Member
New Member
Posts: 3
Joined: Sun Dec 20, 2009 12:20 pm

Re: HowTo: Menu & jQuery slide Effects (slideUp/slideDown/accordion)

Post by horton »

Hi,

This works great!
I was wondering is it possible not only to toggle submenu but load page also when menu is clicked ?
How would you do that?

Thanks
NaN

Re: HowTo: Menu & jQuery slide Effects (slideUp/slideDown/accordion)

Post by NaN »

Just replace the return false; with return true; in the custom javascript.
But i believe it will load your page while the effect is still running.
Locked

Return to “Layout and Design (CSS & HTML)”