Jump to content

Drop Down Category Expand Problem


Guest
 Share

Recommended Posts

I'm using the Kuruoto skin and I have added Sub-Categories to my main Category and turned on the "Expand Category Navigation Tree" function. Although this works (the expand bit) when you hover over another main category with an expandble sub category list, the prior one that expanded should go back to normal, but it doesn't leaving the whole navigation menu with expanded sub categories... Not sure you guys get what I am saying and I am more than happy to PM you my site to check it to see what the problem is.

Anyone know of a fix for this?

Link to comment
Share on other sites

In /skins/kurouto/js/script.js you could try replacing the accordion menu script with this:

/* Acordion menu */

$('#menu.accordion li').hover(

function(){

$(this).find('ul:first').stop().slideDown();

},

function(){

$(this).find('ul:first').stop().slideUp();

}

);

Sir William probably has a better version though, so you could also try convincing him to post it here.

Link to comment
Share on other sites

@ Viola, I have just tried using the script you provided... thanks for that... it works but not completely... somehow when it folds back, it wraps up space in a weird way and when u open another sub menu, it doesnt show the full sub category... Has anyone else tried this and no of any addition to this to make it work?

Link to comment
Share on other sites

Sorry. It was adapted from a horizontal flyout menu. Looks like this version doesn't need the ".stop()"s. Try this:

/* Acordion menu */

$('#menu.accordion li').hover(

    function(){

        $(this).find('ul:first').slideDown();

    },

    function(){

        $(this).find('ul:first').slideUp();

    }

);

Link to comment
Share on other sites

@ Viola

Hi Viola, I've been reading this and trying to follow along, but I think I may be doing something wrong.

I've opened the file and changed the following as suggested but doesn't work. Am I missing something? Do I have to refresh the cache back on the website to make it work?

Any help would be greatly appreciated.

Many thanks!

cookingtime

Link to comment
Share on other sites

A lot of people are going to be thanking you, Viola! This needs to be posted in the 3rd party forum Hacks section.

Works for me without even deleting cache. But it's a little TOO sensitive - noticeable on the subcategories with subcategories. (DISABLED ACCORDION FOR NOW - It was making me dizzy!! I'll leave it for now so someone can test it on mine - try opening Hand Puppets on the Plush Animal Shoppe. If you need to see it, ask.)

Is there any way to fix that? Maybe by widening the category box that holds each word?

Link to comment
Share on other sites

I just copied her code in and commented out the original - BUT - I'm on an unpublished build of 5.0.7, due to some major issues I was having. So I can't promise my script works the same as yours.

/* Acordion menu */

$('#menu.accordion li').hover(

	function(){

		$(this).find('ul:first').slideDown();

	},

	function(){

		$(this).find('ul:first').slideUp();

	}

);

Link to comment
Share on other sites

I did it a bit differently. The guy who paid me to tweak it wanted it to open when clicked....more like V4's style....instead of when hovered. But the idea is similar. When coupled with a CSS change or two, it made the system MUCH more usable.

$('#menu.accordion a ~ ul').each(function(){

	$(this).siblings('a:first').addClass('menu_closed').click(function(){

		if(!$(this).hasClass('menu_open')) {

			$(this).addClass('menu_open').siblings('ul').slideDown();

			return false;

		}

	}

	);

});

When any menu item is clicked, it will expand IF it has children. If it's already open, then that menu becomes clickable and will take you to the appropriate category (that's what the if statement is for). The menu_open and menu_closed classes provided a right-facing arrow for cats with subs, and a down-facing arrow for opened subs. Hope this makes sense.

:w00t:

Link to comment
Share on other sites

As with any jQuery function, just check the docs: http://api.jquery.com/slideDown/

You can add speed modifiers to pretty much any effect. It's all about learning what these things can do.....of course I do it every day, so it's a bit different for me.

:w00t:

Link to comment
Share on other sites

As with any jQuery function, just check the docs: http://api.jquery.com/slideDown/

You can add speed modifiers to pretty much any effect. It's all about learning what these things can do.....of course I do it every day, so it's a bit different for me.

:w00t:

OK. I'm on the other end of the spectrum from you - so this DID NOT work, so I've disabled the accordion again. :dizzy:

/* Accordion menu from Viola*/

$('#menu.accordion li').hover(

    function(){

	    $(this).find('ul:first').slideDown('5000');

    },

    function(){

	    $(this).find('ul:first').slideUp('5000');

    }

);

Link to comment
Share on other sites

5000 is five seconds. 1000 would be a long time to me. Default is 400, so I'd go for maybe half that speed, or 800 milliseconds. But I'm not sure what you're trying to slow down...the initiation of the slide, or the slide itself.

Link to comment
Share on other sites

5000 is five seconds. 1000 would be a long time to me. Default is 400, so I'd go for maybe half that speed, or 800 milliseconds. But I'm not sure what you're trying to slow down...the initiation of the slide, or the slide itself.

I put in 5000 thinking it would be noticeable, so I could see if it did what I wanted.

I can't tell that putting in even that big a number did anything at all. What I WANT is to have the subcategory stay open long enough if the mouse hover moves down a tiny bit into the next category long enough for a customer to click on it. As it is now with accordion enabled it opens and closes so fast there's almost no way to land on Hand Puppets, a sub- sub-category. I'll enable it again, so you can see what I mean.

Link to comment
Share on other sites

I see that it's HORRIBLE to use. That's why I went with click to open. It makes a LOT more sense and won't tick people off trying to get to stuff. With the indicator classes, it's nice and easy to use too.

Link to comment
Share on other sites

$('#menu.accordion a ~ ul').each(function(){

	    $(this).siblings('a:first').addClass('menu_closed').click(function(){

			    if(!$(this).hasClass('menu_open')) {

					    $(this).addClass('menu_open').siblings('ul').slideDown();

					    return false;

			    }

	    }

	    );

});

Yes, that works much better for my needs. THANK YOU!! Could you put this in the Hacks forum section please?

Link to comment
Share on other sites

It works, but nobody can see that the Puppet cats are also expandable. You need to adjust the menu color for that or adjust the menu_open and menu_closed classes to use an arrow that shows on the blue and the white.....the arrows from the gray version work just fine.

:w00t:

Link to comment
Share on other sites

Like I said, Sir William probably has a better version. :) But if anyone wants the hover() version, here's a couple of them.

1. Same as the one I posted earlier, but with a delay before the slideUp

$('#menu.accordion a ~ ul').each(

	function(){

		$(this).siblings('a:first').addClass('menu_closed');

	}

);

$('#menu.accordion li').hover(

	function(){

		$(this).find('ul:first').slideDown();

		$(this).find('.menu_closed').addClass('menu_open');

	},

	function(){

		$(this).find('ul:first').delay(800).slideUp('slow');

		$(this).find('.menu_closed').removeClass('menu_open');

	}

);






2. Menu opens as before, but only closes when the mouse leaves the entire menu area




$('#menu.accordion a ~ ul').each(

	function(){

		$(this).siblings('a:first').addClass('menu_closed');

	}

);

$('#menu.accordion li').mouseenter(

    function(){

        if(!$(this).find('.menu_closed:first').hasClass('menu_open')){

            $(this).find('.menu_closed:first').addClass('menu_open');

        }

        $(this).find('ul:first').slideDown();

    }

);

$('#menu.accordion').mouseleave(

    function(){

        $(this).find('ul').slideUp();

        $(this).find('.menu_open').removeClass('menu_open');

    }

);

Edit: added Sir William's indicator classes

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...