responsive-nav.js icon indicating copy to clipboard operation
responsive-nav.js copied to clipboard

Is it possible to have clickable parents?

Open coffeeneed opened this issue 9 years ago • 5 comments

Hi. I'm looking for a solution like SlickNav where you can't clickable parents (of course in addition to being an actual dropdown). Anyone got an idea on how to achieve this?

Let's say I have a menu like this Products

  • Hardware
  • Software
  • Misc

Here I want "Products" to be clickable to its own page. Would be great to have this flexibility wise and of course for SEO as there's more to be indexed.

Thanks.

coffeeneed avatar Nov 17 '15 14:11 coffeeneed

Hi. I found this thread with a solution, but still can't get it to work. Please see me my comment in that thread:

https://github.com/viljamis/responsive-nav.js/issues/139

coffeeneed avatar Nov 17 '15 14:11 coffeeneed

#146 Here's the html/css solution

Example on site I used it on http://focus.mudbugmedia.com/

Lindolini avatar Feb 04 '16 23:02 Lindolini

Hi Lindolini. Good work, but on Tablet the parent links go straight to the page, instead of opening the submenu. I guess there should be a "1. click" to open and after an "open" class has been added the click to the page (or so) (similar to zurb/foundation). How could this be done? Thanx.

ThomasJanotta avatar Feb 17 '16 08:02 ThomasJanotta

Hm,

I can think of two things...either...

  1. Switch to mobile for tablet (lazy solution)
  2. Use an off-canvas nav solution instead
  3. Figure the current solution out: It's very tricky because double tap is a zoom feature (at least on iOS...not played with Android to confirm on that). I'm not sure what's the status of that behavior state since it's being hotly debated in the web community (keep it or lose it). The issue starts because of the hover state, which is technically a desktop behavior and is non-existent on touch devices. There used to be a solution where you can utilize a Modernizr feature class, like .no-touch, to target the :hover. But! it is a very unreliable method. This article gives you an idea of how messy it is targeting touch (even if you try Modernizr since they declassed the .touch and .no-touch features) http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

NOTE: I think there may be a solution for the tablet size one. I had a fellow front-end buddy figure it out. I'll come back when I can get in touch with him.

Lindolini avatar Feb 17 '16 23:02 Lindolini

Hi, thanx, now as you mention it, FD has also a class not-click on dropdown-items (added, when you configure "is_hover"). It uses "clip" to show and hide them. And he uses modernizr,

if (settings.is_hover && !Modernizr.touch) return;

hope it helps, looking forward to your solution, thanx for your help. Thomas

ThomasJanotta avatar Feb 18 '16 06:02 ThomasJanotta