When the a href tag is being replaced with the span tag for the nolink feature, it wrecks the theming of the menu. Is there a less intrusive way to implement the disabling of a menu item? Perhaps adding a no-link class to anchor link and then using jquery to intercept the click event.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

a.ross’s picture

Yes.

The best way is to change the HTML tag for "nolink" in admin/config/system/special_menu_items to this:
<a href="#">

It would be preferable to be able to change it to this though:
<a href="javascript:void(0)">

Is there any possibility of allowing this? The permission for changing the tag (Administer site configuration) is considered high enough to be able to take over a site already, so I don't think it's necessary to filter the tag for javascript. Am I correct?

a.ross’s picture

Otherwise it might be viable to simply have a set of pre-defined options in a dropdown or radio buttons, like this:

  • Span (<span>)
  • Anchor (<a href="#">)
  • Javascript void (<a href="javascript:void(0)">)
a.ross’s picture

I've actually found a much better solution, and that is to just use <a>. And this is actually valid HTML5! So if your template is using HTML5, then this is the way to go.

And if we are going for a preset list, then something like this seems sensible:

  • Default (<span>)
  • HTML4 Javascript void (<a href="javascript:void(0)">)
  • HTML5 anchor without href (<a>)
NecroHill’s picture

just to inform that javascript:void(0) and a on double click return page 404 (urls: your-domain.xx/void(0) and your-domain.xx/undefined accordingly)

a.ross’s picture

Uh, yeah, that was part of what this issue was about... Javascript is currently filtered out, that's why you get the faulty http://example.com/void(0) url.

mengi’s picture

Using < a > for a superfish link makes the link selectable if using sf-SmallScreen and will send the user to the 404 error. Using < a href="#" > will not send the user anywhere but is still a selectable option. is the best option so far, as it is not able to be selected by the user.

a.ross’s picture

No, <a href="#"> is not the best option, as that links to the top of the page. I don't see sf-Smallscreen in the options, but this must be a bug in that plugin. What is the URL that gives you a 404?

pyxio’s picture

aburnsni’s picture

Possibly not the correct place to post, but if someone who knows better could they please sort it.

To get this working with sf-smallscreen.js:
I am using <a href="#"> (I know there are other debates about this)
in sf-smallscreen.js
change the line
disable = item.is('span') ? ' disabled="disabled"' : '',
to
disable = item.is('span') || item.attr('href')=='#' ? ' disabled="disabled"' : '',

This causes sf-smallscreen.js to disable the link if either <span> or <a href="#"> are used.

grincon’s picture

This worked like a charm for me: HTML for "nolink" in special menu items configuration enter:
<a href="#" onclick="return false;">

No need to change any code in the modules.

groston’s picture

grincon,

Works for me as well - thank you.

boran’s picture

Issue summary: View changes

#10 works for me too: as the title link on superfish dropdown menus on touchscreens like iphones, so that a click works like a desktop hover.

Great!

thomsonj’s picture

#10 worked for me as well. Thank you!

volkan@bd’s picture

Thanks a lot grincon. It works.

simonbcfa’s picture

Brilliant #10

sujomuc’s picture

#10 works ! Thanks a lot.

izmeez’s picture

Status: Active » Needs review
FileSize
704 bytes

Attached is a patch adding suggestion from comment #10 as the default html no-link configuration setting rather than <span> for review and those who need it.

a.ross’s picture

This has been said 3 years ago already, but apparently people didn't get the message, so just to repeat myself:

No, <a href="#"> is not the best option, as that links to the top of the page.

The variant with return false, disabling the click event on it, is ugly and hacky (doesn't always work). Also, it's only "needed" in conjunction with sf-smallscreen. And even in that case it would be better not to work around it like this, but instead to fix sf-smallscreen not to make faulty links!

kulonlz’s picture

Probably worth noting, adding <a> breaks keyboard accessibility in IE, so it's not really an option.
A workaround could be <a tabindex="0">?

a.ross’s picture

True, it breaks keyboard focusability, and not just for IE. If you need it, taxindex should indeed work. See http://stackoverflow.com/a/14258485/1000608

izmeez’s picture

Here is a patch using tabindex. Is this the preferred way?

kulonlz’s picture

I'm thinking yes, however you may want to change the description text.

izmeez’s picture

Yes, I was wondering what wording would make sense for the description but thought the change might become the new default and I'm not sure why or when span tag would be needed?

izmeez’s picture

I am wondering if this is a duplicate of #2291085: Add tabindex to nolink items will need to explore further.

izmeez’s picture

I don't think this is a duplicate of #2291085: Add tabindex to nolink items.

cobasa’s picture

So patch #21 helps by making the menu item tabbable, but when tab browsing, I'm not able to expand the item when it's used as a parent like I can with other parent menu items. Is that a configuration issue? I'm testing for accessibility, so clicking the item is not an option.