Question re: making parent menu links clickable

[jassibacha]

I'm trying to make it so that my primary/parent menu links are clickable, I noticed what I believe to be something similar in the closed issues: #8

Essentially, I have 2 links on my primary menu that have dropdowns, but I also need the parent link itself to be clickable.. just trying to figure out the easiest way to do this. Thanks.

[CWSpear]

Sorry, been out of town.

I'm not sure what he was saying, either. Did you add data-toggle="dropdown" to the same play you added data-hover="dropdown"?

I guess let's back up a moment: What do you mean by "clickable?" I can confirm for sure that on my demo page (http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/), if hover is somehow disabled, I can still click to activate the nav items.

So to me, it's maybe that you're using incorrect markup or something. That, or I don't understand the problem.

[jassibacha]

Apologies I don't think I explained it well.

I'm trying to make it so the parent menu items can be actual links. If you hover over them the dropdown appears, but if you click them they take you to the respective page. Does that make more sense?

[CWSpear]

So this comes with some side-effects, so I don't think I'm going to integrate it into the plugin, but there is some Bootstrap JS that preventsDefault() for the click event on those elements.

You can do undo this change with: $('.class').off('click'); where "class" is a class that the elements you want clickable have.

This makes it so if you're in mobile tho, you can't drill down the menus (which is maybe okay for you). The main reason I wouldn't add this to the plugin is if someone visits on mobile (and especially if someone's not using responsive design), they couldn't activate the dropdowns.

Basically, this isn't an issue that my plugin creates (it's a plain ol' Bootstrap thing), and it introduces new problems if I try and fix it.

[jassibacha]

I'll give this a try and see how it works. Just an extra note, I'm using a script to modify the menu so it turns into a select dropdown for tablet + mobile resolutions so that's why I'm trying to make the dropdown behave more naturally for desktop. Thanks though!

[heroweb-staci]

Adding "disabled" class to your top menu makes it clickable.

<a class="dropdown-toggle disabled " data-hover="dropdown" data-toggle="dropdown" href="mypage.html">Top Level Menu<b class="caret"></b></a>

On mobile devices, the 1st click opens the menu. The 2nd click would normally close the menu, but with the "disabled" class added, the 2nd click takes you to the top-level page.

Cameron - it would be great if the "disabled" class could be added your hover script if the site is not on a mobile device - for example:

if (document.documentElement.clientWidth >= 900) {
'[data-hover="dropdown"]').addClass('disabled');
}

The problem is that on desktops with the hover script, the top link really should be clickable. Without the hover script it makes sense that the 2nd click toggles the menu - i.e. the default behavior of bootstrap.

[CWSpear]

Where are you getting 900 from?

Also, that's relatively bad UX. That's a major part of why I think Bootstrap decided not to have top level nav-items clickable. I don't think it's intuitive that you have to tap twice to go to the top level link.

This sounds like more of a design/UI/UX issue than a technical one.

[heroweb-staci]

Just pulled that from an example I found elsewhere - it's supposed to be like a media query but for javascript instead of CSS. Not my strong suit, so I really don't know if there is a good way to detect whether you are using a device that doesn't support a hover state with javascript.

Here's my understanding - Bootstrap is designed for Mobile First. On Mobile, there is no hover state, so you click to show the dropdown and click again to hide the dropdown - whether you are on a mobile device or a desktop device. Your nifty script adds the ability to hover back to desktop sites - it's very helpful and exactly the interface I want for desktop sites. But once you are hovering on a desktop site, it makes sense that the top-level item is clickable, which is why I think you keep getting this request. Here's a site with the top-level menu that has the disabled class added to the top-level menu:

http://www.balibaytradingcompany.com/

If you click the top-level menu instead of collapsing the menu, it takes you to the top-level page - which is exactly what I want. What I don't like about it is that on mobile, I would still want it to just collapse the menu and it doesn't . On mobile devices it also takes you to the top-level page.

Anyway, I can probably figure out how to modify your script to do this, but this is probably close enough for me for now anyway. Thanks for the script and for hearing me out.

[BurakDerinel]

@heroweb-staci

balibaytradingcompany.com is a very good solution and It is also exactly what I want to do too. Thanks for the good example.

I tried the same in my code but it didn't function on iPad; the drop down is not opened when I click the parent link sends me to the top levels linked page. But it works on desktop. Where and how should the Javascripts if statement come exactly? I'll be very thankful if you can give it more detailed...

[BurakDerinel]

@heroweb-staci @CWSpear

I'd really appreciate a little help here :)

Here is my code:

    <li class="dropdown yamm-fw"><a class="dropdown-toggle js-activated disabled" data-toggle="dropdown" data-hover="dropdown" data-delay="100" href="defacto-urun-detay.html">YENİ</a>
      <ul class="dropdown-menu">
        <li class="grid-demo">
          <div class="row">
            <div class="col-sm-3">
              <ul class="list-group">
                <li class="list-group-item"><b>Kadın</b></li>
                <li class="list-group-item">Yeni Yıl Koleksiyonu</li>
                <li class="list-group-item">Yeni Sezon</li>
                <li class="list-group-item">British Hunting</li>
                <li class="list-group-item">Siyahın Asaleti</li>
                <li class="list-group-item">Ekose Modası</li>
                <li class="list-group-item">Deri Ceket Modası</li>
                <li class="list-group-item">En çok satanlar</li>
              </ul>
            </div>

            <div class="col-sm-3">
              <ul class="list-group">
                <li class="list-group-item"><b>Erkek</b></li>
                <li class="list-group-item">Yeni Yıl Koleksiyonu</li>
                <li class="list-group-item">Yeni Sezon</li>
                <li class="list-group-item">Repaired Touch</li>
                <li class="list-group-item">Spor Giyim</li>
                <li class="list-group-item">Lacivert tonları</li>
                <li class="list-group-item">Kareli gömlek modası</li>
                <li class="list-group-item">Vintage soul</li>
                <li class="list-group-item">En çok satanlar</li>
              </ul>
            </div>

            <div class="col-sm-6">
              <img src="img/mm-img1.jpg" class="img-responsive">
            </div>
          </div>
        </li>
      </ul>
    </li> -->

[BurakDerinel]

OK, solution found… This plugin for the clickable hover menu is actually obsolete… The unbelievably simple css solution is described here: http://www.barrykooij.com/bootstrap-submenu-open-on-mouse-over/

[MarioBaron]

"dropdown-toggle disabled" works fine for 2 level menus although I do not think behaviour should be applied via media query.

But 3 level menu's where the menu item actually has valid a href work up to 2 level 1 click opens submenu 2nd click takes user to the item a href. Unfortunately on second level 1st click will go to a href and 3 level children items will not be shown unless delay attribute is used.

On desktop all 3 levels work great where children are present menu hovers and all menu items including parents link to a valid page.

Funny part is that on Bootsrap 2 all I had to do is replace data-toggle with data-hover and and I had all 3 menu levels working fine on mobile.

I know Cameron already said he won't add support for multi level menu's because Bootstrap 3 has dropped them. Its a valid point and I do not want to sound like I am ungrateful or trolling but, the main reason why so many people are using this plugin IS because Bootstrap developers expect a vast majority of web users to change their behaviour where they are used to menu items that lead to a page and open submenu items on hover instead of actually supporting it.

Cameron thank you for the plugin, in my eyes you have already done more than any of the Bootstrap developers are willing to do in terms of creating menu's that people are simply used to and I can understand if you don't want to "officially" support multilevel menu's but please consider providing an "unofficial hack" for people who want that feature.
We all come here because we love Bootstrap but hate Bootstrap original menu behaviour :)

Thank You

[CWSpear]

@MarioBaron You certainly bring up some good points. I can't make any promises, but it may be something worth looking into. I've been thinking I need to clean up some of the code lately as well, and might be a good time to just take care of a few of these other things.

I'm super busy lately, and believe it or not: I've never used this plugin in production. When you're not using something yourself, it can be harder to find the motivation to add new features (I try to fix bugs at least).

I'm actually rather anti-dropdown menu myself. The version first version of this plugin was written almost as a dare. I've used dropdowns a very few times in the past 2 years that I can think of, and it was against my will. =)

I firmly believe that 99 out of 10 cases are better served by a different approach than multi-level dropdowns. If I have to use dropdowns, it's one level at most. I feel that there are usually better alternatives to multi-level dropdowns, UX, UI and development-wise. Dropdowns are hard to maintain, tough to design correctly, and usually don't offer the best UX. That's why Bootstrap dropped support. They felt that it was taking a lot of resources to maintain something that was buggy and that could be better done in a different way.

[MarioBaron]

@CWSpear Thanks for considering my suggestion. I am no great fan of dropdowns myself but, I work on a lot of online directories and stores that have a large number of categories and subcategories and that naturally calls for 2-3 and more level menu's. Sure there are other ways to help the user navigate through that many categories but none of them are perfect just as multilevel drop down menu's aren't either.
As for Bootstrap developers decision to drop support: Well, it sends a mixed message really because my understanding is that Bootstrap is a framework developed to help web designers/developers start from code that essentially repeats itself on every new project and thus deliver them faster to both their and clients satisfaction. The problem is that 9 out of 10 clients in bigger projects focus on main menu and that inevitably leads to drop downs. As imperfect as they are they are still the fastest way to navigate around sites with nested categories, and we do live in an age where speed matters more than ever. I am surprised that Bootstrap developers didn't include your plugin at least as an option because those same 9 out of 10 clients want hover too. So its not really about how designers or developers feel about dropdowns and its more about client expectations.
I've been using Bootstrap for over 2 years now and I have to admit that 99.9% of projects I worked on included your plugin so i am rather surprised you haven't used it that much yourself.
Meanwhile: I've been trying to solve this by myself (no js genius here) and have found that whilst "dropdown-toggle disabled" kinda works up to 2 levels, commenting out if('ontouchstart' in document) return; works just as well (tested with iPhone and Android) despite your comment "(plugin causes some issues on mobile)" although in that case data-toggle must be commented out or replaced by data-hover if we want to make parent menu's link to valid pages on click.

I am pretty sure that with Bootstrap 2 I did have to patch one of core .js files if I wanted to make things work as already described on more than 2 level menu's.

In any case as far as I am concerned your plugin is part of Bootstrap for me even thou I have to download it separately. If it could work with multilevel menu's I would totally not mind if it was commercial.

[CWSpear]

I think the difference is people hire me because of my expertise, and not to just do "what they want." I don't build sites for my clients. I build sites for my client's users. I don't accept jobs/fire clients who want me to build sites for them (I mean, unless it's a personal blog or something).

[lorenzosinisi]

try to use that https://github.com/lorenzosinisi/bootstrap-hover-dropdown

I've just edited a little bit the plugin so you have the dropdown and every link is than clickable

[eye-too]

Why not use the caret / plus icon / arrow icon for toggle and let the link be a link to another URL? Here is my edit of the MetisMenu to prove the concept of what I am looking for. http://codepen.io/eye-wonder/pen/XNxOqw
I rather like your navigation because it uses the standard bootstrap navigation markup, and it is working on both desktop and mobile. I don't really like hover menus. (I also like the idea of collapsing other parts of the menu tree when opening a submenu on mobile.)

[DavidInfoAndComp]

I found a solution. Force the action of tag usign the href property with javascript

$( document ).ready(function() {
    $(".dropdown-toggle").click(function(){
       var url = $(this).attr("href"); 
       $(location).attr('href', url);
    });
}); 

[sean-mystyle]

A client of mine in Shopify had the same issue with a menu that had Mega Menu for 2 out of 5 of the links. I also got it working to make parent menu links working, its commented out within the code below.
Ultimately I wanted links with no child menus to click through to the pages, but menus links with child menus to click and open the menu without clicking through. Thanks to @DavidInfoAndComp for the parent menu option.

This was my final code:

<script>
    // fixing top level link clicking while mega menus are enabled on some but not all nav items:
    $(document).ready(function() {
        $('.nav ul li > a').each(function() {
            var isMegaParent = $(this).hasClass('mega-menu-parent');
            if (!isMegaParent) {
                $(this).attr('data-dropdown-rel', '');
                $(this).off('click'); // remove mega menu/ dropdown handler for links with no mega menu children
            } else {
                // if you want the parent of mega menus to also click through, enable this:
                /*$(this).click(function(){
       			var url = $(this).attr("href"); 
       			$(location).attr('href', url);
    		   });*/
            }
        });
    }); 
</script>