Accordion Menu R2

Modules, Add-ons and custom code that's more than just a quick hack or Mod.
steve91386
Posts: 6
Joined: Tue Aug 17, 2010 2:48 pm

Re: Accordion Menu R2

Post by steve91386 »

I have 5.5.2 Vendor Edition and cannot for the life of me get this implemented. Can anyone verify that it will work with my version?
Tony Barnes
Posts: 744
Joined: Thu Jun 18, 2009 8:59 am

Re: Accordion Menu R2

Post by Tony Barnes »

Should do..?? Afraid never used that version, but the way it initialises jquery, etc, should be the same throughout
steve91386
Posts: 6
Joined: Tue Aug 17, 2010 2:48 pm

Re: Accordion Menu R2

Post by steve91386 »

Anyone want to make some $ and install it for me?? :D
Tony Barnes
Posts: 744
Joined: Thu Jun 18, 2009 8:59 am

Re: Accordion Menu R2

Post by Tony Barnes »

Just copy/paste this into your footer and all should be good :)

Code: Select all

<script type="text/javascript">
function initMenu() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
var checkElement = $(this).next();
if(checkElement.is('ul')) {
$(this).next().slideToggle('fast');


return false;
}
}
);

}

    $(document).ready(function() {
       initMenu();

       var m = location.href;
       var n = m.substring(0,m.indexOf('?'));

       if (n.length < 5) {
       $("a[href="+m+"]").parent().parent().parent().parent().show();
       $("a[href="+m+"]").parent().parent().show();
       $("a[href="+m+"]").css("font-weight","bold");
       }
       else {
       $("a[href="+n+"]").parent().parent().parent().parent().show();
       $("a[href="+n+"]").parent().parent().show();
       $("a[href="+n+"]").css("font-weight","bold");
       }

       var p = $('#ProductBreadcrumb li:last').prev().html();
       l = p.indexOf("=") + 2;
       r = p.indexOf(">") - 1;
       p = (p.substring(l, r));
       $("a[href="+p+"]").parent().parent().parent().parent().show();
       $("a[href="+p+"]").parent().parent().show();
       $("a[href="+p+"]").css("font-weight","bold");

    });
</script>
bart
Posts: 57
Joined: Wed Sep 08, 2010 5:40 pm
Location: UK

Re: Accordion Menu R2

Post by bart »

Hi,

I'm really liking this script, and nice and easy to implement with just adding the code into the footer. So thank you.

However i'd like to set it up so that the first of the <li> <ul> nestled lists always expanded.
Does anyone know how this could be done?

Thank you
Tony Barnes
Posts: 744
Joined: Thu Jun 18, 2009 8:59 am

Re: Accordion Menu R2

Post by Tony Barnes »

Just realised I hadn't updated this so that it worked properly on /pages/ - use this guys :D

Code: Select all

<script type="text/javascript">
function initMenu() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
var checkElement = $(this).next();
if(checkElement.is('ul')) {
$(this).next().slideToggle('fast');
 
return false;
}
}
);

}
$(document).ready(function() {
	initMenu();

	var m = location.href;
	var n = m.substring(0,m.indexOf('?'));
	var o = m.match("/pages/")
	if(o == null){
	if (n.length < 5) {
	$("a[href="+m+"]").parent().parent().parent().parent().show();
	$("a[href="+m+"]").parent().parent().show();
	$("a[href="+m+"]").css("font-weight","bold");
	}
	else { 
	$("a[href="+n+"]").parent().parent().parent().parent().show();
	$("a[href="+n+"]").parent().parent().show();
	$("a[href="+n+"]").css("font-weight","bold");
	}
	var p = $('#ProductBreadcrumb li:last').prev().html();
	if(p != null){
	l = p.indexOf("=") + 2;
	r = p.indexOf(">") - 1;
	p = (p.substring(l, r));
	$("a[href="+p+"]").parent().parent().parent().parent().show();
	$("a[href="+p+"]").parent().parent().show();
	$("a[href="+p+"]").not('.Content a').css("font-weight","bold");
	};
	};
});

</script>
Bart - you'll want to add this in:

Code: Select all

$('#SideCategoryList ul ul:first').show();
So it looks like:

Code: Select all

<script type="text/javascript">
function initMenu() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList ul ul:first').show();
$('#SideCategoryList li a').click(
function() {
var checkElement = $(this).next();
if(checkElement.is('ul')) {
$(this).next().slideToggle('fast');
 
return false;
}
}
);

}
$(document).ready(function() {
	initMenu();

	var m = location.href;
	var n = m.substring(0,m.indexOf('?'));
	var o = m.match("/pages/")
	if(o == null){
	if (n.length < 5) {
	$("a[href="+m+"]").parent().parent().parent().parent().show();
	$("a[href="+m+"]").parent().parent().show();
	$("a[href="+m+"]").css("font-weight","bold");
	}
	else { 
	$("a[href="+n+"]").parent().parent().parent().parent().show();
	$("a[href="+n+"]").parent().parent().show();
	$("a[href="+n+"]").css("font-weight","bold");
	}
	var p = $('#ProductBreadcrumb li:last').prev().html();
	if(p != null){
	l = p.indexOf("=") + 2;
	r = p.indexOf(">") - 1;
	p = (p.substring(l, r));
	$("a[href="+p+"]").parent().parent().parent().parent().show();
	$("a[href="+p+"]").parent().parent().show();
	$("a[href="+p+"]").not('.Content a').css("font-weight","bold");
	};
	};
});

</script>
Will keep the list open regardless of what page you are on - not sure why you'd want to though?!?
bart
Posts: 57
Joined: Wed Sep 08, 2010 5:40 pm
Location: UK

Re: Accordion Menu R2

Post by bart »

Hi Tony,

Thanks very much for that. It works excellently.

We sell body piercing jewellery and products are listed in a few different categories and we are experimenting with different ways of display menus. We want to constantly display the most popular jewellery type menu but then also have collapseable menus for jewellery material and jewellery location e.g. ear, lip, eyebrow...

bart
Tony Barnes
Posts: 744
Joined: Thu Jun 18, 2009 8:59 am

Re: Accordion Menu R2

Post by Tony Barnes »

Ah right, I thought it might be something like that - I did set up quickly on my site to test, in honesty, it felt like it was broken rather than being a feature. Hopefully will feel different on yours!!
bart
Posts: 57
Joined: Wed Sep 08, 2010 5:40 pm
Location: UK

Re: Accordion Menu R2

Post by bart »

I see what you mean about it feeling broken. Hopefully with some good styling i can get it looking ok, we'll see how it goes.
Tony Barnes
Posts: 744
Joined: Thu Jun 18, 2009 8:59 am

Re: Accordion Menu R2

Post by Tony Barnes »

lol!

You can set the styling for that part to be different by using the jquery selectors and setting the css that way, could be quite effective?

So $('#SideCategoryList ul ul:first').css("your", "css", "here") kinda of thing
Post Reply