Free Top Category Flyout Menu

Modules, Add-ons and custom code that's more than just a quick hack or Mod.
Post Reply
novista
Confirmed
Confirmed
Posts: 89
Joined: Fri Jul 03, 2009 11:22 pm

Free Top Category Flyout Menu

Post by novista »

This is in response from a question on how to move the side category list to the top of the page. This is mostly right out of Suckerfish's flyout menu example: http://htmldog.com/articles/suckerfish/dropdowns/. Just modified for use with ISC. I kept the example CSS in place because it makes it easier to see what is going on so naturally, you'd need to modify this to your design.

1. Copy this into your styles.css

Code: Select all

/* Top Category List */

#TopCategoryList, #TopCategoryList ul { /* all lists */
	padding: 20px;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#TopCategoryList a {
	display: block;
	width: 10em;
	text-decoration: none;
}

#TopCategoryList li { /* all list items */
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */
}

#TopCategoryList li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#TopCategoryList li ul ul { /* third-and-above-level lists */
	margin: -1em 0 0 10em;
}

#TopCategoryList li:hover ul ul, #TopCategoryList li.sfhover ul ul {
	left: -999em;
}

#TopCategoryList li:hover ul, #TopCategoryList li li:hover ul, #TopCategoryList li.sfhover ul, #TopCategoryList li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

2. Copy this code into your panels/HTMLHead just before </head>

Code: Select all

	<script type="text/javascript"><!--//--><![CDATA[//><!--
	
	sfHover = function() {
		var sfEls = document.getElementById("TopCategoryList").getElementsByTagName("LI");
		for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover=function() {
				this.className+=" sfhover";
			}
			sfEls[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
			}
		}
	}
	if (window.attachEvent) window.attachEvent("onload", sfHover);
	
	//--><!]]></script>
3. Edit /panels/SideCategoryList and change the <ul> to be <ul id="TopCategoryList">

4. Edit default.html and move %%Panel.SideCategoryList%% to just below %%Panel.Header%%. You can really put this where ever you want but put it there for now till you can see the result. You'll need to do this for all your layout pages.
Michael Kopel
NovistaWeb.com
Snooper
Posts: 264
Joined: Sat Jun 26, 2010 9:22 pm

Not working

Post by Snooper »

Okay.. I followed everything noVista has put here and found it not working. A chat with Tony, as we were trying to work out why, gave me a chance discovery that should be shared here..

Seems that placing the appending code into the CSS sheet at the base is not always read by the parent program for some reason. So I moved this up to below the BODY reference. NOW the menu is workingto a point.

:)
ISC 5.5.4 Ultimate : Being used here -- http://www.kdklondon.com
Post Reply