-
Notifications
You must be signed in to change notification settings - Fork 504
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Question re: making parent menu links clickable #16
Comments
Sorry, been out of town. I'm not sure what he was saying, either. Did you add 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. |
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? |
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 You can do undo this change with: 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. |
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! |
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) { 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. |
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. |
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. |
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... |
I'd really appreciate a little help here :) Here is my code:
|
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/ |
"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. Thank You |
@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. |
@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. 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. |
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). |
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 |
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 found a solution. Force the action of tag usign the href property with javascript
|
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. 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> |
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.
The text was updated successfully, but these errors were encountered: