Results 1 to 2 of 2

Thread: AnyLink CSS Menu and the rel attribute

  1. #1
    Join Date
    Dec 2012
    Thanked 0 Times in 0 Posts

    Default AnyLink CSS Menu and the rel attribute

    Script Title: AnyLink CSS Menu v2.3
    Script URL (on DD):

    I have been using Demo #2 (multiple columns) as the basis for my site’s menus and have been quite happy with them ( 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.


  2. #2
    Join Date
    Mar 2005
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries


    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.
    Last edited by jscheuer1; 02-10-2013 at 03:25 PM. Reason: add filename
    - John

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    huygens1962 (02-10-2013)

Similar Threads

  1. Replace <img> tag with it's alt attribute ?
    By PhillyPhanatic in forum JavaScript
    Replies: 7
    Last Post: 10-09-2009, 12:15 PM
  2. Switch Menu - "Missing Secure Attribute"
    By dvarner in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-07-2008, 05:27 PM
  3. get & set attribute functions
    By Trinithis in forum JavaScript
    Replies: 2
    Last Post: 05-20-2007, 09:49 PM
  4. AnyLink Drop Down Menu/Anylink Css
    By wendyscountrycloset in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-04-2007, 04:07 PM
  5. Replies: 2
    Last Post: 08-03-2006, 01:56 PM


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts