Menu icon Foundation
Foundation 6 DropddownMenu: data-is-click=false prevents me from follow links

<!-- MAIN NAVIGATION PARTIAL -->
    <div class="navigation clearfix">
		<a href="#"><img src="img/logo.svg" alt="" title="" class="logoheader" /></a>
		<nav class="main-nav show-for-large">
			<ul class="dropdown menu" data-dropdown-menu>
				<li data-is-click="true">
					<a href="#" class="">Om oss</a>
					<ul class="menu">
						<li class="indicator"></li>
						<li><a href="#">Kvalitet &amp; miljö</a></li>
						<li><a href="#">Historia</a></li>
						<li><a href="#">Villkor och retur</a></li>
						<li><a href="#">Bankdetaljer</a></li>
						<li><a href="#">Ledningsgrupp</a></li>
					</ul>
				</li>
				<li><a href="#" class="">Produkter</a></li>
				<li><a href="#" class="">Användning</a></li>
				<li><a href="#" class="">Varumärken</a></li>
				<li><a href="#" class="">Datablad</a></li>
				<li><a href="#" class="">Utbildning</a></li>
			</ul>
		</nav>
	</div>

I'm working on a site and everything worked fine until we realized that the links in the menu should be clicked twice to follow the links. We worked on the issue and discovered that the code that prevented to follow the links was "data-is-click=false".
Our first solution was add the data-is-click=true code. Didn't work. After a click, the script writes data-is-click="false" again.
We were messing with the Foundation's JS but couldn't find a solution.

I'm working on a site and everything worked fine until we realized that the links in the menu should be clicked twice to follow the links. We worked on the issue and discovered that the code that prevented to follow the links was "data-is-click=false".
Our first solution was add the data-is-click=true code. Didn't work. After a click, the script writes data-is-click="false" again.
We were messing with the Foundation's JS but couldn't find a solution.

dropdownmenumenufoundation6data-is-click

<!-- MAIN NAVIGATION PARTIAL -->
    <div class="navigation clearfix">
		<a href="#"><img src="img/logo.svg" alt="" title="" class="logoheader" /></a>
		<nav class="main-nav show-for-large">
			<ul class="dropdown menu" data-dropdown-menu>
				<li data-is-click="true">
					<a href="#" class="">Om oss</a>
					<ul class="menu">
						<li class="indicator"></li>
						<li><a href="#">Kvalitet &amp; miljö</a></li>
						<li><a href="#">Historia</a></li>
						<li><a href="#">Villkor och retur</a></li>
						<li><a href="#">Bankdetaljer</a></li>
						<li><a href="#">Ledningsgrupp</a></li>
					</ul>
				</li>
				<li><a href="#" class="">Produkter</a></li>
				<li><a href="#" class="">Användning</a></li>
				<li><a href="#" class="">Varumärken</a></li>
				<li><a href="#" class="">Datablad</a></li>
				<li><a href="#" class="">Utbildning</a></li>
			</ul>
		</nav>
	</div>

I'm working on a site and everything worked fine until we realized that the links in the menu should be clicked twice to follow the links. We worked on the issue and discovered that the code that prevented to follow the links was "data-is-click=false".
Our first solution was add the data-is-click=true code. Didn't work. After a click, the script writes data-is-click="false" again.
We were messing with the Foundation's JS but couldn't find a solution.

I'm working on a site and everything worked fine until we realized that the links in the menu should be clicked twice to follow the links. We worked on the issue and discovered that the code that prevented to follow the links was "data-is-click=false".
Our first solution was add the data-is-click=true code. Didn't work. After a click, the script writes data-is-click="false" again.
We were messing with the Foundation's JS but couldn't find a solution.

Ercan Murat KISACA almost 4 years ago

I think it is a default Foundation behaviour and I think it is necessary. Because;

When on mobile, you know, user cannot hover something. It should be by tapping. Because of this, everything on menu actions happen in 2 steps.
1-Tap to menu item 2-Tap to Link

I think you should leave it as is. I think it is best for UX.

Brian Tan almost 4 years ago

Which foundation version are you on? I tested your code on sites 6.1.1, no 2-tap/2-click issue on desktop , tablet or phone.

It may have something to do with forceFollow option. It is default to true on 6.1.1

http://foundation.zurb.com/sites/docs/dropdown-menu.html#js-options

Fernando Munoz almost 4 years ago

Yes, i turned that to false, but:

  • didn't work
  • worked the first time but then started to change into false again
  • don't know which version I had anymore. Originally I had the 6.0.3 or something like that but I updated and the NPM screwed the installation by doing recursive directories beyond 256 chars long. Tried bower but that had not given what I needed. After that mix up I stayed in 6.0.3 and updated a little the JS, but, really, for final projects, out of the box, foundation 6 didn't worked as intended and the bugs were really annoying.

BTW, is not good for UX if the first thing your client does is complain about double clicking to get to the links. Could be useful in mobile but I'm not using the functionality for mobile from the basic menu.

Ercan Murat KISACA almost 4 years ago

http://foundation.zurb.com/sites/docs/dropdown-menu.html

There is a forceFollow option in Plugin options. Can you try to set it to false?