Menu icon Foundation
Allow parent link to be clickable with dropwdown

Hi

I am using a megamenu (see code).

I want to be able to click the parent link, in this case "Artists", to jump to that page as well as display the dropdown menu. Can't seem to get it to show, so thinking it is something to do the with JS base of Foundation.

The image shows that when I hover over it, the dropdown appears and the link displays in the bottom left, but it doesn't click through.

Any ideas please?

Cheers

<li class="has-dropdown megamenu not-click" id="DDARTNav"><a href="<? echo BASE_DIR; ?>lsa-artists.php" class="click">Artists</a><!-- artists start -->
    <ul class="dropdown dropdown-wrapper">
		<li id="DDART">
			<div class="row ddwrapper">
				<div class="small-12 ddw">
					<div class="small-12 medium-3 large-3 columns medium-text-right txtbox" data-equalizer-watch>
						<h5>Featured Artists</h5>
						<p>Scott Bridgwood<br><span class="BldI">Dusk</span></p>
					</div>
					<div class="small-12 medium-3 large-3 columns medium-text-left" data-equalizer-watch>
					<img src="<? echo BASE_DIR; ?>images/exhibitions/scott-bridgwood-artist-example-250.jpg" width="188" height="250" alt=""/>
					</div>
					<div class="small-12 medium-3 large-3 columns medium-text-right txtbox" data-equalizer-watch>
						<h5>Featured Artists</h5>
						<p>Catherine Headley<br><span class="BldI">Dusk</span></p>
					</div>
					<div class="small-12 medium-3 large-3 columns medium-text-left" data-equalizer-watch>
						<img src="<? echo BASE_DIR; ?>images/exhibitions/catherine-headley-dusk_250-250.jpg" width="250" height="250" alt=""/>
					</div>
				</div>
			</div>
		</li>
	</ul>
</li><!-- artists end -->

Wds grabs 2014 10 21 at 00.09.26

has-dropdownmegamenunot-clicknavigationparent link

Hi

I am using a megamenu (see code).

I want to be able to click the parent link, in this case "Artists", to jump to that page as well as display the dropdown menu. Can't seem to get it to show, so thinking it is something to do the with JS base of Foundation.

The image shows that when I hover over it, the dropdown appears and the link displays in the bottom left, but it doesn't click through.

Any ideas please?

Cheers

<li class="has-dropdown megamenu not-click" id="DDARTNav"><a href="<? echo BASE_DIR; ?>lsa-artists.php" class="click">Artists</a><!-- artists start -->
    <ul class="dropdown dropdown-wrapper">
		<li id="DDART">
			<div class="row ddwrapper">
				<div class="small-12 ddw">
					<div class="small-12 medium-3 large-3 columns medium-text-right txtbox" data-equalizer-watch>
						<h5>Featured Artists</h5>
						<p>Scott Bridgwood<br><span class="BldI">Dusk</span></p>
					</div>
					<div class="small-12 medium-3 large-3 columns medium-text-left" data-equalizer-watch>
					<img src="<? echo BASE_DIR; ?>images/exhibitions/scott-bridgwood-artist-example-250.jpg" width="188" height="250" alt=""/>
					</div>
					<div class="small-12 medium-3 large-3 columns medium-text-right txtbox" data-equalizer-watch>
						<h5>Featured Artists</h5>
						<p>Catherine Headley<br><span class="BldI">Dusk</span></p>
					</div>
					<div class="small-12 medium-3 large-3 columns medium-text-left" data-equalizer-watch>
						<img src="<? echo BASE_DIR; ?>images/exhibitions/catherine-headley-dusk_250-250.jpg" width="250" height="250" alt=""/>
					</div>
				</div>
			</div>
		</li>
	</ul>
</li><!-- artists end -->

Wds grabs 2014 10 21 at 00.09.26
Marc McGee about 5 years ago

You want the button to serve a dual function? Click to go to page, as well as click to show the drop menu? Seems like that would cause a conflict.

Or are you referring to how it displays on mobile?

With mobile there is a specific setting that includes the parent item to be included in the list of drop items for the TopBar.

data-options="mobile_show_parent_link: true"

http://foundation.zurb.com/docs/components/topbar.html

See "Using the Javascript" > data-options

Glynn Williams about 5 years ago

Hi Marc

I have used other jQuery dropdown scripts on other websites. As well as displaying the dropdown, they also allow the link to be clickable. All other dropdown will have links within the dropdown. This section, artists, simply goes to the artists page. BUT the client wants to display 2 random artists in the dropdown. This will help artists who are towards the end of the alphabet get shown to the user.

I've seen examples of the megamenu, and the link works on all of them. BUT once it is on the site with all of Foundations JS, the link stops working.

Also the dropdown is a "not-click" class, which means it is activated by hovering instead of clicking.

Hmmmmmmm

Joe Rutland over 4 years ago

Hey Glyyn,

I'm looking to solve a similar problem (http://foundation.zurb.com/forum/posts/24793-make-parent-links-clickable---topbar)

Did you ever find a solution?

Joe