new dhtmlmenu RT

Omar · Post by **Omar** » Wed 14. Jun 2006, 22:22

I want to implement this DHTML menu but I do have a question about it.
How would I be able to specify different colors for each link structure.
Something like the picture below....

Paal · Post by **Paal** » Thu 15. Jun 2006, 10:40

Omar wrote:I want to implement this DHTML menu but I do have a question about it.
How would I be able to specify different colors for each link structure.
Something like the picture below....

Hm, you need unique ID each <li> level, and need the unique color code each diferent "li" level in your css file.

Please send a request to hendrik, to change his code.

Paul

hendrik · Post by **hendrik** » Thu 15. Jun 2006, 14:45

Hi Omar, the following might help (Paal was right

)

change

Code: Select all

foreach($GLOBALS['content']['struct'] as $key => $value) {
   
     if ($start == $GLOBALS['content']['struct'][$key]['acat_struct'] &&
         !$GLOBALS['content']['struct'][$key]['acat_hidden'] && $key)
      {
       $s .= '<li';

to

Code: Select all

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 (!$GLOBALS['content']['struct'][$key]['acat_struct']) $s .= ' id="'.$GLOBALS['content']['struct'][$key]['acat_alias'].'"';

This adds the structure-aliases as IDs to the first-level list tags.
(Mind giving proper alias names!)

Then you can edit your stylesheet like

Code: Select all

#link1 { background-color: #789;}

and for LINK1a colors

Code: Select all

#link1 li {background-color: #abc;}

by, Hendrik

Paal · Post by **Paal** » Thu 15. Jun 2006, 14:51

hendrik wrote:Hi Omar, the following might help (Paal was right )

change
.
.
.

by, Hendrik

Thx, hendrik.

Please, post the complete RT (the original code was meny times changed...)

with all modification and css code

or

edit the 1st post this topic.

Thx, Paul

hendrik · Post by **hendrik** » Thu 15. Jun 2006, 15:59

Ok, as far as I can see, this should be including all changes so far:

Code: Select all

<?php

function build_dhtmlmenu2($start=0, $class='', $activeclass='', $counter=0) {
// **************************************************************************
// Paul: nice HTML source format, from class='classname' to class="classname"

   $class="class=\"".$class."\"";
   $classactive="class=\"".$activeclass."\"";

// Paul: nice HTML source format END   
// **************************************************************************

   $s = '';
   $g = '';
     
// **************************************************************************
// Paul: for submenu   

   $thfs = $GLOBALS["content"]["struct"];
   foreach($thfs as $key => $value)
   {
         $x = &$GLOBALS["content"]["struct"][$value["acat_struct"]];
           if($value["acat_struct"] != 0)
                   $x["acat_has_children"] = 1;
           else
                   $x["acat_has_children"] = 0;
   }

// Paul: for submenu END
// **************************************************************************
// Hendrik: add for list classes
      $bef[0] = $GLOBALS['aktion'][0];// the ID of the item you clicked is stored
      $se = 0;
      while ($bef[$se])//if there are parents, this is > 0
      {
         $se++;
         $bef[$se] = $GLOBALS['content']['struct'][$bef[$se-1]]['acat_struct'];// store parents ID's
      }
// Hendrik: add END
// **************************************************************************
   foreach($GLOBALS['content']['struct'] as $key => $value) {
   
     if ($start == $GLOBALS['content']['struct'][$key]['acat_struct'] &&
         !$GLOBALS['content']['struct'][$key]['acat_hidden'] && $key)
      {
       $s .= '<li';
	   // Hendrik: add Start - giving IDs to upmost list tags from alias-names (mind giving proper alias names!)
	   if (!$GLOBALS['content']['struct'][$key]['acat_struct']) $s .= ' id="'.$GLOBALS['content']['struct'][$key]['acat_alias'].'"';
	   // Hendrik: add END
// **************************************************************************
// Hendrik: change and add for list classes (helping to style the selected menu item and its parent elements)
     if ($activeclass)
     {
        for ($i = 0 ; $i <= $se ; $i++)
       {
          if($key == $bef[$i])
          {
             if (!$i)
             {
               if ($se == 1) $s .= ' class="itemChoosenFirst"';//item choosen no parents (is upmost level)
               else $s .= ' class="itemChoosen"'; //item choosen has parents
            }
             else
             {
                if ($se == $i +1) $s .= ' class="itemOnFirst"'; //upmost level leading to item choosen
                else $s .= ' '.$classactive; //class="itemOn" leading to item choosen
              }
          }
       }
      } 
// Hendrik: change and add END
// **************************************************************************
       $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';
            }

// **************************************************************************
// Paul: change and add   
       
                 $s .= '"';
                 if($GLOBALS['content']['struct'][$key]['acat_has_children'])
                         $s .= ' class="submenu"';
                 $s .= '>';

// Paul: change and add END
// **************************************************************************

         } 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('&quot;', '"',$string);
   return $string;   // spit out the final webpage for display
}

?>

css:

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;
   }
/*Paul Start--------------------------------------------------------------------------------*/
#primaryNav ul ul li a.submenu {
   background-image: url(../../picture/arrowWhite.gif);
   background-repeat: no-repeat;
   background-position: 100% .4em;
   padding-right: .6em;
} 
/*Paul End--------------------------------------------------------------------------------*/
/*Hendrik Start---------------------------------------------------------------------*/
#primaryNav #alias {
	
}
#primaryNav #alias li{
	
}
#primaryNav .itemOn {
	font-weight: bold;
	color: blue;
}
#primaryNav .itemOnFirst {
	font-weight: bold;
	color: blue;
	background-image: url(../../picture/d_arrow.gif);
	background-repeat: no-repeat;
	background-position: 98% .5em;
	padding-right: .6em;
}
#primaryNav .itemOnFirst ul{
	font-style: normal;
}
#primaryNav .itemChoosen {
	font-weight: bold;
	color: #fff;
	background: #555;
}  
#primaryNav .itemChoosenFirst {
	font-weight: bold;
	color: #123;
}   
#primaryNav .itemChoosen ul{
	font-variant: normal;
} 
#primaryNav .itemChoosenFirst ul{
	font-variant: normal;
}   
/*Hendrik End---------------------------------------------------------------------*/

   /* 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;
   }

and the javascript, no changes

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);

Hendrik

Paal · Post by **Paal** » Thu 15. Jun 2006, 16:01

hendrik wrote:Ok, as far as I can see, this should be including all changes so far:

Hendrik

Thx, Paul

zentering · Post by **zentering** » Sun 18. Jun 2006, 13:49

I would really love an complete install step by step for dummies for this super nice menu, willing to make a donation to make this happend.

does the menu work om mac ?
what browsers are supported ?

Best regards / z

Omar · Post by **Omar** » Sun 18. Jun 2006, 17:52

Hi Hendrik,

Thank you for the code.
This sure helps

Omar

hendrik · Post by **hendrik** » Mon 19. Jun 2006, 16:18

zentering wrote:I would really love an complete install step by step for dummies for this super nice menu, willing to make a donation to make this happend.

Allright:

1. Copy and paste the php-code above into your favourite text/code-editor, save the file as dhtmlmenu.php or other (the name is of no importance in this case), then put it via ftp to your phpwcms installation into /phpwcms_template/inc_script/frontend_render/.

2. Do the same with the css-code: save it as dhtmlmenu.css, send it to /phpwcms_template/inc_css/.

3. Next save the javascript-code as for instance dhtmlmenu.js and send it to /phpwcms_template/inc_js/
The code is needed for Internet Explorer.

4. Log into your phpwcms backend at admin/templates and fill into the html head: - section of your template:

Code: Select all

<link rel="stylesheet" type="text/css" href="phpwcms_template/inc_css/dhtmlmenu.css">
<script src="phpwcms_template/inc_js/dhtmlmenu.js" type="text/javascript"></script>

This will call the js- and css-code.

5. In the main- (or header or other-) section of your template, use the menu by calling it with:

Code: Select all

<div id="primaryNav">{DHTMLMENU:0,itemOff,itemOn}</div>

where 0 stands for the starting ID.

6. Edit the dhtmlmenu.css to your needs. Donate a beer.

That's it, I think.

does the menu work om mac ?
what browsers are supported ?

As far as I saw, the menu works fine with pc-firefox, pc-ie 6x (though it does not behave exactly like firefox), mac osx-safari, mac osx-firefox.
The menu does not work in mac os9 ie 5x (collapses). If somebody has a (css-) solution, please post it!

Hendrik

zentering · Post by **zentering** » Mon 19. Jun 2006, 17:05

WOW LOVE IT !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Anytime u come to stockholm Sweden let me know and i give u a super time

or if a hosting account for a year with 10 Gb and 250 Gb transfer could serve as a thx ..... let me know.

zentering · Post by **zentering** » Mon 19. Jun 2006, 17:20

Is it possible to make the menu vertical ?

/ Z

Omar · Post by **Omar** » Tue 20. Jun 2006, 08:02

This should be possible, I had the same question, too bad my css editing is not so advanced yet.... Some day.....

Anyone?

fopulu · Post by **fopulu** » Tue 20. Jun 2006, 21:26

My lovely mister singing club.... this works fine and it is so easy to install.... more of these hacks!

lburgess17 · Post by **lburgess17** » Thu 22. Jun 2006, 00:52

Let me start by saying is is the best menu I've used for wcms yet! I am trying to style my dhtmlmenu to look like the following:

but am running into trouble when it comes to the "drop-down" part of the menu. I have 2 background images that I want to use for the drop-down, one for the hover state and the other for the regular active menu. I've tried adding the background-image to the css, but have had mixed results. The active submenu background will either show up in FireFox or IE6, but not both. AND, the hover state submenu background never shows up. I am not sure that I am placing the code in the right place. if anyone can help me, I would greatly appreciate it.

The top,horizontal Level 1 menu items appear as they should, but Level2 is where my problems begin with the css styling. The menu so far looks like this: http://dev.dugganinc.com/index.php The stylesheet is here: http://dev.dugganinc.com/phpwcms_templa ... mlmenu.css

thanks,
lburgess17

hendrik · Post by **hendrik** » Fri 23. Jun 2006, 00:29

lburgess17 wrote:

but am running into trouble when it comes to the "drop-down" part of the menu...

Help is difficult, because your links don't work.

Hendrik

new dhtmlmenu RT

Different colors for links

Re: Different colors for links

Re: Different colors for links

Re: Different colors for links

Re: Different colors for links

Re: Different colors for links

Thx