new dhtmlmenu RT
Different colors for links
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....
How would I be able to specify different colors for each link structure.
Something like the picture below....
Re: Different colors for links
Hm, you need unique ID each <li> level, and need the unique color code each diferent "li" level in your css file.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....
Please send a request to hendrik, to change his code.
Paul
Re: Different colors for links
Hi Omar, the following might help (Paal was right )
change
to
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
and for LINK1a colors
by, Hendrik
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';
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'].'"';
(Mind giving proper alias names!)
Then you can edit your stylesheet like
Code: Select all
#link1 { background-color: #789;}
Code: Select all
#link1 li {background-color: #abc;}
Re: Different colors for links
Thx, hendrik.hendrik wrote:Hi Omar, the following might help (Paal was right )
change
.
.
.
by, 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
Re: Different colors for links
Ok, as far as I can see, this should be including all changes so far:
css:
and the javascript, no changes
Hendrik
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('"', '"',$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;
}
/*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;
}
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);
Re: Different colors for links
Thx, Paulhendrik wrote:Ok, as far as I can see, this should be including all changes so far:
Hendrik
Allright: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.
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>
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>
6. Edit the dhtmlmenu.css to your needs. Donate a beer.
That's it, I think.
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.does the menu work om mac ?
what browsers are supported ?
The menu does not work in mac os9 ie 5x (collapses). If somebody has a (css-) solution, please post it!
Hendrik
-
- Posts: 39
- Joined: Fri 29. Apr 2005, 06:22
- Location: US
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
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