Adding static text to AnyLink menu

[FormerLurker]

1) Script Title: AnyLink JS Drop Down Menu v2.2

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem: Two questions, one of which I think I will be able to figure out on my own but I want to make sure I'm thinking correctly.

Main question: I am trying to use the AnyLink menu and keep the menu contents contained in the js file instead of inline (the menus are used across several pages). I am using the multi-column menu structure. What I would like to do is be able to include a line of static text in the menu that does not link to anything, but that allows me to categorize the things in the columns. For example, I'd like each column to look something like this:

SUBCAT1
> menu item 1
> menu item 2
> menu item 3
> menu item 4

SUBCAT2
> menu item 1
> menu item 2

Is there a way to do this? From a coding perspective, I'm assuming one way might be to replace the link with a code that the script will interpret as "this is not a link, so don't mark it up as one," but I know absolutely no JS so I'd be in over my head in coding that.

Is that the right assumption? Or is there another way to do it? Any help would be greatly appreciated.


Secondary question: If you look at my sample above, what I also want to do is have the > sign only appear when that particular link is hovered over. What I'm assuming I need to do here is add margin/padding to the link texts then use CSS rollover to display/hide the arrow as a background image. Does that sound right? If so, the challenge would be to figure out how to have one CSS class for the link items and a different CSS class for the static text (because I wouldn't want that padded since it wouldn't need room to have the arrow appear).

Thanks! I love the script; it is exactly what I was looking for if I/we can do these two tweaks.

[jscheuer1]

First question, use:


<a name="something_unique" class="menuanchorclass" rel="anylinkmenu1">

instead of:


<a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu1">

Second question, sounds about right, something like:


.anylinkmenu a {
padding-left: 10px; /* width of arrow image */
}
.anylinkmenu a:hover {
background-image: url(arrow.gif);
background-position: left;
background-repeat: norepeat;
}

[FormerLurker]

John,

Thanks for the help - but I think I may not have been clear enough in my initial post. It's not the anchor links I'm trying to make non-clickable, it's actually a line in the menu itself. In other words, I want to be able to have a line in the menucontents.js file that will be interpreted by the script as a line of text that should not be styled as a menu item/link. I know I can eliminate link behavior by making the href a "#," but it's still styled as a link. My plan is to make each of the active menu items' behavior have both text-decoration:underline and the arrow during the hover state, but I want no text decoration of any kind on the "subcategory" static text.

As I'm typing this, I'm thinking I could easily solve everything (as well as having more CSS control) if there was a way to assign a particular class to each item in the menucontents.js file.

Any thoughts on how I might be able to do that? It might also be an interesting tweak for the script in general - set up for a default class (or no class) to be added to individual menu items, but allow the user to add a class (to each line item) within the menucontents.js file if desired.

Thanks!

[jscheuer1]

I came up with a different idea, as the href="#" is not good for some browsers. Add this to your stylesheet:


.nolink, .nolink:hover {
background-color: black!important;
color: #ccc!important;
cursor: text;
}

Adjust as desired. Replace this part of the anylinkmenu.js file:


getmenuHTML:function(menuobj){
var menucontent=[]
var frag=""
for (var i=0; i<menuobj.items.length; i++){
frag+='<li><a href="' + menuobj.items[i][1] + '" target="' + menuobj.linktarget + '">' + menuobj.items[i][0] + '</a></li>\n'
if (menuobj.items[i][2]=="efc" || i==menuobj.items.length-1){
menucontent.push(frag)
frag=""
}
}
if (typeof menuobj.cols=="undefined")
return '<ul>\n' + menucontent.join('') + '\n</ul>'
else{
frag=""
for (var i=0; i<menucontent.length; i++){
frag+='<div class="' + menuobj.cols.divclass + '" style="' + menuobj.cols.inlinestyle + '">\n<ul>\n' + menucontent[i] + '</ul>\n</div>\n'
}
return frag
}
},

with:


getmenuHTML:function(menuobj){
var menucontent=[]
var frag=frag2=""
for (var i=0; i<menuobj.items.length; i++){
frag2 = menuobj.items[i][1] === ''? 'class="nolink"' + '>' : 'href="' + menuobj.items[i][1] + '" target="' + menuobj.linktarget + '">';
frag+='<li><a ' + frag2 + menuobj.items[i][0] + '</a></li>\n'
if (menuobj.items[i][2]=="efc" || i==menuobj.items.length-1){
menucontent.push(frag)
frag=""
}
}
if (typeof menuobj.cols=="undefined")
return '<ul>\n' + menucontent.join('') + '\n</ul>'
else{
frag=""
for (var i=0; i<menucontent.length; i++){
frag+='<div class="' + menuobj.cols.divclass + '" style="' + menuobj.cols.inlinestyle + '">\n<ul>\n' + menucontent[i] + '</ul>\n</div>\n'
}
return frag
}
},

Now any item in a drop down that you wish to become not a link, but a header of sorts, set its 2nd value in menucontents.js to "", ex:


var anylinkmenu2={divclass:'anylinkmenu', inlinestyle:'width:150px; background:#FDD271', linktarget:'_new'} //Second menu variable. Same precaution.
anylinkmenu2.items=[
["CNN", "http://www.cnn.com/"],
["MSNBC", ""],
["Google", "http://www.google.com/"],
["BBC News", "http://news.bbc.co.uk"] //no comma following last entry!
]


It will be given the 'nolink' class and have no href.

[FormerLurker]

Amazing... this is perfect. Now I just need to tweak the CSS. Thanks so much!