• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 28 posts ]  Go to page 1, 2  Next
Author Message
 Post subject: HowTo: Menu & jQuery slide Effects (slideUp/slideDown/accordion)
PostPosted: Tue Aug 04, 2009 4:15 pm 
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:

$(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:

<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:

/* 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.

Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: HowTo: jQuery slide menu
PostPosted: Thu Aug 06, 2009 11:22 am 
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.


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: HowTo: jQuery slide menu
PostPosted: Fri Nov 06, 2009 5:26 pm 
Offline
Forum Members
Forum Members

Joined: Thu Apr 17, 2008 6:37 pm
Posts: 14
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: HowTo: jQuery slide menu
PostPosted: Fri Nov 06, 2009 5:55 pm 
Offline
Forum Members
Forum Members

Joined: Thu Apr 17, 2008 6:37 pm
Posts: 14
Ok I found it : add the css

#menu_vert ul li.menuactive ul li.menuactive ul
{
display:block;
}


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: HowTo: jQuery slide menu
PostPosted: Fri Nov 06, 2009 6:01 pm 
Offline
Forum Members
Forum Members

Joined: Thu Apr 17, 2008 6:37 pm
Posts: 14
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.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: HowTo: jQuery slide menu
PostPosted: Fri Nov 06, 2009 6:24 pm 
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.

Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: HowTo: jQuery slide menu
PostPosted: Fri Nov 06, 2009 6:38 pm 
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.


Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: HowTo: jQuery slide menu
PostPosted: Fri Nov 06, 2009 6:39 pm 
Offline
Forum Members
Forum Members

Joined: Thu Apr 17, 2008 6:37 pm
Posts: 14
Ok thanks a lot anymore, I'll try it out later.
thx again for your very fast answers.
Yann


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: HowTo: jQuery slide menu
PostPosted: Wed Feb 03, 2010 2:47 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Wed Jun 20, 2007 7:06 am
Posts: 134
Location: geneva
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: HowTo: jQuery slide menu
PostPosted: Wed Feb 03, 2010 8:54 pm 
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):

Quote:

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



Top
   
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: HowTo: jQuery slide menu
PostPosted: Thu Feb 04, 2010 3:23 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Wed Jun 20, 2007 7:06 am
Posts: 134
Location: geneva
{solved}

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

Code:
$(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:
$(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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: HowTo: jQuery slide menu
PostPosted: Fri Feb 05, 2010 3:28 am 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12659
Location: Arizona
Any chance you have a link to a working menu to see what it looks like?...

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
Image


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: HowTo: Menu Accordion Effect (jQuery)
PostPosted: Thu Mar 11, 2010 8:20 pm 
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") . .  .

    excerpt from menu template "simple_navigation.tpl" wrote:
    [...]

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


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

    Code:

    {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:

    $(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.

    Top
       
     
    Share On:
    Share on Facebook Share on Twitter Share on Google+
     Post subject: Re: HowTo: Menu & jQuery slide Effects (slideUp/slideDown/accordion)
    PostPosted: Thu Mar 25, 2010 1:43 pm 
    Offline
    New Member
    New Member

    Joined: Sun Dec 20, 2009 12:20 pm
    Posts: 3
    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


    Top
      Profile  
     
    Share On:
    Share on Facebook Share on Twitter Share on Google+
     Post subject: Re: HowTo: Menu & jQuery slide Effects (slideUp/slideDown/accordion)
    PostPosted: Thu Mar 25, 2010 3:16 pm 
    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.


    Top
       
     
    Share On:
    Share on Facebook Share on Twitter Share on Google+
    Display posts from previous:  Sort by  
    Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 28 posts ]  Go to page 1, 2  Next

    All times are UTC


    Who is online

    Users browsing this forum: No registered users


    You cannot post new topics in this forum
    You cannot reply to topics in this forum
    You cannot edit your posts in this forum
    You cannot delete your posts in this forum
    You cannot post attachments in this forum

    Search for:
    Jump to:  
    Hosting Nation - Managed CMSMS Hosting