Making some links generated from the wp_nav-menu function unclickeable?

In this website:

http://alexchen.info/brianfunshine/

Read More

I have a navigation menu taken from the twentyten theme. I want to make some links clickeable and some not (some don’t have to behave like a link). I have accomplished this with some CSS but it doesn’t work in all browsers.

The links are dinamically generated with:

wp_nav_menu

Any suggestions?

Related posts

Leave a Reply

4 comments

  1. Create a custom menu item in the admin panel with a dummy URL, foo.com or whatever. Add it to the menu, then delete the target URL and save. The menu item will be rendered without an href attribute and will be unclickable.

  2. Via the menu admin in WordPress you can add a custom class, say no-link, to the links you want to be unclickable. You may need to enable the custom class field via the display options.

    Here’s two ideas, based on jQuery. Note that the links will still be there for those with JavaScript disabled.

    $(document).ready(function() {
    
        // Your navigation ID
        var $nav = $('#navbar');
    
        // A. Completely remove the anchor element and replace it with a span
        $nav.find('li.no-link > a').wrapInner('<span/>').find('> span').unwrap('a');
    
        // or
    
        // B. Remove href attribute so nothing happens on click
        $nav.find('li.no-link > a').removeAttr('href');
    
    });
    
  3. Use js to cancel the link behavior by returning false on click. This should work:

    $(document).ready(function(){
        $("#link-id").click(function(){
            return false;
        });
    });