Accordion Menu R2

[Tony Barnes]

I've cleaned up the javascript a little on this, as it was bugging me that it was splitting things out into a seperate function, and I had a lot of repetition in the category/product/page logic. I also changed the slidetoggle speed to 400, as it's a bit less vicious. You can also change it to - toggle - which animates it a little more, but felt OTT for my liking.

Code: Select all

<script type="text/javascript">

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

</script>

[Tony Barnes]

Another tweak, page logic works better, only fires up on product or category pages:

Code: Select all

<script type="text/javascript">

$(function() {
	$('#SideCategoryList ul ul').hide();
	$('#SideCategoryList li a').click(
	function() {
	if($(this).next().is('ul')) {
	$(this).next().slideToggle(400);
	return false;
	}
	}
	);
	var m = location.href;
	var n = m.substring(0,m.indexOf('?'));
	var q = n;
	var prodcheck = m.match("/products/");
	var catcheck = m.match("/categories/");
	if ((prodcheck !== null) || (catcheck !== null)) {
	if (n.length < 1) {
	q=m;
	}
	var p = $('#ProductBreadcrumb li:last').prev().html();
	if(p !== null){
	l = p.indexOf("=") + 2;
	r = p.indexOf(">") - 1;
	p = (p.substring(l, r));
	q=p;
	}
	$("a[href="+q+"]").parent().parent().parent().parent().show();
	$("a[href="+q+"]").parent().parent().show();
	$("a[href="+q+"]").not('.Content a').css("font-weight","bold");
	}
});

</script>

[meules]

Tony,

Is it possible to make a horizontal menu with this script? I must admit that I haven't tested/tried this yet
I'm developing a new website with a big horizontal menu bar at the top. Currently I'm experimenting with Superfish, but that's a hard to crack nut regarding styling. What I try to archieve is something like this website: http://elegantthemes.com/preview/eStore/ (The big black menu bar at the top with drop downs)

Is something like this possible with this script

Thx

[Tony Barnes]

That's more a "megamenu" approach. Looked at that briefly after someone over on the ISC forum wanted to charge $350 for it (!) - was a bit more involved than I could be arsed with at the time.

But essentially, yes, you can do that sort of thing. You will first need to construct the first UL/LI combo to be floated left like the topmenu on an ISC site. Give it a unique ID and style on the back of that, then have the sub menus appear as before - you will need to copy over the .Left styling for wherever it ends up. Then probably change the jquery a little.

If you want it so that the drop down list comes out in a block, with 3 columns, etc, then things get a fair bit more involved - hence my first statement!

[bart]

I've just upgraded to ISC v6.1.1 and Interspire have coded a new SideCategoryList.

Watch out for the new fly out menu!!

I'm still playing with the code to get it to play right. Firstly you will need to change a setting in Settings>Display>Category Settings>Category Menu Style: Show as simple list.

Hopefully i'll have it sorted soon as i really like this menu.

[bart]

Fear not, the accordion code is ok, its just me overriding a template file.....

[Tony Barnes]

I'll have a look at that when I do my test install, good to see they have listened and added more options to the menus though

[bart]

Is there a way that when the menu is clicked to open the sub menu the category web page also opens?