new dhtmlmenu RT

brans · Post by **brans** » Tue 16. Aug 2005, 09:50

hmm this seems like you`d be using the A-List-A-Part tutorial, which I have published several months ago, exactly the same method only IE needs a little JavaScript fix

btw.: You are not using DHTML but CSS+HTML

rtilghman · Post by **rtilghman** » Tue 16. Aug 2005, 21:45

There was actually an example before the A List Apart one (in terms of a UL based css menu system), but that discussion was beaten to death in the responses on A List Apart, so there's little merit in reopening the discussion. Yes, more or less this is the same thing as the List Apart UL menu. Also, if I remember correctly the RT I used -while not the DHTML MENU rt verbatim - was based off of your original RT, so kudos to you.

The difference between this and the one posted previously is that this one includes comprehensive style classes to allow control over all menu styling, going FAR beyond anything provided in any previous script, including anything provided by A List Apart (whose menu only goes one level deep) or the Suckerfish reworking that provided multiple levels.

In essence the styling on this menu is more or less something entirely new that, in my mind, makes this menu MUCH more useful. Its possible to say "well, this is just CSS", but I would say "look at the complexity of the actual CSS, look at the complexity of the inheritance structure employed, and look at how the menu bahaves IDENTICALLY in IE and FF".

For example, this script uses the more robust DHTMLMENU2 include which basically adds the ability to write certain ID values, while your RT and menu don't provide any ability for unique IDs.

Another example, this one allows for "in" states, while the one you provided doesn't (in states are states when the parent element for a child menu is open). How, in your original script, do I know which menu the open item referes to when I'm in it? Answer, I don't. This is actually a big difference and took a lot of effort to get working in both FF and IE.

And FYI, DHTML (Dynamic HTML) IS Javascript + CSS + HTML. Any solution employing a combination of all three to provide for complex interactive bahaviors is, by definition, DHTML. As you yourself highlighted in the very first paragraph of your post, this menu uses all three.

http://encyclopedia.laborlawtalk.com/DHTML

Let me know if I can provide any further clarification on other technology terms, etc. I have access to google and the brainpower to search for the definition to terms before correcting people regarding their use.

Ta ta,
Rick

brans · Post by **brans** » Sun 21. Aug 2005, 16:43

well ok my fault. thanks for your corrections, I have to admit that I didn't look deeper into your navigation but only saw the results.

Post by **Oliver Georgi** » Sat 3. Sep 2005, 22:07

nice work - I will implement it.

Oliver

StudioZ · Post by **StudioZ** » Sat 3. Sep 2005, 22:37

Oliver Georgi wrote:nice work - I will implement it.

Oliver

hendrik250874 · Post by **hendrik250874** » Tue 6. Sep 2005, 16:42

Hello, I need a little help.
I followed the instructions and it works as expected

However, when I hover over my topmenu, the menu below shows, but I cannot get to it. When I move my cursor, the menu immediately dissapears. It's exactly the same in Firefox.

Thanks for any advice.

rtilghman · Post by **rtilghman** » Tue 6. Sep 2005, 17:19

Short answer: there are a bunch of potential "glitches" regarding the way block level elements interact within the page flow, and you need to be VERY attentive to what properties you set for elements that interact.

On that note it sounds like you're having an overlap problem. Basically some other element is automatically (or deliberately) getting a higher Z-index than the menu and is overlapping the menu at some point. While you may not see the overlap a box or object could easily have no content in the overlap location.

One example where this often happens is with the "position" setting. When you set the position for an element to, say, "absolute", it removes the element from the normal page flow, giving it a higher Z-index and making it overlap any other element (like a menu) that intersects it. The effect of this is pretty logical; when your mouse transitions to the overlapped element you lose focus on the menu and can't interact with it, etc. When two "absolute" elements intersect the effect is usually just wierdness; they almost seem to merge into one another.

Recommending a solution is a bit tricky since its really just detective work. First, I would recommend you track down ANY level elements that could be in the menus path (DIVs, ULs, etc.) and catalog them. I would then recommend that you look for any elements that have a setting that causes them to appear:

- outside the normal page flow
- in a higher z-index than normal page items.

As stated above, I would look specifically for any element with "position:absolute". Other settings that can have this kind of effect are the "float" setting, etc.

Hope this helps.

Best,
Rick

hendrik250874 · Post by **hendrik250874** » Tue 6. Sep 2005, 21:16

Well I be...
Very true, the menu intersected with the main content part which I had put in a div (to scroll the content). Once I removed the div it behaved like it was supposed to be.

I do need the content in a div, but I will try to change some settings.
You can see what happened at http://www.jayamnv.be/nv/index.php?thanks
(the only subitems are under 'contact')

Thanks for the advice, I hope I can get it to work.

=EDIT=
It works. I made sure the menu-items had a higher z-index than the div with my content. I therefore added z-index'es in your css.

Thanks again.

rtilghman · Post by **rtilghman** » Tue 6. Sep 2005, 22:20

It works... but not in FF.

Basically FF handles z-indexing differently the IE, I had similar issues when I was trying to find a workaround for my own site awhile back.

Whether FF matters to you or not is up in the air, but I'm fairly certain the problem is related to the following line:

Code: Select all

<div class="content" style="position:relative; top: 0px; left: 0px; width:100%; height:100%; overflow: auto; z-index:1;">

If all you're trying to do is make the main content area scrollable you shouldn't need the "position:relative" in there... the sizing and the overflow control should be enough.

Best,
Rick

hendrik250874 · Post by **hendrik250874** » Tue 6. Sep 2005, 23:05

You're right, no luck in FF.
I removed the postion-tag and afterwards even the z-index, but it didn't matter...

Maybe I should start with a very basic test-design, insert the menu, and then the other div, and work it up all together.

tamara · Post by **tamara** » Tue 11. Oct 2005, 17:27

I'm not having any issues with FF. The menu works well.

I am wondering if the menu can pull the same data that the sitemap does? The sitemap is much more detailed than my menu because the sitemap is showing links to all of the Articles. The menu is pulling the Site Structure.

I've looked at the code and it is above my php understanding. But my guess is to look at these two parts:

Code: Select all

$GLOBALS['content']['struct'][$key]['acat_struct']

in the dhtmlmenu
and

Code: Select all

$content['struct'][ $sitemap['startid']

in the sitemap (cnt19.article.inc.php).

rtilghman · Post by **rtilghman** » Wed 12. Oct 2005, 00:31

Any list that can be given a class or id, or that can be generated inside a container with a referable list or ID, can use this style scheme. Its all a question of referencing it correctly...

With regard to using the sitemap content part to generate the nav...? Don't know, never thought about that one. The menu is part of my templates, not my content parts. I guess you could just stick the rt dfor the sitemap in the template inside a container if you want articles too...

Best,
Rick

sustia · Post by **sustia** » Sat 5. Nov 2005, 20:04

Hi, I'm trying to implement the menu in a new site, and it works fine in IE but not in Firefox
http://noria.ba.cnr.it/index.php
I've putted this one in the head of my templates

Code: Select all

<script type="text/javascript" src="http://noria.ba.cnr.it/phpwcms_template/inc_js/dhtmlmenu.js"></script>

and in the body

Code: Select all

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="primaryNav">
{DHTMLMENU:0,itemOff,itemOn}
</td>
</tr> 
</table>

sustia · Post by **sustia** » Sun 6. Nov 2005, 17:39

I don't understand why, but now it works.

I put it in a div, and reset the cache of the system.

StudioZ · Post by **StudioZ** » Tue 8. Nov 2005, 17:06

Nice DHTML Menu Rick

Thanks !

Windows: IEx - OK
Windows: FFox - OK
Mac: IEx - Not tested
Mac: FFox - OK
Mac: Netscape: OK
Mac Safari - no

Simple test here (Nav):
http://www.aetmis.gouv.qc.ca/sitedevelo ... 56,0,0,1,0

Anyone would know how to hack it, to make it behaves OK
under Safari on Mac?

Thanks again Rick!

Cheers,

new dhtmlmenu RT

Little help needed

And you are right

Once more

same structure as sitemap?