Responsive navigation doesn't make responsive links !

[udf2457]

Zurb 6.4.2

Lets say I've got a menu:

<ul class="dropdown vertical medium-horizontal menu"  data-responsive-menu="drilldown medium-dropdown"  data-auto-height  data-animate-height >
	<li class="menu-text">
	<img class=“foobar-logo foobar-hidesmall"  src="/templates/img/foobar.jpg” >
	</li>
	<li><a href="/index.php">Home</a>
	<ul class="menu vertical" ><li>
		<a href="/index.php">Alice</a>
	<ul class="menu vertical" >
		<li><a href="/index.php/home/bob/test">Bob</a></li>
	</ul>
	</li></ul>
</li>
</ul>

In dropdown style, this works great, all three links (Home, Alice & Bob) are clickable.

The problem then comes with responsive.....

Zurb automagically switches to drilldown, ok, that's cool and the magic works perfectly.
but, and its a big BUT ....
Suddenly the user is unable to access Home or Alice via the menu. Only leaf node Bob.

Not cool. ;-(

We need more intelligence in the responsiveness.

[mattbag]

Seems to be working here
https://codepen.io/mattbag/pen/GMKBQQ?editors=1000

[udf2457]

@mattbag

Huh ?!? That codepen demonstrates exactly the problem !

Please re-read my post, or allow me to spell it out another way:

1. The above code works perfectly on >= medium.
2. When you shrink the screen, the menu changes to drill down
3. The links for "home" and "alice" do not work.

Note that I have highlighted the word links.

I am NOT saying that the drilldown does not work. Sure, if you hit "Home" you get the next menu down. That's not the point I made, at all.

My problem is the responsiveness breaks the menu itself.

The responsiveness does not provide an alternate means to access the underlying content after the menu transitions from dropdown to drilldown.

I can't think of an idea of how you might fix it right now, but you guys are perhaps more intelligent than I am !! ;-) But it needs to be fixed. Because half-hearted responsiveness is kinda pointless, I might as well just go back to the old ways and code up two independent menus if the Zurb responsiveness is going to prevent my users accessing half my content.

P.S. I apologise for the slight tone in my post. I'm just a tad frustrated that I had to come here and write a post to point that out when I did my utmost to make it perfectly clear in my original post !

[mattbag]

I get it now!
Well what I would do (as in I always do it in every project) is doing 2 different and separated menus for desktop and mobile.
This way you could manage and structure the mobile drilldown as you want.

I have never used the drilldown or the switch, but I'm sure there must be a combination... but I don't have time to tinker atm ;)

[udf2457]

Yeah, I think I might follow your lead and go down the 2 different menus route. Should be easy enough to do with visibility classes I guess.

A pity. Because I quite liked the magic of the responsive menus. But I guess they are still a bit immature for real production.

[udf2457]

P.S. You might want to consider updating the docs to reflect this as a "watch out", since other people might not necessarily notice what I spotted.

[kball]

Correct me if I'm wrong, but I believe this is roughly the same as #10611 which is what this PR was intended to address: #10616

This will be included in 6.4.4, should be packaged up in the next couple weeks.

[udf2457]

@kball That sounds along the right lines yes, its a discussion about accordions rather than drilldowns, but I suspect the solution probably applies to both.

Bring on 6.4.4 I guess ! ;)

[kball]

For drilldowns I think parent link should already work - can you try adding data-parent-link="true" to your responsive menu?

[udf2457]

@kball

I think bad netiquette all-caps are permitted here.....

AWESOME !

;)

[kball]

Great, going to close this issue then. :)