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"
User avatar
tophers
Forum Members
Forum Members
Posts: 218
Joined: Thu Jun 07, 2007 7:25 pm
Location: Calgary, Alberta, Canada

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

Post by tophers »

This works like a charm!

To drill down into that last question about loading pages, how would you target only 2nd level parents to return true? I don't want the user to have to Open a menu level, then Open another one to get to content - rather they'd Open the first level, then if they click on a second-level (even a parent), it will open that page (and of course show the third-level navigation once on that page).

In my example below, I'd like the link 'Calgary TELUS Convention Centre' to open a page, rather than trigger the Open activity. Any ideas? And please excuse the mess of a site - I'm still at the start of the process, trying to get a structure laid down for the content contributors as we work on final design and cleanup of code, so there's bound to be a lot of oddness!

http://fusetest.lightafuse.ca/index.php ... mmodations
NaN

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

Post by NaN »

You need to modify your menu template and add the item dept as classname to all menu links that have children:

{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'}
  • level_{$node->depth}" href="{$node->url}">{$node->menutext}

    And in the javascript intsead of returning false check for that classname and decide if you want to return true (loads the page) or false (just toggles the submenu):

    Code: Select all


          if($(this).attr('class').indexOf('level_2') > 0) // adapt 'level_[n]' to fit your needs
             return true;
          else
             return false;

  • User avatar
    tophers
    Forum Members
    Forum Members
    Posts: 218
    Joined: Thu Jun 07, 2007 7:25 pm
    Location: Calgary, Alberta, Canada

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

    Post by tophers »

    Fantastic! I just have to move some content around to accommodate some of the first-level pages, but the example I used works perfectly now. Thanks!
    Chris Humphreys
    Forum Members
    Forum Members
    Posts: 12
    Joined: Mon Jul 26, 2010 2:03 pm

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

    Post by Chris Humphreys »

    Hi, I'm new here and have just started setting up a template for my site. I've followed the fantastic guidance here and now have a menu working just about the way I want it. The only issue I have is the menu's behaviour when I click on a parent to open the sub menu. This is what I see:

    Image

    Obviously it isn't loading the main menu page which is the way I want it, but it isn't recognising that this element should be treated as an active parent. The dotted line that appears on clicking the element also remains. This is what I want to see:

    Image

    Hope someone can help. Link below in case someone wants to have a look.

    www.chp-architecturalphotography.com

    Thanks
    Chris
    NaN

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

    Post by NaN »

    Hello Chris and welcome to the forum.

    Obviously it isn't loading the main menu page which is the way I want it
    This was answered in one of the last posts i guess:
    NaN wrote:
    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.
    ;)

    Another issue will be if you select parent links where the submenu is already expanded it will collapse the submenu, load the page and suddenly the submenu is there again.
    This doesn't look nice.

    That means remove the whole else part from the script.
    Try this script instead:

    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 of parent item of the selected item to open
    			$(this).parent().removeClass('openparent');
    			$(this).parent().removeClass('closed');
    			$(this).parent().addClass('open');
    			$(this).addClass('menuactive'); // make selected links look like current page link
    		}
    		return true;
    	});
    });
    
    
    So the slide effect will only appear if you select a parent item where children are not expanded.
    (didn't test it)

    Furthermore it will ad the class "menuactive" to selected links so it should look like you want it.

    The dotted line you mentioned is the so called outline.
    By default all selected links will have an outline (until the page is reloaded or you click elsewhere in the page).
    You need to add something like this to your styesheet to make it disappear:

    Code: Select all

    
    * {
        outline: none;
    }
    
    
    But notice that sliding effects and loading the page is not what this actually was made for.
    I'm thinking of another solution where the slide effect will be started after the page is loaded. So it might look a bit better. (Click a link, load the page and slide down submenu if everything is ready)
    Last edited by NaN on Mon Aug 02, 2010 11:48 am, edited 1 time in total.
    Chris Humphreys
    Forum Members
    Forum Members
    Posts: 12
    Joined: Mon Jul 26, 2010 2:03 pm

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

    Post by Chris Humphreys »

    Thanks for that. I've tested it out (currently running).

    Afraid it's still not quite working the way I would ideally like. It has now lost the slide completely as the page is loading (whether the return value is set to false or true).

    I actually don't want the page to load at all as I will be using the parent only to show the submenu options, there won't be any content on the parent page.

    What I'm looking for is the sub menu to appear as a slide (as it did previously), the parent page not to load, but to have the appearance of it being active (as the screen shot above).

    Click on the 'portfolio' section of this website and you'll see the effect I'm after (albeit with a different style slide). http://www.adamlawrenson.com

    The good news is the that the css for the outline worked a treat.

    Sorry to be a pain, but hope you can help.

    Cheers

    Chris
    Last edited by Chris Humphreys on Fri Jul 30, 2010 12:44 pm, edited 1 time in total.
    NaN

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

    Post by NaN »

    Well, okay, i misundestood your purpose.
    The reason why the last example does not work is because i added some linebreaks wich cause a js error. So the script isn't processed anymore.

    Anyway the previous script should be the right one for you so forget about it.
    To style selected links like active parent ones you need to add the classes of active parents if they are clicked.
    So try this script (it is the original one but with adding additionally css classes to selected parents - again i did ot test it so please give me some feedback):

    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 selecting a parent with collapsed submenu ...
    		if($(this).parent().attr('class').indexOf('open') < 0 || $(this).parent().find('ul:first').css('display') != 'block') {
    			
    			// 1st show children 
    			$(this).parent().find('ul:first').slideDown('fast');
    			
    			// 2nd 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');
    			});
    			
    			// 3rd search for parents of selected item of class "open" -> change class to "openparent"
    			$(this).parent().parents('li').each(function(i,elm) {
    				$(elm).removeClass('open');
    				$(elm).addClass('openparent');
    			});
    			
    			// 4th search for other 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');
    			});
    			
    			// 5th change classes of selected item...
    			// a) remove classes "openparent", "closed" and "parent" from link and list item
    			$(this).parent().removeClass('openparent closed parent'); // list item
    			$(this).removeClass('parent'); // link
    			
    			// b) add classes "menuactive", "menuparent" and "open" to link and list item
    			$(this).parent().addClass('menuactive menuparent open'); // list item
    			$(this).addClass('menuactive menuparent'); // link
    			
    		}
    		else {
    			// if we're selecting a parent with open submenu...
    			// 1st close submenus...
    			$(this).parent().find('ul').slideUp('fast');
    			
    			// 2nd remove classes "openparent", "menuactive", "menuparent" and "open" of link and list item
    			$(this).parent().removeClass('openparent menuactive menuparent open'); // list item
    			$(this).removeClass('menuactive menuparent'); // link
    			
    			// 3rd add classes "closed" and "parent" to link and list item
    			$(this).parent().addClass('closed parent'); // list item
    			$(this).addClass('parent'); // link
    
    		}
    		return false;
    	});
    });
    
    
    Chris Humphreys
    Forum Members
    Forum Members
    Posts: 12
    Joined: Mon Jul 26, 2010 2:03 pm

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

    Post by Chris Humphreys »

    Many thanks again. It's almost there, but if you have a look at the site the only issue is that if you click one of the parents it does what it should, then if you click another parent it closes the first submenu and opens the second, but the first parent remains highlighted?

    http://www.chp-architecturalphotography.com/

    Cheers

    Chris
    Last edited by Chris Humphreys on Fri Jul 30, 2010 2:54 pm, edited 1 time in total.
    NaN

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

    Post by NaN »

    Yeah, i forgot that.
    In step 4  (search for other elements...) where it collapses all other expanded submenus the class of active parents need to be changed back to the general parent class.
    So here we go (hopefully the last time ;) ) again:

    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 selecting a parent with collapsed submenu ...
    		if($(this).parent().attr('class').indexOf('open') < 0 || $(this).parent().find('ul:first').css('display') != 'block') {
    			
    			// 1st show children 
    			$(this).parent().find('ul:first').slideDown('fast');
    			
    			// 2nd 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');
    			});
    			
    			// 3rd search for parents of selected item of class "open" -> change class to "openparent"
    			$(this).parent().parents('li').each(function(i,elm) {
    				$(elm).removeClass('open');
    				$(elm).addClass('openparent');
    			});
    			
    			// 4th search for other elements of class "open" -> hide submenus -> change class to "closed" and "parent"
    			$('#menu_vert ul li.open').each(function(i,elm) {
    				$(elm).find('ul').slideUp('fast'); // hide submenus
    				// remove classes of active parents and open items
    				$(elm).removeClass('menuactive menuparent open'); // list item
    				$(elm).find('a:first').removeClass('menuactive menuparent'); // link
    				// add classes of parents and closed items
    				$(elm).addClass('closed parent'); // list item
    				$(elm).find('a:first').addClass('parent'); // link
    			});
    			
    			// 5th change classes of selected item...
    			// a) remove classes "openparent", "closed" and "parent" from link and list item
    			$(this).parent().removeClass('openparent closed parent'); // list item
    			$(this).removeClass('parent'); // link
    			
    			// b) add classes "menuactive", "menuparent" and "open" to link and list item
    			$(this).parent().addClass('menuactive menuparent open'); // list item
    			$(this).addClass('menuactive menuparent'); // link
    			
    		}
    		else {
    			// if we're selecting a parent with open submenu...
    			// 1st close submenus...
    			$(this).parent().find('ul').slideUp('fast');
    			
    			// 2nd remove classes "openparent", "menuactive", "menuparent" and "open" of link and list item
    			$(this).parent().removeClass('openparent menuactive menuparent open'); // list item
    			$(this).removeClass('menuactive menuparent'); // link
    			
    			// 3rd add classes "closed" and "parent" to link and list item
    			$(this).parent().addClass('closed parent'); // list item
    			$(this).addClass('parent'); // link
    
    		}
    		return false;
    	});
    });
    
    
    Chris Humphreys
    Forum Members
    Forum Members
    Posts: 12
    Joined: Mon Jul 26, 2010 2:03 pm

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

    Post by Chris Humphreys »

    Yeeeee hah.....perfect.

    Many thanks for taking the time to do that, it's just the way I wanted it.

    Cheers

    Chris  ;D
    NaN

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

    Post by NaN »

    Nice :)

    One thing: in your page the js is placed at the top of the head section.
    This will show your page without styles for a short second when loading the page.
    You should place this at the end of the head section.
    Chris Humphreys
    Forum Members
    Forum Members
    Posts: 12
    Joined: Mon Jul 26, 2010 2:03 pm

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

    Post by Chris Humphreys »

    Ah, thanks for that. I had wondered why that was happening. Sorted now.
    ;D
    badoul
    New Member
    New Member
    Posts: 5
    Joined: Sun Sep 04, 2011 3:59 pm

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

    Post by badoul »

    hello,
    i am blocked in the second solution who is proposed by nan.
    For the first and original idea all work like a charm but when i need to adapt my simple menu tpl, i do not understand the customusation "open" class.
    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:
    [...]

    Code: Select all

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

    Code: Select all

    open">{$node->menutext}
    [...]

    if someone could post his tpl code or any explication i will love it.
    thanks
    b
    Locked

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