Orchard Navigation - how to make menu link not clickable

Question

I have following menu navigation:

home
product
     product 1
     product 2
news
     press releases
about us

Every menu item above links to a Content, except "product".I need to make it so when the user click "product" would not go anywhere.

I tried to use "Custom Link", and enters "#" or "javascript:void(0)" in the url, however that does not work since Orchard always prefix the url with "/".

Also, I tried to use "Html Menu Item" and enter "product" in the html body, but always rendered as

<li><span class="raw"><p>product</p></span><ul>...</ul></li>

I want either following:

<li><a href="#">product</a><ul>....</ul></li>

or

<li>product<ul>....</ul></li>

Is there an easy way to do this?

Camenae

Answer 1

In the Menu.cshtml file under the Core->Shapes->Views directory in the Orchard.Web project, you could do this:

$(document).ready(function () {
    $("#Nav a").click(function(e) {
        e.preventDefault();
    });
});

The above disables clicking on all of your menu links, so if you want to prevent clicking on the second level menu items:

$('#Nav li ul li a').click(function(e){
     e.preventDefault();
});

That Menu.cshtml file is the view for your navigation menu, so you can define it's behavior as you wish there. You can look at this answer of mine as well.

Nisan

Answer 2

You may do as Mohammad says, but create an alternate Menu.cshtml in your Theme. It is bad practise to modify Orchards core code.

Wrongly

You're correct, creating an alternate is the way to go but I wanted to spare having to explain shape tracing and alternates. Nevertheless they are indispensable skills for any Orchard developer and need to be learnt at some point. – Nisan

I am familiar with url alternates and shape tracing - but wants to avoid doing it, because the project is already publish to PROD (Azure), hence accepted the jquery work around above. At least I can just copy .js file rather than doing another deployment. Up vote anyway. – Camenae