Creating a CSS Driven Flyout Menu

[novista]

Here are instructions on how to create a flyout menu using only CSS. You'll need to make changes to the CSS to match your site's design. The example has been tested up to Version 5.0.5. For questions, contact Novista Web at http://www.Novistaweb.com

STEP 1.
Add the CSS code below into your /tempates/YourTemplate/Styles/styles.css file or, create a new CSS file and call it from Panel.HTMLHead.html.

Code: Select all

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 8.0em;
margin-top : -1.35em;
}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
margin-left : 8.0em;
}

#nav li a {
width: 11em;
width : 10em;
padding : 0 0.5em;
}

#nav li a:hover {
color : white;
background-color : black;
}

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

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

STEP 2:
Open Panels.SideCategoryList.html. Replace
<div class="Block CategoryList Moveable Panel" id="SideCategoryList">
with
<div class="Block CategoryList Moveable" id="nav">

STEP 3:
Place the following code in the Panel.HTMLHead.html file before </head>:

Code: Select all

<!-- Flyout Code -->
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").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"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

[hgmobile]

I tried this and was unable to get it to work. It did collapse my category list to main Categories Names but after that I was unable to do anything, couldn't select categories or anthing to do with products. Nothing worked on hover or click. Tried several different colour combinations and various placements in the HTMLhead file too.
Probably not the code, so what did I possibly do wrong?
I am using the Handbag template on v. 5.0.3

[novista]

Just to make sure we are on the same page, you said "it did collapse your category". Are you trying the accordion menu or the flyout menu? This is the flyout thread.

Can you include a link to your site?

[dave_finlayson]

This works really well but I have a quick question! Can it be amended so the flyout menus are only for third level lists. In an ideal world, we would require 1st and 2nd level displayed initially and then third level displayed on rollover.

Any ideas?

[meules]

Novista,

Does this one work for v5.0.6 ?
I tried this one but it won't even collapse!!

[novista]

I've got is working on a 5.0.6 site. Can you explain what you mean by "won't collapse" or provide a link to your website?