Disable Parent Links in Nested List Navigation

jQuery code that disables parent links for drop down menus. The menu should be built as nested lists, and the parent link is disabled. This helps eliminate a useless page to display only a list of links to the pages that your dropdown menu already displays.

jQuery

$("#navigation li:has(ul.sub-navigation)").hover(function () {
     $(this).children("a").click(function () {
        return false;
     });
  });

Reference HTML

<ul id="navigation">
  <li><a href="#your-link-here">Nav 1</a></li>
          <ul class="sub-navigation">
                <li><a href="#your-link-here">SubNav 1</a></li>
                <li><a href="#your-link-here">SubNav 2</a></li>
                <li><a href="#your-link-here">SubNav 3</a></li>
          </ul>
  <li><a href="#your-link-here">Nav 2</a></li>
  <li><a href="#your-link-here">Nav 3</a></li>
  <li><a href="#your-link-here">Nav 4</a></li>
</ul>

Comments

  1. User Avatar
    gary

    you should show a working example. I tried it and it does not work. Maybe you are not stating something you consider to be obvious.

  2. User Avatar
    Derek Johnson

    @gary could be the #navigation container id and/or the ul.sub-navigation class name.

    If it’s in wordpress you might also need to change the $ to jQuery

  3. User Avatar
    michael
    Permalink to comment#

    @gary

    You do need to make sure you include the jquery library in your site,
    and depending, wrap this in jquery’s document ready

    such as:

    $(document).ready(function(){

    /* code goes here */

    });

  4. User Avatar
    Brian
    Permalink to comment#

    I prefer woo themes, less fiddling with the code.

  5. User Avatar
    Wedding Video Guy
    Permalink to comment#

    I prefer working with kajabi, all html is taking care of.

  6. User Avatar
    kil
    Permalink to comment#

    please tell me where to put the jQuery code in WordPress? which php or css file?

  7. User Avatar
    Jose
    Permalink to comment#

    I wish you could put a working example link, to illustrate how it will look. So like me, with no experience would actually know how to use it if they like it

  8. User Avatar
    Samantha

    I prefer staying off the internet. Then I don’t have to read painful forum posts.

  9. User Avatar
    leo rapirap

    this snippet saved my backside from being kicked!
    Thanks Chris!

  10. User Avatar
    thegenesis
    Permalink to comment#

    thanks chris!

  11. User Avatar
    Pat Q
    Permalink to comment#

    I think the problem is that the html sample is incorrect; the nested ul should be *inside* the first li, not between the first and second, no?

  12. User Avatar
    Antoine Descamps
    Permalink to comment#

    I prefer using e.preventDefault()

  13. User Avatar
    luke
    Permalink to comment#

    For wordpress users who are using registered menus:

    jQuery('.sub-menu').parent().find('a:first').removeAttr('href').css('cursor','default');
    
  14. User Avatar
    Bonsai
    Permalink to comment#

    Thanks Luke, that worked for me. Great blog overall!

  15. User Avatar
    chris
    Permalink to comment#

    This fixed an issue I was having with mobile safari but is there a way that on a second click that it can go to the link.

    Basically ios used to work like this with my menus (and still does on some of my sites for some reason)

    Any help is really appreciated.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag