Page 4 of 5

Re: Accordion Menu R2

Posted: Wed Sep 15, 2010 4:25 pm
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?

Re: Accordion Menu R2

Posted: Tue Sep 21, 2010 12:17 pm
by Tony Barnes
Should do..?? Afraid never used that version, but the way it initialises jquery, etc, should be the same throughout

Re: Accordion Menu R2

Posted: Wed Sep 22, 2010 2:27 am
by steve91386
Anyone want to make some $ and install it for me?? :D

Re: Accordion Menu R2

Posted: Wed Sep 22, 2010 6:54 pm
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>

Re: Accordion Menu R2

Posted: Thu Oct 14, 2010 12:17 pm
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

Re: Accordion Menu R2

Posted: Thu Oct 14, 2010 4:02 pm
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?!?

Re: Accordion Menu R2

Posted: Thu Oct 14, 2010 5:12 pm
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

Re: Accordion Menu R2

Posted: Thu Oct 14, 2010 5:15 pm
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!!

Re: Accordion Menu R2

Posted: Thu Oct 14, 2010 5:56 pm
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.

Re: Accordion Menu R2

Posted: Fri Oct 15, 2010 8:23 am
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