In Chrome script, how do the "rel" attributes work?

[mattsson]

1) Script Title: Chrome CSS Drop Down Menu (v2.5)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem: No problem, I just want to understand something new I see in the HTML

Hello, I'm thinking of using the Chrome drop down menu to make the main menu bar in a client's template. So that I feel comfortable using and adapting it, I'd like to understand how the "rel" attribute in the <a> tags really works.

I do understand that I associate the div that is the drop down menu, with the menu bar link ("a") by giving the div a unique ID, and associating that ID with the link via the "rel" attribute of the menu bar link, e.g.

<li><a href="#" rel="dropmenu1">Resources</a></li>

I've never seen the "rel" attribute used this way, and tried to look up more about it. The W3C says "rel" indicates the role of a link. It also says it can be used to indicate a forward link, with "rev" indicating a reverse link. But it gives no more detail than that.

How in the world did you know to use "rel" to associate your menu link with the drop down menu?

I just had a look at the JavaScript (chrome.js). Is it that the JavaScript is using the "rel" value to identify the "div" to be hidden or made visible, in response to mouseover and mouseout events of the menu bar link?

I suppose my curiousity is also to understand how standards-compliant the chrome menu code is. You folks obviously have done your homework in coming up with cross-browser compatible menus, but I want to hear it from a 2nd source.

Thanks, I've been looking for a long time, and tried other examples, to find a menu bar that will please my client (I usually use third party templates, but my client wants a unique style).

Thanks in advance for your help.
Carol

[Snookerman]

These pages might help you:
http://www.utoronto.ca/webdocs/HTMLd...TML/a_rel.html
http://forums.mozillazine.org/viewto...st=0&sk=t&sd=a

[mattsson]

Hello Snookerman,

Thanks for the reply. The utoronto answer I'm a little confused by. They say the "rel" indicates the relationship of the href to the current document. Yet in this Dynamic Drive script, "dropmenu1" is actually related to the link (it's the submenu for the link). So maybe "rev" would be the proper attribute to use?

The mozillazine answer says some browsers (user agents?) are starting to make use of the rel and rev attributes.

So that all helps with the semantics in general, but I'm still confused about how the actual Dynamic Drive script uses the "rel" attribute to come up with that submenu. My best guess is that the JavaScript uese the "rel" attribute value to come up with the ID to the drop down menu div, and sets mouseover and mouseout events for the menu item. The mouseover and mouseout events do things to the div it seems.

These pages might help you:
http://www.utoronto.ca/webdocs/HTMLd...TML/a_rel.html
http://forums.mozillazine.org/viewto...st=0&sk=t&sd=a