Is it possible to have clickable parents? #187

Open
coffeeneed opened this Issue Nov 17, 2015 · 5 comments

Projects

None yet

3 participants

@coffeeneed

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

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

#139

@Lindolini

#146 Here's the html/css solution

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

@ThomasJanotta

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.

@Lindolini

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.

@ThomasJanotta

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment