new dhtmlmenu RT

[volkman]

Hi Yves,
it works perfect with Safari 2.0.1, just tested it. Doublechecked with FF, same result. Users of Mac-OS X up to 10.3.9 have to use Safari 1.2, that version ain't work. Current System Mac-OS X 10.4.X uses Safari 2.0.1, that works.
btw, IE on Mac does not work at all with the testsite, no menus, nada.

regards
volkman

[StudioZ]

Hi Volkman

Thanks for confirming Safari on Mac OS X up to 10.3.9.
I am not up to date yet. Using 10.2.8
About I.E. on Mac: Not really a problem...
Who uses I.E. on Mac anyway?

Hi Yves,
it works perfect with Safari 2.0.1, just tested it. Doublechecked with FF, same result. Users of Mac-OS X up to 10.3.9 have to use Safari 1.2, that version ain't work. Current System Mac-OS X 10.4.X uses Safari 2.0.1, that works.
btw, IE on Mac does not work at all with the testsite, no menus, nada.

regards
volkman

@ Frold: BTW: Thanks for pointing me in the right direction

Cheers,

[rtilghman]

Glad to hear it works in so many different places... I don't have the resources to test it on Mac, but given its standards strict from a code perspective most of the newer CSS 1.0/2.0 compliant browsers should support it without a problem.

Mac IE is a standards nightmare if I remember correctly... a quick search via google just reinforces that understanding.

http://www.macedition.com/cb/ie5macbugs/

Anyway, glad ya'll are finding it useful.

Best,
Rick

[Omar]

I would like to implement this feature in a vertical menu structure.
What would I have to change to accomplish this?
Can anyone help me with this?

Omar

[ssyfrig]

Hi

Question to the FF (Windows) tester do you also have this result?



the rt works for me great in IE but not in FF....

http://phpwcms.syfrig.net DEV URL !!

Template

Code: Select all

<table width="800" height="30" border="0" cellpadding="0" cellspacing="0">
  <tr> 
    <td valign="top" id="primaryNav">{DHTMLMENU:0,itemOff,itemOn}</td>
    <td width="390" class="tdNextNav">&nbsp;</td>
  </tr>
</table>

css = orginal from Post 1

thanks, Sven

[rtilghman]

The problem has tro do with how you defined your source table and lists... what's happening is that the fly-out menu is appearing underneath the first level menu items. This probably has to do with a css conflict somehwre else, such as with your site CSS styles, etc.

Go here:

http://chrispederick.com/work/webdeveloper/

And get the developer bar for FF. Install it, revisit yoru page, and choose Outline > Link without title attributes. Then mouseover a primary menu element to see the problem. The submenu loads beneath the main menu.

Looking through your CSS quickly I did notice this:

".tdNextNav {
border-top-color: #CC0000;
border-top-style: solid;
background-color: #ECECEC;
border-top-width: 1px

}"

Setting a border top width of 1px would have the effect of pushing the menu items down 1px on the page, thereby pushing it over the top of the submenu.

Just a guess. It may be some other problem entirely. However, I can say that the menu works perfectly in FF, so its an implementation problem/conflict. You just need to track it down.

Best,
Rick

[ssyfrig]

Hi Rick

I removed the class ".tdNextNav" ... same look. I will setup a blank new template....

... test temp. on http://phpwcms.syfrig.net/index.php?id=32,0,0,1,0,0

Template=

Code: Select all

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

same look ... I will search again..

thanks Sven

[ssyfrig]

If I remove all entry from frontend.css it works… There must be a conflict with other definitions. But I don’t know where.

Sven

[ssyfrig]

I found the conflict…..

In my frontend.css I have

Code: Select all

a:link, a:visited, a:active {
  background-color: #FFFFFF;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: none;
  color: #FF0000
}


a:hover {
  background-color: #FFFFFF;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: underline;
  color: #000000

If I remove the a:active it work's.

can somebody explain me why? because all definitions in the navigation should be part of the ID primaryNav.

thanks, Sven

[rtilghman]

Because of how a "Cascade" works. Any attributes you apply to an actual tag (like "a") are applied to all instances of that tag throughout a given page unless specifically overwritten. The menu is within the PrimaryNav class and all those rules are specifically applied to elements within a bucket with that ID. However, when you define style rules without a class or ID they reach across all buckets irregardless of class or ID.

This is exactly how its supposed to work. I would say that defining link tags with all the attributes you specify probably isn't the best way to approach your CSS... you should use the cascade to your advantage by defining font in the "Body" tag for example.

Best,
Rick

[Ben]

Did you guys know that a CSS dhtml menu has already been implemented into CMS Made Simple? ( http://www.cmsmadesimple.org ) There's a demo here - http://opensourcecms.com/index.php?opti ... iew&id=452

Maybe you can take their ideas and modify them to work for phpWCMS.

[chAb]

Hi,
I tried to use this menu but it doesn't work.

• - My version of phpwcms is 1.2.5 DEV (the original one without add on or hack)
  
  - I have included the css into the frontend.css
  
  - I have created a .js and putted the link into the head of the template
  
  - And I putted this on the body of the template :

  Code: Select all

  <div class="primaryNav">{DHTMLMENU:1,itemOff,itemOn}</div>
  

Is there anything else to do ?

PS : I'm using the template FREE-L from PEPE (http://phpwcms-templates.de/), without tables (only css) and the frontend.css is not the orginal one.

To see this trouble look at this URL : http://iupm.free.fr/index.php?formation

If anyone have an idea, I would appreciate.

Thanks,

ChAb - a french webmaster using phpwcms

[ssyfrig]

Hi,

try

Code: Select all

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

greez, Sven

[chAb]

That was that ! Thank you very much - You can see the result here

But I don't understand why ?
In the css, the primaryNav style is preceded with a # which mean you can you even use it in "id" of "class" balise...
If someone have an answer...

Moreother, I have some trouble to change the style of it. I think some are herited from other style but i don't know what.
If someone can take a look, I give the path to my stylesheet

I will try to found the problem...

Thanks

[rtilghman]

In CSS "#" is ID, "." is class. The ID reference is used because the PrimaryNav is and must be a unique reference on the page (you don't want the styles used for nav being inadvertantly inherited). Classes can and are use for repeated styles (multiple assignments, same page). Class and ID are two totally different DOM references.

With regard to your problems I'll offer these potential avenues of approach.

1. Provide Containers
From a cursory glance at your stylesheet and code the menu lacks a container. I didn't design the menu to be a container... just to be the menu. In other words you should have a parent/page container to provide the form. I would thus recommend putting the whole thing in a larger div and using that div to set the width and position of the entire "menu box". Note that right now the top level items show up stacked in the middle of the page in firefox.

1. Avoid Global Styles
With CSS you should avoid assigning "global" styles to elements except in very limited cases, like with the Body tag. This is because if you assign classes to something like, say, "Table" it will be applied to ALL table elements in the page irregardless of position or inheritance. It looks

Best,
Rick