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?

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.