new dhtmlmenu RT
Posted: Wed 3. Aug 2005, 05:43
Okay, so I've been working on a new site for my company using PHPwcms. My PHP skills are rusty at best, but my DHTML and CS skills are pretty sharp. To that end I took the DHTMLMENU2 rt I found, fixed it, and created a kick-butt stylesheet that does almost EVERYTHING in CSS.
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.
Next you'll need to add the styles. Copy the following and either insert it into its own stylesheet linked to your templates or into the global one used by phpwcms:
Finally you'll need the small js script to swap styles in IE. Very small, but crucial for IE since it doesn't recognize pseudo classes. Just copy this into a js file and link to the template with the menu call.
That's it. Hope this helps anyone else who wants a nice, fully-functional DHTML menu for their site.
-rt
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