How can i change menu link when page content empty?

Question

I have a menu with parent and child. I created menu from admin panel using Appearance >> Menus with selecting page. But some of my parent pages content empty so i want to set link(null) when page content empty as like :

<a href='javascript:void()'> Page Name </a>

i can do it set custom menu and link. But i want it dynamic if it is possible? any idea

Answer 1

It's hard to know if a link leads to an empty page without querying the database for each link in your menu first. That would certainly slow down your page loads.

You could try the following method though.

1. Add some text to the link, like "(empty)".
2. Use Javascript/jQuery to look for parent links.
3. Check if the parent link has the text "(empty)".
4. If it does, remove the text "(empty)" and set the href attribute to #

Here is my proof of concept: http://jsfiddle.net/epilektric/mBjF3/1/

The HTML:

<div class="nav-menu">
    <ul>
        <li class="page_item"><a href="http://www.example.com/page-1/">Page 1 (empty)</a>
            <ul>
                <li class="page_item"><a href="http://www.example.com/page-2/">Page 2</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

The jQuery:

jQuery(document).ready(function($){
    $('.nav-menu ul .page_item').each(function() {
        var link = $(this).children('a');
        var str = link.text();
        if (str.toLowerCase().indexOf("(empty)") >= 0) {
            var link_text = str.replace('(empty)','');
            link.attr('href','#').text(link_text);
        }
    });
});