new dhtmlmenu RT

Post custom hacks and enhancements for phpwcms here only. Maybe some of these things will be included in official release later.
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop »

@pepe: in
...<= 1.2.6 war keine Umschaltmöglichkeit über die config möglich... wenn mich die Erinnerung nicht trügt!
Ne, ne die (be)trügt nicht. Ich meinte auch auf den DocType der V1.2.6 umschalten.

Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
hendrik
Posts: 66
Joined: Thu 9. Dec 2004, 21:18
Location: Berlin
Contact:

Post by hendrik »

@phalancs:
Hey Hendrik as I could see you use this line in your css to have a border-right for the last firstrow menutitem:

Code:
#primaryNav ul li#last{
border-right: 1px solid #ddd;/*#7e9aca;*/
}


It does not work for me Sad

Anyways If I try to use your css, it does definitely not look like you rmenu, although I have put own images into the folders where you call them from.

My main question is:
How do i get borders around the first row (the very first menuitems)
On netzweite.de I have a slightly different dhtmlmenu.php which delivers the id="last"-thing. You can get it at http://www.netzweite.de/forum
If you want to have borders around the first row items, #primaryNav ul li {border: 1px solid #xxxxxx} should work. But then you have also to define something for #primaryNav ul li li and maybe for #primaryNav ul li li li.

Concerning the "1.2.8 doctype-problem":
I think, pepes suggestion to adjust the top-value
/* Fix IE. Hide from IE Mac \*/
* html #primaryNav ul ul { top: 30px; left: 0px; width: 200px;}
/* End */
is better than switching back to HTML 4.01 Transitional. The gap can always occur, when you change the font-family or the font-size or paddings. Depending on your edits (or doctypes) you should adjust this top-value, for FF and IE.

@E81_135ti:
Wo kommt diese CSS Def. denn zur Seite dazu und warum?
You can disable these css-entries in admin/pagelayout by clicking on 'disable' and/or leaving fields empty.

Grüsse,
Hendrik
Osmis
Posts: 2
Joined: Sun 29. Aug 2004, 17:25
Location: Lithuania

Post by Osmis »

I have a problem my dhtmlmenu not working on IE in Win 98... Win XP/2000 - ok, mozilla - ok, Opera - ok.

?
Stim
Posts: 587
Joined: Mon 6. Jun 2005, 13:13

Post by Stim »

E81_135ti wrote:
ssyfrig wrote:Hi
does any body use dhtmlmenu RT with phpwcms 1.2.8 ?
thanks, Sven
I use it with 1.2.8.

Just upgraded from 1.2.6 and got contacted yesterday that there are some problems with IE6 concerning a gap between the first menu button and the subcategories. So the menu folds back when you leave the first menu button with your mouse. In other words: the navigation is useless for users with IE6. Pretty annoying,

Furthermore, there are Problems with IE7. The menu folds out pretty and there's no gap between the main category and the subcategory. But once in a while (seems to be randomly) the submenu closes. Even with the mouse placed over an item it just closes sometimes. I have no idea what's wrong with that RT. Everything worked just fine before the update to 1.2.8, even cross-browser wise there weren't any problems. At least none I was aware of :oops:

Are there files coming with this RT, I need to edit, to make them 1.2.8 compliant?

Might somebody have a look, please: http://www.msm.musin.de/cms/

I read parts of this post an discovered Hendrik as the "man to be" for this RT? His Website http://www.netzweite.de works fine in my test browsers (IE6, IE7, FF2), probably he could give me a hand on this issue?

Finally I got this work also. Had same problem as quote above but seems to work now with XP with IE 6 and FF 1.5. Don’t know if there may is problem with other system and browser maybe.

Anyway this menu is great now this work. I have one question about this menu. What will happens if this not work with some OS and browser – with design, navigations etc?

It’s impossible for me to check on all OS and browser. So I just wonder :?:
)-= 1.3.0 user =-(
Dave_LOgic
Posts: 51
Joined: Wed 10. Nov 2004, 21:48
Location: London

Post by Dave_LOgic »

I'm still having problems with IE7 ...my test site is at http://ilove.davelogic.com .I have a the correct paths to the relevant CSS / JS fills...The menu a[ppears but disappears on the submenus as soon as you move the mouse over...

any ideas???
Stim
Posts: 587
Joined: Mon 6. Jun 2005, 13:13

Post by Stim »

Dave_LOgic, your menu also not work with E6, try with this, in css file there is:

Code: Select all

#primaryNav ul ul {
   display: none;
   position: absolute;
   width: 178px;
   border: 1px solid #ddd;
   border-bottom: none;
   top: 18px;
   left: -1px;
   padding: 0px 0px 0px 0px;
   background-color: #f9f6ed;/*url(../../picture/hen/bottom-5.gif) no-repeat bottom left;*/
   z-index: 20;
  /*  filter:alpha(opacity=80);
   opacity:.8;*/
}

   /* Fix IE. Hide from IE Mac \*/
   * html #primaryNav ul ul { top: 18px; left: -1px; width: 178px;}
   /* End */
I have 18px, and work with IE 6 and FF 1.5. Try to set "top: 18px" to diferent px. Tell me if that work for you with IE 7?
)-= 1.3.0 user =-(
Dave_LOgic
Posts: 51
Joined: Wed 10. Nov 2004, 21:48
Location: London

Post by Dave_LOgic »

Thank you very much...You have solved a problem I have been desperate to fix for a week now with no luck.....You have been so helpful I don't like to ask but do you know which part of the CSS will allow me to align the text to the left ???

Once again...many thanks....
Stim
Posts: 587
Joined: Mon 6. Jun 2005, 13:13

Post by Stim »

Your menu work in IE 7 now? It still not working for me, with IE 6 and with XP OS.

Don’t know where to align the text really, which css file do you use? Can you post it?
)-= 1.3.0 user =-(
Dave_LOgic
Posts: 51
Joined: Wed 10. Nov 2004, 21:48
Location: London

Post by Dave_LOgic »

Yes thanks, It works..I just pasted your section over mine and it worked ok....I have the CSS below and the CSS file that came with the Free template called seperately in the HTML Head..The CSS below came from this thread...a few pages back..



#primaryNav {
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 28px;
}

/* 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: 190px;
border: 0px solid #ddd;
border-bottom: none;
top: 18px;
left: -0px;
padding: 0px 0px 0px 0px;
background-color: #f9f6ed;/*url(../../picture/hen/bottom-5.gif) no-repeat bottom left;*/
z-index: 20;
/* filter:alpha(opacity=80);
opacity:.8;*/
}

/* Fix IE. Hide from IE Mac \*/
* html #primaryNav ul ul { top: 18px; left: -1px; width: 178px;}
/* End */



/*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 {
background-color: #000000;
}
#primaryNav #alias li{
background-color: #000000;

}
#primaryNav .itemOn {
font-weight: bold;
color: black;
}
#primaryNav .itemOnFirst {
font-weight: bold;
color: black;
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;
}
Stim wrote:Your menu work in IE 7 now? It still not working for me, with IE 6 and with XP OS.

Don’t know where to align the text really, which css file do you use? Can you post it?
Stim
Posts: 587
Joined: Mon 6. Jun 2005, 13:13

Post by Stim »

Its nice if it work with IE7. Only problem with your menu is that not work with IE6.

Here is css file I use and it work with IE6 and Firefox 1.5. Probable also with IE7. If you want u can use same css as i do. Text is aligned to left also.

Test and se if this work:

Code: Select all

#primaryNav {
   margin: 0px 0px 0px 0px;
   padding: 0px 10px 0px 28px;
   /*background-color: #b7c9e1;*/
   background: url(../../picture/hen/greyblend4.jpg) no-repeat;
   height: 26px;
 }
/*#primaryNav a:link, #primaryNav a:visited {
	color: #666;
}*/
#primaryNav a:hover {
	color: #677EA5;
	text-decoration: none;
}
#primaryNav ul ul li a.submenu {
   background-image: url(../../picture/r_arrow.gif);
   background-repeat: no-repeat;
   background-position: 98% .5em;
   padding-right: .6em;
} 
#primaryNav ul ul li.itemChoosen a.submenu {
   background-image: url(../../picture/r_arrowgrey.gif);
 }
 #primaryNav ul ul li.itemChoosen a.submenu:hover {
   background-image: url(../../picture/r_arrow.gif);
 } 
#primaryNav li.itemChoosen ul li a.submenu {
   background-image: url(../../picture/r_arrow.gif);

 } 
/* 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 .itemOn {
	font-weight: bold;
	color: #677EA5;
}
#primaryNav .itemOnFirst {
	font-weight: bold;
	color: #677EA5;
	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 ul li.itemChoosen {
	font-weight: normal;
	color: #fff;
	background: #b2c6e1;/*#7E9ACC;#677EA5;*/
} 
#primaryNav ul li.itemChoosenFirst {
	font-weight: bold;
	color: #677EA5;
}
/* Fix IE. Hide from IE Mac \*/
   * html #primaryNav ul li.itemChoosenFirst a { color: #677EA5;}
   * html #primaryNav ul li.itemOnFirst a { color: #677EA5;}
   * html #primaryNav ul li.itemChoosen a { color: #fff;}
   * html #primaryNav ul li li.itemChoosen a { color: #fff;}
   * html #primaryNav ul li li li.itemChoosen a { color: #fff;}
   /* End */
#primaryNav .itemChoosen ul{
	font-variant: normal;
} 
#primaryNav .itemChoosenFirst ul{
	font-variant: normal;
}   
#primaryNav ul ul {
   display: none;
   position: absolute;
   width: 178px;
   border: 1px solid #ddd;
   border-bottom: none;
   top: 18px;
   left: -1px;
   padding: 0px 0px 0px 0px;
   background-color: #f9f6ed;/*url(../../picture/hen/bottom-5.gif) no-repeat bottom left;*/
   z-index: 20;
  /*  filter:alpha(opacity=80);
   opacity:.8;*/
}

   /* Fix IE. Hide from IE Mac \*/
   * html #primaryNav ul ul { top: 18px; left: -1px; width: 178px;}
   /* End */
   
   
#primaryNav ul ul ul {
   display: none;
   position: absolute;
   left: 178px;
   top: -1px;
   }

   /* Fix IE. Hide from IE Mac \*/
   * html #primaryNav ul ul ul { left:178px; 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: 3px 0px 2px 0px;
   float: left;
   position: relative;
   font-weight: normal;
   border: 1px solid #ddd;
}
*>html #primaryNav ul li {
	width: 102px;
}
/*----ie5mac hack end------------*/
#primaryNav ul li#last{
	border: 1px solid #ddd;/*#7e9aca;*/
}
#primaryNav ul li li {
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   border-top: 0px solid #ddd;
   border-bottom: 1px solid #ddd;
   float: none;
   display: block;
   font-weight: normal;
   border-left: none;
}

/* here we set the default display state for the links */
#primaryNav ul li a {
   padding: 0px 12px 0px 12px;
   display: inline;
  /* text-decoration: none;*/
   }
   
#primaryNav ul li li a {
   padding: 3px 12px 3px 12px;
   display: block;
   /*width: 130px;*/
   }

   /* 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: #444; }
#primaryNav ul li li {color: #777; }/* background-color: #f9f9f9;*/
#primaryNav ul li li li {color: #777; }/* background-color: #f9f9f9;*/
#primaryNav ul li li li li {color: #777; }/* background-color: #f9f9f9;*/

/* 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 { 
	color: #677EA5; 
	
}
#primaryNav li.sfhover a { color: #677EA5;}
   /* 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: #677EA5; background-image:none;}
   /* 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: #677EA5; }
   /* L3 off states - for children */
/*#primaryNav li li li:hover li*/
#primaryNav li li li.sfhover li a { color: #777; }

  /* L4 on states */
#primaryNav li li li li:hover, #primaryNav li li li li.sfhover a { color: #677EA5; }
   /* L4 off states - for children */
/*#primaryNav li li li li:hover li*/
#primaryNav li 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: #fafaff;
   /*background:url(../../picture/hen/bottom-6.gif) no-repeat top left;*/
  /* filter:alpha(opacity=100);
   opacity:1.0;*/
}
/*#primaryNav li li.unten:hover, #primaryNav li li.sfhover .unten, #primaryNav li li li.unten:hover, #primaryNav li li li.sfhover .unten{
   background:url(../../picture/hen/bottom-6.gif) no-repeat bottom left;
   }*/
/* 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;
   }
)-= 1.3.0 user =-(
phalancs
Posts: 793
Joined: Thu 19. Feb 2004, 05:09
Location: Germany

Post by phalancs »

@hendrik

hmm i am getting shazy crazy.

It does not work for me. Although i used your php file it does not add tha "last" thing. Furthermore it does not even add itemon"first". I onl have "itemon".

Its feels like i totally have a diferent version than you.

I have tried your css file from your site in combination with the php file you offered on this page. Wanted to use this as the basis. But it creates a menu das has absolutely nothing to do with the one on your site. I got no clue...
2008
hendrik
Posts: 66
Joined: Thu 9. Dec 2004, 21:18
Location: Berlin
Contact:

Post by hendrik »

Hallo Phalancs,

sorry, habe deinen Post erst heute gesehen.
Ich glaube, es liegt daran, dass du eine phpwcms-Version neuer als 1.2.8
verwendest, stimmts?
Ich vermute, dass mein Code da nicht mehr richtig funktioniert.
Ich verwende für neue Installationen mittlerweile das NAV_LIST_UL - Menue.

Falls ich mir deine Seite anschauen soll, gib mir doch mal die Url.

Grüsse
Hendrik
bestertester
Posts: 59
Joined: Thu 4. May 2006, 17:51

Dieses Menü für Version 1.3.2

Post by bestertester »

Hat jemand von Euch schon eine Workaround für die PHPWCMS Version 1.3.2 gefunden?
zuker
Posts: 80
Joined: Fri 18. May 2007, 17:13
Location: Lithuania

Post by zuker »

Hello, can anyone say to me do this DHTML menu works on phpwcms1.3.3 platform?
smundt
Posts: 4
Joined: Sun 15. Jan 2006, 23:45

Problem in Firefox

Post by smundt »

Hello,

I implemented your DHTMLMENU succesfully and It's looking great! Thanks for this great work.

In IE7 it works without problems, but in Firefox 2.0.0.3 the menu will be breaked, when I click on a menu entry.

Try a look here: http://f-3917.de/index.php?index

I hope you can help me with this problem...

Sorry for my bad english!!! :(
Post Reply