2

In this website:

http://alexchen.info/brianfunshine/

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?

7
  • why did I get a down vote?
    – janoChen
    Apr 30, 2011 at 11:16
  • probably because its not related to WP
    – Ashfame
    Apr 30, 2011 at 11:24
  • @Ashfame the navigation bar (which uses Wordpress' php functions) of the twentyten theme is not related to Wodpress?
    – janoChen
    Apr 30, 2011 at 11:38
  • your question is about how to make links not behave as links. the source of the links is not that relevant, surely.
    – anu
    Apr 30, 2011 at 11:43
  • if you have to change how WP do something, then only it can be called WP related. If you are looking for a CSS/JS fix, stackoverflow.com might be better. Check my answer (js) to see if that does what you need.
    – Ashfame
    Apr 30, 2011 at 11:47

4 Answers 4

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');

});
1

Use js to cancel the link behavior by returning false on click. This should work:

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

If you don't want a link to behave like a link, then don't make it a link - ie remove the <a> </a> tags.

3
  • the linksa re dinmically added with wp_nav_menu
    – janoChen
    Apr 30, 2011 at 11:39
  • then don't use wp_nav_menu
    – anu
    Apr 30, 2011 at 11:43
  • I can't add them directly. The website if for a client. He must be able to add new links to the menu via wp-admin.
    – janoChen
    Apr 30, 2011 at 11:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.