AnyLink CSS Menu and the rel attribute

[huygens1962]

Script Title: AnyLink CSS Menu v2.3
Script URL (on DD): http://www.dynamicdrive.com/dynamici...anylinkcss.htm

I have been using Demo #2 (multiple columns) as the basis for my site’s menus and have been quite happy with them (http://www.spaceandastronomystamps.com/). As I get ready for HTML5, I am running into validation problems with the way the rel attribute is used in this script.

I am looking for either (1) a way to modify AnyLink CSS so that something other than rel is used to associate the drop-down with the anchors or (2) a completely different multi-column menu scheme that does not use rel.

TIA

[jscheuer1]

It really doesn't matter nor hurt anything. But for purists, read on . . .

In HTML 5 a new constraint was placed upon the validity of the rel attribute. It's value must now be registered with an online database that's more or less a part of the HTML 5 standard. It's impractical to register each use you might want to put the rel attribute to and it's value is supposed to fit a narrow list of categories which is impossible for the use this script needs to make of it. However, also with the advent of HTML 5 we are given a whole new set of attributes that are valid on any element, the data dash attributes. Any attribute name that begins with 'data-' can have any text value as long as that value begins with a letter or an underscore.

To make use of that, around line #213 of anylinkcssmenu.js we have this highlighted code:

setupmenu:function(targetclass, anchorobj, pos){
	this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
	var relattr=anchorobj.getAttribute("rel")
	var dropmenuid=relattr.replace(/\[(\w+)\]/, '')
	var menu=this.menusmap[targetclass+pos]={
		id: targetclass+pos,
		anchorobj: anchorobj,	
		dropmenu: document.getElementById(dropmenuid),
		revealtype: (relattr.length!=dropmenuid.length && RegExp.$1=="click") || anylinkcssmenu.ismobile? "click" : "mouseover",
		orientation: anchorobj.getAttribute("rev")=="lr"? "lr" : "ud",
		shadow: document.createElement("div")
	}
	menu.anchorobj._internalI . . .

Using a text only editor like NotePad, make that line like so:

	var relattr=anchorobj.getAttribute("data-rel")

Save and use that version. Now in your markup, instead of using the rel attribute, you can use the data-rel attribute which is valid in HTML 5. Just be aware that it's not valid in the other DOCTYPES.