Cascading Menus :: Happy Christmas

[ChrisL]

Hi there,

For all of those who are wanting to get cascading menus in your Actinic (v8) store, without spending £35 for the privelege, I have managed to get it working.

What you need to do is:
insert a SiteMapSectionList into your site, and edit it.

click on the "Click here to edit list layout settings", and set the start and end to "<ul>" and "</ul>" respectively.

Click OK, and then "Site Map Section Link"

Now comes the complex bit, with lots of block ifs, so here is how my setup looks:

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsSectionIncludedInSiteMap%22%20%2f%3e" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%201">
	</li>
</actinic:block>
	<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%201%20AND%20%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3e%201" >
		</ul></li>
	</actinic:block>
   <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevelIsGreaterThan2%22%20%2f%3e" ><span style="display: none;"></actinic:block>
	<li><a href='<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>'><Actinic:Variable Name="SectionName"></a>
	<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%201" >
		<ul>
	</actinic:block>
</actinic:block>

Yes, i know it looks hellish but it works.

Here is some CSS to make it work:

.lbbox	{ padding: 5px 5px; margin-bottom: 30px;}
.lbbox > ul	{ list-style: none; padding: 0px; margin: 0px; }
.lbbox > ul > li > ul	{ display: none; position: absolute;}
.lbbox > ul > li		{ padding: 5px 0px;  }
.lbbox > ul li a	{ text-decoration: none; }
.lbbox > ul li > ul > li	{ padding: 0px; }
.lbbox > ul li > ul > li a  { padding: 5px; display: block;}
.lbbox > ul li > ul > li > a:hover	{ padding: 5px; }
.lbbox > ul > li:hover	{ cursor: pointer; }
.lbbox > ul > li:hover > ul { display: block; }

you can also style it a bit if you want.

The only problems with it is that even empty categories with have a <ul></ul> in them, leading to a slight problem with them showing up.

The way to solve this (its not a huge problem) is to use JavaScript, and the jQuery library seems perfect for this. An example of jQuery code is something like this:

$("ul > li > ul:empty").remove();

Hope this helps you all!

[pinbrook]

Chris - have you got an example of this working online so we can see the result.

[ChrisL]

Give me a couple of days to incorporate it, and I will.

Currently, it shows the top level as normal, and the second level as a child.

It uses the AListApart method of CSS cascading menus. (http://www.alistapart.com/articles/horizdropdowns/)

[Mike Hughes]

Hmm. Their demo doesn't work for me so there might be something to watch out for.

If I try to select an item in the drop down section that appears below the main menu then the drop down section disappears. i.e. try and select Services > Hosting.

Mike

Edit: Ahh. I see the author knows about it and calls it a mystery IE6 bug. Sadly it exists in IE7 as well.

Mystery IE6 Bug:
During the development of this article, I uncovered a strange bug that I believe is only apparent in IE6. A background must be declared on the li a, else when a sub-menu stretches further (vertically) than the main menu itself, the links start to disappear before you have time to click them. Strange! Try it to see for yourself.

[ChrisL]

The general reason for this is for IE's misinterpretation of the box model. Of course, with IE taking up about 70% of the population, its something that is impossible to ignore.

This is something that ( maybe ) can be solved by some clever javascript, but obviously that is not perfect for usability. However, if the javascript doesn't interfere with the functionality then it can help to extend the usability of the menu.

Unfortunately I dont know enough about the reasons for this error, so I cant help. There is undoubtably a solution out there somewhere.