CODEWITHSUNDEEP
jquerycss
user2756503
user2756503

Reputation:

How to prevent anchor tag from following the link on click, but make it show the submenu?

I create a 3-level CSS megamenu on a responsive website. It works fine on the desktop size, but on the mobile version if I click on the menu, instead of showing the submenu, it follows the link added in href="" attribute.

Here is the screenshot of the mobile menu (to make this screenshot I removed the anchor tag to be able to show you how it should look like):

screenshot of the mobile menu

It's fine on the desktop version, because there I use the :hover pseudoclass to show the submenu, but I can't do that in small size, because I want to make the menu useable on touchscreen, so I converted the :hover pseudoclass to click event by means of jQuery. (I don't want to completely remove the anchor tag, because that way I wouldn't be able to use it either in desktop size.)

I tried to make the link inactive with jQuery (see below), and it works, however it doesn't only prevent the anchor tag from following the url, but also disables the submenu.

$("li.menu > a").on("click", function() {
  return false;
});

How could I improve my code to prevent the browser from following the link on click, but still show the submenu in the way it's on the screenshot?

Upvotes: 1

Views: 2927

Answers (2)

Marwelln
Marwelln

Reputation: 29413

You can do this in at least 4 ways.

  • Set the href attribute to # (will make your page scroll to top tho)
  • Set the href attribute to javascript:void(0);
  • Remove the href attribute but add cursor:pointer for each a element with css li.menu > a { cursor:pointer; } (I suggest this)
  • Use e.preventDefault() with javascript (jquery, see below).

$("li.menu > a").on("click", function(e) { e.preventDefault(); });

Upvotes: 5

jbduzan
jbduzan

Reputation: 1126

did you try :

   $("li.menu > a").on("click", function(e) {
        e.preventDefault();
        functionToShowTheMenu();
    });

Upvotes: 0

Related Questions