No wild scripts, no massive js files. All you have is the list apart style modifier to make it work in IE (about 10 lines of js), everything else is achieved with an intricate style cascade. I should note that this includes having parent elements REMAIN selected when a menu is open in IE... no small matter in CSS for anyone who has actually tackled this.
This is the working RT code. Copy this to a file in "phpwcms_template\inc_script\frontend_render" with a proper name to use it.
Code: Select all
<?php
function build_dhtmlmenu2($start=0, $class='', $activeclass='', $counter=0) {
$class="class='".$class."'";
$classactive="class='".$activeclass."'";
$s = '';
$g = '';
foreach($GLOBALS['content']['struct'] as $key => $value) {
if ($start == $GLOBALS['content']['struct'][$key]['acat_struct'] &&
!$GLOBALS['content']['struct'][$key]['acat_hidden'] && $key)
{
$s .= '<li';
if($key == $GLOBALS['aktion'][0] && $activeclass) $s .= ' '.$classactive;
$s .= '>';
if(!$GLOBALS['content']['struct'][$key]["acat_redirect"]) {
$s .= '<a href="index.php?';
if($GLOBALS['content']['struct'][$key]['acat_alias']) {
$s .= $GLOBALS['content']['struct'][$key]['acat_alias'];
} else {
$s .= 'id='.$key.',0,0,1,0,0';
}
$s .= '">';
} else {
$redirect = get_redirect_link($GLOBALS['content']['struct'][$key]["acat_redirect"], ' ', '');
$s .= '<a href="'.$redirect['link'].'"'.$redirect['target'].'>';
}
$s .= html_specialchars($GLOBALS['content']['struct'][$key]['acat_name']);
$s .= '</a>';
$s .= build_dhtmlmenu2($key, $class, $activeclass,$counter+1);
$s .= "</li>\n";
}
}
if($s) {
$g = "\n<ul";
if(!$counter && $class) $g .= ' '.$class;
$g .= ">\n".$s.'</ul>';
}
return $g;
}
// parse the whole webpage $content["all"] is the fully rendered webpage your site displays
$content["all"] = (myTagParser ($content["all"]));
// parse the $string and replace all possible instances of the following {RT}'s
function myTagParser($string) {
$search[0] = '/\{DHTMLMENU:(.*?),(.*?),(.*?)\}/e';
$replace[0] = 'build_dhtmlmenu2("$1","$2","$3");';
$string = preg_replace($search, $replace, $string);
$string = str_replace('\'', '\'',$string);
$string = str_replace('"', '"',$string);
return $string; // spit out the final webpage for display
}
?>
Code: Select all
#primaryNav {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
/* here we set the default display for the lists/nested lists */
#primaryNav ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style: none;
display: block;
width: auto;
}
#primaryNav ul ul {
display: none;
position: absolute;
width: 192px;
border-bottom: 1px solid #ccc;
top: 20px;
left: 0px;
}
/* Fix IE. Hide from IE Mac \*/
* html #primaryNav ul ul { top: 30px; left: 0px; width: 170px;}
/* End */
#primaryNav ul ul ul {
display: none;
position: absolute;
left: 190px;
top: -1px;
}
/* Fix IE. Hide from IE Mac \*/
* html #primaryNav ul ul ul { left: 170px; top: -1px; }
/* End */
/* here we set the default display for the list items/nested list items */
#primaryNav ul li {
margin: 0px 0px 0px 0px;
padding: 4px 0px 4px 0px;
float: left;
position: relative;
font-weight: bold;
}
#primaryNav ul li li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid #ccc;
border-bottom: 0px;
float: none;
display: block;
font-weight: normal;
}
/* here we set the default display state for the links */
#primaryNav ul li a {
padding: 5px 20px 5px 5px;
display: inline;
text-decoration: none;
}
#primaryNav ul li li a {
padding: 5px 10px 5px 10px;
display: block;
width: 170px;
}
/* Fix IE. Hide from IE Mac \*/
* html #primaryNav ul li { float: left; height: 1%; }
* html #primaryNav ul li a { height: 1%; }
/* End */
/* here we set the ACTIVE class for ON menus, first for cascade */
#primaryNav ul.itemOff { color: #FF3300; /*color: #FF3300;*/ }
/* DEFINE DEFAULT LI/A APPEARANCE */
/* here we set the standard LI states - controls bg color */
#primaryNav ul li { background-color: transparent; color: #666666; }
#primaryNav ul li li { background-color: #efefef; color: #777; }
#primaryNav ul li li li { background-color: #ffffff; color: #777; }
#primaryNav ul li li li li { background-color: #f9f9f9; color: #777; }
/* here we set the standard A states - controls text color */
#primaryNav ul li a { color: inherit; }
/* Fix IE. Hide from IE Mac \*/
* html #primaryNav ul li a { color: #666666; }
* html #primaryNav ul li li a { color: #777; }
/* End */
/* DEFINE DEFAULT LI/A HOVER/ON APPEARANCE */
/* here we set the hover and "in" styles for elements */
/* L1 on states */
#primaryNav li:hover, #primaryNav li.sfhover a { color: #FF3300; }
/* L1 off states - for children */
#primaryNav li:hover li, #primaryNav li.sfhover li a { color: #777; }
/* L2 on states */
#primaryNav li li:hover, #primaryNav li li.sfhover a { color: #FF3300; }
/* L2 off states - for children */
#primaryNav li li:hover li, #primaryNav li li.sfhover li a { color: #777; }
/* L3 on states */
#primaryNav li li li:hover, #primaryNav li li li.sfhover a { color: #FF3300; }
/* L3 off states - for children */
#primaryNav li li li:hover li, #primaryNav li li li.sfhover li a { color: #777; }
/* global states - bg colors */
#primaryNav li li:hover, #primaryNav li li.sfhover, #primaryNav li li li:hover, #primaryNav li li li.sfhover {
background-color: #f9f9f9;
}
/* DEFINE MENU APPEARANCE BEHAVIORS */
/* here we set the reveal/hide chains for the fly-out */
#primaryNav li:hover ul ul, #primaryNav li:hover ul ul ul {
display: none;
}
#primaryNav li:hover ul, #primaryNav li li:hover ul, #primaryNav li li li:hover ul {
display: block;
}
#primaryNav li.sfhover ul ul, #primaryNav li.sfhover ul ul ul, #primaryNav li li.sfhover ul ul {
display: none;
}
#primaryNav li.sfhover ul, #primaryNav li.sfhover ul, #primaryNav li li.sfhover ul, #primaryNav li li li.sfhover ul {
display: block;
}
Code: Select all
/////////////////////////////////////////////////////////////////////////////////////////
// DHTML MENU SWAP FIX
// This script solves the no-psuedo classes for IE problem with the dhtml menu
// Detect IE
var isIE = (navigator.userAgent.toLowerCase().indexOf("msie") > 0) ? true : false;
sfHover = function() {
if (isIE) {
var sfEls = document.getElementById("primaryNav").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);
-rt