arielsalminen / TinyNav.js

Responsive navigation plugin that weighs just 443 bytes
http://tinynav.viljamis.com/
635 stars 207 forks source link

Option to create no-link class #75

Open selwynorren opened 9 years ago

selwynorren commented 9 years ago

Hi, Wow what a great script thanks so much. I am so sad I only discovered it today.

Using one of the pull requests I have manage to find a work around, but I don’t know enough of jQuery to completely implement what I need here.

In the menu sample I have change the parent link of Bing as follows:

<nav class="element">
    <ul id="nav">
        <li><a href="http://google.com">Google</a></li>
        <li class="selected"><a href="demo.html">Demo page</a></li>
        <li><a class="no-link">Bing</a>
            <ul>
                <li><a href="http://google.com">Google</a></li>
                <li><a href="demo.html">Demo page</a></li>
                <li><a href="http://bing.com">Bing</a></li>
                <li><a href="http://yahoo.com">Yahoo</a></li>
            </ul>
        </li>
        <li><a href="http://yahoo.com">Yahoo</a></li>
    </ul>
</nav>

On mobile, this still creates the link but redirects it to a non existing page (404 error) can this rather be changed that if it finds a class linking to something like .no-link it replaces that item as a optgroup rather?

Pull request no (https://github.com/viljamis/TinyNav.js/pull/46) is about as close as I can get, but I think a stylable optgroup would be better.

shacow commented 8 years ago
$('a.no-link').click(function (e) {
 e.preventDefault();
});

might be useful for you