How to remove a link, but keep it's mouseover effect?

Question

I'm having a flyout menu on my Drupal 7 website (provided by the Nice Menus module) that is activated when a user hovers it. I have to give up a path for the parent by default, but I actually don't want the parent to be linked to somewhere. I tried the answer from Disable link using css, but that also disables the hovering effect.

Is there a way to remove the link from the menu's parent, but keep it's mouseover effect?

This is the relevant code:

<div id="block-nice-menus-2">
 <ul id="nice-menu-2">
  <li class="menu__item">
   <a class="menu__link menu__link" href="/mysite/">
    My Menu
   </a>
  </li>
 </ul>
</div>

Edit: After reading this comment, I tried adding

Drupal.behaviors.my_custom_behavior = {
  attach: function(context, settings) {

    $('#nice-menu-2 ' +
    'li > ' +
    'a:not(.MYSITE-processed)').attr('href', '#')
                                   .addClass('MYSITE-processed');

  }
};

to my theme's script.js file, but that doesn't work. Did I do something wrong? Can I work on with this?

It would be nice to have a piece of code but I'd suggest giving a class to your link and then create css for that class when it's hover. Like: .myClass hover {background-color:red;} — Takoyaro, Jun 26 '14 at 13:19
Has it to be specifically a link? You can add a hover effect on any element, e.g. span or a div (IE6 won't understand that though). If it has to be a link, you can stop the link acting as a link by using JQuery preventDefault() on it. — wellagain, Jun 26 '14 at 13:32
@GaijinJim: I should have mentioned that the flyout menu is built with the Nice Menus module in Drupal 7. The code is rather complex, so unfortunately I can't give you a little snippet. — Jeroen, Jun 26 '14 at 21:30
Oh...I really know nothing about Drupal. I'm sorry Jeroen, hopefully, someone will be able to put you in the right direction. :) — Takoyaro, Jun 26 '14 at 21:51
@GaijinJim: No problem, my mistake. Thanks for your reaction anyway. :) — Jeroen, Jun 26 '14 at 21:53

Djouuuuh · Accepted Answer · 2014-06-27T12:20:20.270

I had to do this trick several times before. I just did a little javascript like :

$('MYLINKSELECTOR').click(function() {
    return false;
}).mouseover(function() {
    $(this).css('cursor', 'default');
}).attr('href', '#');

It will disable the destination href and set a default cursor but keep the hover effect.

Edit: I use this script in MYTHEME/js/scripts.js and to give you an example of a selector (I use Superfish, not Nice Menu), here is my full code:

Drupal.behaviors.pweMegaMenu = {
attach: function(context, settings) {
  // Parents links shouldn't be clickabled
  $('#menu-695-2 > a, #menu-695-2 li#menu-884-2 > a, #menu-695-2 li#menu-866-2 > a').click(function() {
    return false;
  }).mouseover(function() {
    $(this).css('cursor', 'default');
  }).attr('href', '#');
}

score 0 · Answer 2 · answered Jun 26 '14 at 13:51

A link doesn't necessarily have to link to anywhere. For example: <a href="#">, but if it isn't linking to anywhere, I would suggest considering changing the <a> tags to <div>s or <span>s with css cursor attributes.

Could you make this into a fiddle so we have a little more to work with? Without any idea of what the flyout menu looks like or the (javascript? css?) controlling the hover effect, it's hard for me to give you a concrete solution.

score 0 · Answer 3 · answered Jun 27 '14 at 05:58

0

You can use "javascript:void(0)" as href value.

eg:- <a href="javascript:void(0);" class="yourclass">Your text</a>

This will work same as link, but on clicking no redirection will happen.

answered Jun 27 '14 at 05:58

JSunny

477
2
7

That works nicely when I change the `href` with Firebug manually, but the problem is that I don't know how to do this automatically in my theme. – Jeroen Jun 27 '14 at 12:24

How to remove a link, but keep it's mouseover effect?

3 Answers3