Make Top Level menu item not a link

Leaving the URL blank or using a hash # does not work, it links to the main page.  It would be nice at times to have the top level parent for the dropdown not linking to a page at all, simply not a link, not clickable.  I am guessing this is going to be a core hack so any help?

Has anyone played with this?

Does anyone see where you can add a style to the menu builder edit item?

have you tried

javascript:void(0);

in links place

No, that just adds that as the link but thanks for trying to help.

I don't guess there is a way to do this through the builders.  I posted thinking that maybe one can insert certain characters and the navigation parser would handle it the way that you put !#list-name to include a predefined list in the join form items.

Probably need a core change to handle this.

I guess we just need to set the top menu item to the first item in the drop down menu and call it a good job.

Why don't you accept the nice solution already provided?

pointer-events: none;

Where does that solution go?  I am using the menu builder that creates the menu on the fly so where do I tell Dolphin that I want to apply that css to a particular item in the top level menu?  There is nowhere in the menu builder for me to apply that css to a particular item.

By the way:

“The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.” — Mozilla MDN

Into your css file. Like this:

.top .top_link[href$="your_link/"]

Applies to that ("ads/"):

<a href="http://demo.boonex.com/ads/" class="top_link">

By the way, you might want to use this handy site instead of mozilla: http://caniuse.com/#search=pointer-events

I admit that I don't know a lot of things.  I have never seen that before in a css file and I added it to the anchor.css file without any luck.  Besides, if it did work it would mean adding that to the css for each one.

Besides, as I think about it now the dropdown hover thing may be working off the top level being an anchor.  Not that important; would be nice though.

Thought you would now html/css. Post what you added.

.top .top_link[href$="your_link/"]{
    pointer-events: none;
}

this is an interesting concept. I too am in need of not making a nav menu item clickable. So, to make sure I understand this: using your (Prukner) suggestion, this would be creating an element for the link in question. Then, applying HL's suggestion to that element should make it non-clickable.

So, since I am using a custom template, on my custom.css page, I should put:

.top .top_link[href$="https://caredesign.net/resources.php/"]

{

pointer-events: none;

}

In theory, whenever there is a top link for resources.php, it should use the listed pointer event of none - thus being unclickable?

That would be enough.

.top .top_link[href$="resources.php/"]
{
pointer-events: none;
}

Works like this except in ie.

oooh - you don't know how much I was hoping that would work. RIght now, I have a redirect for any pages that I do not want clickable because they are not done. Basically, I have a page called redirect.php in my root directory. On that page, I have:

<?php
header('Location: ' . $_SERVER['HTTP_REFERER']);
?>

In the menu, I have redirect.php as the url. This way, it actually returns the user to the same page they came from when clicking the menu link.

 I have a redirect for any pages that I do not want clickable 

If it's not the top menu item you would need a slightly different css selector.

pic atttached

.top_link[href$="resources.php"]
{
pointer-events: none;
}

the link in red must be the same link in the url field for the navigation menu block.

A little more on attribute selectors for those that are interested.

Full link.
.top_link[href="http://www.mysite.com/page.php"]

Use a $ to specify that the attribute ends with something.
.top_link[href$="page.php"]

Use a * to match anywhere within the attribute. Like in the middle.
.top_link[href*="com/page"]

Use a ^ to specify the attribute begins with.
.top_link[href^="http://www"]

There is more. See this. http://css-tricks.com/attribute-selectors/

Note: Supported in most browsers. Not supported in IE6 and under.

I guess it is a solution but not a very elegant one since it's tied to the template.  I think I will look at doing a mod on this at some point.

Ok. Here is a simple code fix.

Edit templates/base/scripts/BxBaseMenu.php

Look for this at about line 304

    function genTopItem($sText, $sLink, $sTarget, $sOnclick, $bActive, $iItemID, $isBold = false, $sPicture = '')
    {
        $sActiveStyle = ($bActive) ? ' id="tm_active"' : '';

        if (!$bActive) {
            $sOnclick = $sOnclick ? ( ' onclick="' . $sOnclick . '"' ) : '';
            $sTarget  = $sTarget  ? ( ' target="'  . $sTarget  . '"' ) : '';
        }


Add this directly under it.

        if($sLink == '') $sTarget .= ' style="pointer-events: none;"';


After that is done you can then remove the link(leave blank) for any top level menu item to make it un-clickable.

A similar method can be used for the sub menu items, however will require more than just a simple one line addition.

One more note.

You may prefer to come up with another method. Which i can do if needed.

Reason i say is because this method using pointer-events: none; has limited browser support. Example. Right now the only version of IE that supports it is IE11.

 How could you not get this by now with your update problems:

The best solutions for your hacks are template based ones. You do the work once and have no problems updating dolphin afterwards.

 Why would you do only that? Add preventDefault too.

onclick="event.preventDefault();"

Because i did not think of that.

Ok. Instead of adding this line.

        if($sLink == '') $sTarget .= ' style="pointer-events: none;"';

Use this instead.

        if($sLink == '') $sOnclick = 'event.preventDefault();';

You could do both, but with event.preventDefault(); the other method is not needed.

No, you want both of them! Or you will still have the pointer.

if($sLink == ''){

$sTarget = ' style="pointer-events: none;"';

$sOnclick = ' onclick="event.preventDefault();"';

}

And do not add this to the base template. Do it in your custom template! By overriding this function there.