Guest Posted February 28, 2012 Share Posted February 28, 2012 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? Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted February 28, 2012 Share Posted February 28, 2012 This has been discussed several times here and I think in the old bug tracker, too, if I remember correctly. But I don't remember that anyone ever solved this problem. I turned it off. Quote Link to comment Share on other sites More sharing options...
Guest Posted February 28, 2012 Share Posted February 28, 2012 I've solved it....once....but we haven't incorporated it into the core yet. Thankfully it's a pretty simple skin and JS change. Maybe in 5.0.8, but in 5.0.9 if not. Quote Link to comment Share on other sites More sharing options...
Guest Viola Posted February 29, 2012 Share Posted February 29, 2012 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. Quote Link to comment Share on other sites More sharing options...
Guest Posted February 29, 2012 Share Posted February 29, 2012 @ 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? Quote Link to comment Share on other sites More sharing options...
Guest Viola Posted February 29, 2012 Share Posted February 29, 2012 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(); } ); Quote Link to comment Share on other sites More sharing options...
Guest Posted February 29, 2012 Share Posted February 29, 2012 @Viola perfecto!!! thanks... works like a charm..:) Quote Link to comment Share on other sites More sharing options...
Guest Posted February 29, 2012 Share Posted February 29, 2012 @ 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 Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted February 29, 2012 Share Posted February 29, 2012 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? Quote Link to comment Share on other sites More sharing options...
Guest Posted February 29, 2012 Share Posted February 29, 2012 @ DirtyButter How did you manage to do it? When I change the script, as of Viola's instruction, it just stays the same :-( Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted February 29, 2012 Share Posted February 29, 2012 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(); } ); Quote Link to comment Share on other sites More sharing options...
Guest Posted February 29, 2012 Share Posted February 29, 2012 Ok :-) Well I'll try again and report back with the code as well Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted February 29, 2012 Share Posted February 29, 2012 I did a little Googling, and there are ways to affect the ShowSpeed and HideSpeed, but I have no idea how to incorporate that in your script, Viola. Quote Link to comment Share on other sites More sharing options...
Guest Posted February 29, 2012 Share Posted February 29, 2012 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: Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted February 29, 2012 Share Posted February 29, 2012 Thanks for sharing your code, Sir William. I'm sure there will be those who will prefer your way of doing it. I like the hover, but the slide will have to be slowed down to be usable for me. Can you suggest how to add that to Viola's code? Quote Link to comment Share on other sites More sharing options...
Guest Posted February 29, 2012 Share Posted February 29, 2012 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: Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted February 29, 2012 Share Posted February 29, 2012 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. OK. I'm on the other end of the spectrum from you - so this DID NOT work, so I've disabled the accordion again. /* Accordion menu from Viola*/ $('#menu.accordion li').hover( function(){ $(this).find('ul:first').slideDown('5000'); }, function(){ $(this).find('ul:first').slideUp('5000'); } ); Quote Link to comment Share on other sites More sharing options...
Guest Posted February 29, 2012 Share Posted February 29, 2012 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. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted February 29, 2012 Share Posted February 29, 2012 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. Quote Link to comment Share on other sites More sharing options...
Guest Posted February 29, 2012 Share Posted February 29, 2012 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. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted February 29, 2012 Share Posted February 29, 2012 $('#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? Quote Link to comment Share on other sites More sharing options...
Guest Posted February 29, 2012 Share Posted February 29, 2012 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: Quote Link to comment Share on other sites More sharing options...
Guest Viola Posted February 29, 2012 Share Posted February 29, 2012 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 Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted February 29, 2012 Share Posted February 29, 2012 Ooo - more toys to play with!! Thanks!! Quote Link to comment Share on other sites More sharing options...
Guest Posted March 2, 2012 Share Posted March 2, 2012 Still going on,... I love the accordion style I have on my site.. thanks to Viola!! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.