0

Let's say I want to modify this drop down naviagtion demo.

You can see that the parent tabs named "Blog" and "Work", are linking to ?blog and ?work, which means that when I'll modify this demo, I can have them link to domain.com/blog.htm and it would work just fine.

However, if I don't want these parents to link to anywhere (and rather that only their child tabs would be actual links), It is impossible for me to keep this demo working properly if I would completely take off the a href tag from these parent tabs.

Therefore, I could have them both link to #, so the demo would keep working fine, and yet in case that the user click this "dummy" link, it won't send any server request as far as I understand.

The question is whether this would be an acceptable practice (having this useless # tag, just in order to maintain the same work flow of the navigation)?

rockyraw
  • 1,125
  • 2
  • 15
  • 36

3 Answers3

1

Generally, if an element doesn't make semantic sense as a link, then it shouldn't have an href attribute.

The intended behavior of href="#" is actually to scroll to the top of the page, not "do nothing".

AFAIK, the best practice for a drop-down menu is to put the drop-down's element ID into the menu item's href attribute (e.g., href="#dropdown"), so that clicking on the menu item scrolls to the correct drop-down. You can then use JS to prevent the default link behavior of scrolling, if you wish.

It makes semantic sense to implement root menu items as links, as you're "linking" to the visible drop-down page state.

For a drop-down menu on touch devices, the root menu items should be links (to be tappable).

Community
  • 1
  • 1
Matthemattics
  • 9,577
  • 1
  • 21
  • 18
0

I think by most standards it is acceptable. Personally I don't like it, and I wouldn't use a link for anything that doesn't link to anything or is a control for some action. Therefore rather than use an <a> for the elements, you can use a more appropriate element. In this case I don't think you need one and you can just apply the styles to the <li> or use <span>s for additional styling if you can't get around that.

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
0

You can use the onclick attribute to disable the link.

<a href="#" onclick="return false;">Link</a>

SmashBrando
  • 265
  • 1
  • 3
  • 12
  • Interesting, I wonder though if this practice is acceptable? (maybe Google won't like it..?) – rockyraw Mar 12 '14 at 23:55
  • Im not 100% sure but adding rel="nofollow" may help. I do know that google doesn't like when people add javascriptvoid(0) to the href. – SmashBrando Mar 13 '14 at 00:00
  • I believe embedding JS into the `onclick` attribute is against best practice, as it doesn't play well with other ways of overriding an element's 'onclick' handler. – Matthemattics Mar 13 '14 at 00:37
  • That is the point of adding it in an inline method. It allows it to override the default onclick function and use its own. – SmashBrando Mar 13 '14 at 00:44