Free Top Category Flyout Menu
Posted: Thu Nov 11, 2010 7:50 pm
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
2. Copy this code into your panels/HTMLHead just before </head>
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.
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;
}
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>
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.