[Plugin: Advanced Sidebar Menu] accordion menu

Give this a try.

jQuery(document).ready( function($) {
    //Makes the grandchild menu show then the child menu is hovered
    $(".child-sidebar-menu").hover(function(){
 	   //Opens and closes the granchild menu when not on a grandchild page
         $(this).find('ul').not( $('.child-sidebar-menu ul li.current_page_item').parent() ).not('.child-sidebar-menu ul li.current_page_item ul').slideToggle(300, function(){
            $('.child-sidebar-menu ul li.current_page_item').parent().show();
            $('.child-sidebar-menu ul li.current_page_item ul').show();
         });
                 }, function(){
                              return;
          });
    //Initially hides the grandchild menu
    $('.child-sidebar-menu ul').hide();

    //Initially show the grandchild menu if on a grandchild or child pages
    $('.child-sidebar-menu ul li.current_page_item').parent().show();
    $('.child-sidebar-menu ul li.current_page_item ul').show();
    $('.child-sidebar-menu li.current_page_item ul').show();
});

Cheers.

Hello Mat, I gave this a try and I decided that the “hover” function makes the whole menu too sensitive. I have 14 children menus without grandchildren underneath the one with grandchildren and the hover effect makes all 14 items slide up and down simultaneously even if you touch the last one at the bottom accidentally.
Do you think that changing the hover function to the click function would make a difference?

Cheers!

Here is the click version of the same code.

jQuery(document).ready( function($) {
    //Makes the grandchild menu show then the child menu is hovered
    $(".child-sidebar-menu").click(function(){
 	   //Opens and closes the granchild menu when not on a grandchild page
         $(this).find('ul').not( $('.child-sidebar-menu ul li.current_page_item').parent() ).not('.child-sidebar-menu ul li.current_page_item ul').slideToggle(300, function(){
            $('.child-sidebar-menu ul li.current_page_item').parent().show();
            $('.child-sidebar-menu ul li.current_page_item ul').show();
         });
                 }, function(){
                              return;
          });
    //Initially hides the grandchild menu
    $('.child-sidebar-menu ul').hide();

    //Initially show the grandchild menu if on a grandchild or child pages
    $('.child-sidebar-menu ul li.current_page_item').parent().show();
    $('.child-sidebar-menu ul li.current_page_item ul').show();
    $('.child-sidebar-menu li.current_page_item ul').show();
});

Thank you Mat, I have sent you an email to [email protected] with some zip files attached.
Let me know what you think about it.

Take care and have a great day!

Good Morning dearjudy,
Thank you VERY much for your donation! It helps keep these plugins alive!

I have recreated the functionality from the example you send me. Here are 4 variations to try out.

#1 This is an exact replica of the examples functionality

jQuery(document).ready( function($) {
    $(".child-sidebar-menu > li > a").click(function(){
    	//Slides open and closed the grandchild menu
         $(this).parent().find('ul').slideToggle(400);
         			return false;
     });
    //Initially hides the grandchild menu
    $('.child-sidebar-menu ul').hide();
});

#2 Here is a replica of the example with the grandchild menu initially showing as open when on a Child or Grandchild page

jQuery(document).ready( function($) {
    $(".child-sidebar-menu > li > a").click(function(){
    	//Slides open and closed the grandchild menu
         $(this).parent().find('ul').slideToggle(400);
         			return false;
     });
    //Initially hides the grandchild menu
    $('.child-sidebar-menu ul').hide();

    //Initially show the grandchild menu if on a grandchild or child pages
    $('.child-sidebar-menu ul li.current_page_item').parent().show();
    $('.child-sidebar-menu ul li.current_page_item ul').show();
    $('.child-sidebar-menu li.current_page_item ul').show();
});

#3 Here is a replica of the example with the action changed to hover. It allow for clicking to navigate to the child level pages.

jQuery(document).ready( function($) {
    $(".child-sidebar-menu > li > a").hover(function(){
    	//Slides open and closed the grandchild menu
         $(this).parent().find('ul').slideToggle(400);
         			return false;
     }, function(){
    	 return false;
     });

    //Initially hides the grandchild menu
    $('.child-sidebar-menu ul').hide();

});

#4 This is a replica of the hover example with the grandchild level pages initial showing as open when on a child or grandchild page

jQuery(document).ready( function($) {
    $(".child-sidebar-menu > li > a").hover(function(){
    	//Slides open and closed the grandchild menu
         $(this).parent().find('ul').slideToggle(400);
         			return false;
     }, function(){
    	 return false;
     });

    //Initially hides the grandchild menu
    $('.child-sidebar-menu ul').hide();

    //Initially show the grandchild menu if on a grandchild or child pages
    $('.child-sidebar-menu ul li.current_page_item').parent().show();
    $('.child-sidebar-menu ul li.current_page_item ul').show();
    $('.child-sidebar-menu li.current_page_item ul').show();
});

Give those a shot and let me know if one of them work for you, or if you need one tweaked a little.

Cheers

Hello Mat, great work, well done!
Here’s a report back:

1. Almost the exact replica of the examples functionality. There are some minor issues:
– On the parent page the child’s menus (without children) which are sitting below the child’s menu with children are not clickable (they don’t work as links any more).
– When on the grandchild page – the grandchild’s menu is closed and you have to click it again to open it (would be nice to keep it open, less work)
– If we have two or more child’s menus with children would be useful to have only one menu opened at a time (when clicking on the next nested menu the previously opened one closes itself automatically).

2. Almost perfect! This is the one with the grandchild menu initially showing as open when on a Child or Grandchild page.
-Links are not clickable (they don’t work as links any more) below the child’s menu with children.

3. It works well. The one with hover effect and allow for clicking to navigate to the child level pages.

– Would be nice to keep the menu opened when on the child’s and grandchild’s page.
– A slightly down side for me is if you have two more children with nested menus the hover function could make it a bit chaotic if you are not careful with moving your mouse around or when you are first time on a website and not quite familiar with navigation.
Can we keep hover function on the paret’s page and click function when on a child or grandchild page?
Otherwise it’s good fun.

4. This is a replica of the hover example with the grandchild level pages initial showing as open when on a child or grandchild page.
Works as a charm! but can we try to keep hover function on the paret’s page and click function when on a child or grandchild page?

Wonderful work, I think you are very talented! ??
I am looking forward to using your plugin on my next project soon.
Cheers

Good Afternoon.
This Version Works in the following ways when on a child or grandchild page

• The grandchild menu displays open initially
• The grandchild menu can be opened or closed by clicking

This Version Works in the following ways when on a parent page

• The grandchild menu is initially closed
• The grandchild menu can be opened and closed by hovering
• The Child level links can be clicked on to follow

jQuery(document).ready( function($) {
	//Adds a class to keep track if we are on a parent of child page
	$('.current_page_item').next().addClass('sidebar-menu-hover');

	//Make the menu open and close by hovering when on a parent page
    $(".child-sidebar-menu.sidebar-menu-hover > li > a").hover(function(){
    	//Slides open and closed the grandchild menu
         $(this).parent().find('ul').slideToggle(400);
         			return false;
     }, function(){
    	 return false;
     });

    //Make the menu open and close by clicking if on a child or grandchild page
    $(".child-sidebar-menu > li > a").not(".child-sidebar-menu.sidebar-menu-hover > li > a").click(function(){
         $(this).parent().find('ul').slideToggle(400);
         			return false;
     });

    //Initially hides the grandchild menu
    $('.child-sidebar-menu ul').hide();

    //Initially show the grandchild menu if on a grandchild or child pages
    $('.child-sidebar-menu ul li.current_page_item').parent().show();
    $('.child-sidebar-menu ul li.current_page_item ul').show();
    $('.child-sidebar-menu li.current_page_item ul').show();
});

Let me know if you need any further tweaking.

Cheers

Good Evening, Mat,
On the Child and Grandchild pages menus without children, underneath those with children, don’t work as hyperlinks, they are blocked. I am going to send you a link to the test page, so you can see for yourself what I am talking about.
Thanks a lot.

Sorry About that. I didn’t take into consideration the menus which have no grandchildren.

This one should work a little better

jQuery(document).ready( function($) {
//Adds a class to keep track if we are on a parent of child page
$(‘.current_page_item’).next().addClass(‘sidebar-menu-hover’);

//Make the menu open and close by hovering when on a parent page
$(“.child-sidebar-menu.sidebar-menu-hover > li > a”).hover(function(){
//Slides open and closed the grandchild menu
$(this).parent().find(‘ul’).slideToggle(400);
return false;
}, function(){
return false;
});

//Make the menu open and close by clicking if on a child or grandchild page
$(“.child-sidebar-menu > li > a”).not(“.child-sidebar-menu.sidebar-menu-hover > li > a”).click(function(){
//If there all no children link the link return Otherwise stop the link
if( $(this).parent().find(‘ul’).slideToggle(400).length > 0 ){
return false;
} else {
return true;
}
});

//Initially hides the grandchild menu
$(‘.child-sidebar-menu ul’).hide();

//Initially show the grandchild menu if on a grandchild or child pages
$(‘.child-sidebar-menu ul li.current_page_item’).parent().show();
$(‘.child-sidebar-menu ul li.current_page_item ul’).show();
$(‘.child-sidebar-menu li.current_page_item ul’).show();
});

This thread seems to have fallen apart on the screen. Lets see if this one displays a little better

jQuery(document).ready( function($) {
	//Adds a class to keep track if we are on a parent of child page
	$('.current_page_item').next().addClass('sidebar-menu-hover');

	//Make the menu open and close by hovering when on a parent page
    $(".child-sidebar-menu.sidebar-menu-hover > li > a").hover(function(){
    	//Slides open and closed the grandchild menu
         $(this).parent().find('ul').slideToggle(400);
         			return false;
     }, function(){
    	 return false;
     });

    //Make the menu open and close by clicking if on a child or grandchild page
    $(".child-sidebar-menu > li > a").not(".child-sidebar-menu.sidebar-menu-hover > li > a").click(function(){
    	//If there all no children link the link return Otherwise stop the link
    	if( $(this).parent().find('ul').slideToggle(400).length > 0 ){
    		return false;
    	} else {
    		return true;
    	}
     });

    //Initially hides the grandchild menu
    $('.child-sidebar-menu ul').hide();

    //Initially show the grandchild menu if on a grandchild or child pages
    $('.child-sidebar-menu ul li.current_page_item').parent().show();
    $('.child-sidebar-menu ul li.current_page_item ul').show();
    $('.child-sidebar-menu li.current_page_item ul').show();
});

It works very well, I am very pleased for your support and help.
Thanks a lot!
??

Marking as Resolved