Creating a CSS Driven Flyout Menu
Posted: Thu Jul 09, 2009 1:16 pm
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.
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>:
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;
}
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>