Menu icon Foundation
Dropdown menu, open on click

I would like my dropdown menu to open on click on a non-touch, medium-up screen, rather than on hover, so that the menu remains open when the cursor is moved away and also if the screen is scrolled. It would then be closed on selection or on second click. 

I am a new user of Foundation 6. I am using the CSS version.

Can anyone tell me how to do this, please?

Massive thanks to anyone who can.

 

dropdownmenuon-click

I would like my dropdown menu to open on click on a non-touch, medium-up screen, rather than on hover, so that the menu remains open when the cursor is moved away and also if the screen is scrolled. It would then be closed on selection or on second click. 

I am a new user of Foundation 6. I am using the CSS version.

Can anyone tell me how to do this, please?

Massive thanks to anyone who can.

 

cristian ambaek over 2 years ago

Not sure if this is what you are looking for, but maybe it can be an inspiration to you than.

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
			<button class="menu-icon" type="button" data-toggle="example-menu"></button>
			<div class="title-bar-title">Menu</div>
		</div>
	
		<nav id="example-menu">
			<ul id="site-menu" class="medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
				<li class="active">
					<a href="#">title</a>
				</li>
				<li>
					<a href="#">item 1</a>
				</li>
				<li>
					<a href="#">item 2</a>
				</li>
				<li>
					<a href="#">item 3</a>
				</li>
				<li class="has-submenu">
					<a href="#">item 4</a>
					<ul class="submenu menu">
						<li>
							<a href="#">item 4.1</a>
						</li>
						<li>
							<a href="#">item 4.2</a>
						</li>
					</ul>
				</li>
			</ul>
		</nav>