Menu icon Foundation
Accordion to Dropdown

Hi everyone

This is my first post here though I have been using foundation for the past 6 months. 

I'm using a dropdown menu for desktop and accordion for mobile.  I followed the information on this closed post: http://foundation.zurb.com/forum/posts/38080-f6-small-accordion-to-medium-dropdown

The accordion on mobile works great!!
mobile accordion

However i cannot get the dropdown on desktop to work. it seems to stack the li with children

responsive dropdown for desktop

I have my js in place, i have the initialization in place, i even have the css etc in place.  just cannot get the submenu to hide nor the arrow to display. 

here's my code:

<nav id="mainMenu" class="large-8 column">
    <div class="top-bar-right">
        <ul class="menu vertical medium-horizontal" data-responsive-menu="accordion medium-dropdown">
            <li class="first_child menuactive"><a class="menuactive" href="http://charleswilkinson.com/cmsms/vancouver-no-fixed-address.php"><span>Vancouver: No Fixed Address</span></a></li>
            <li class='has-submenu'><a class="parent"><span class="sectionheader">Documentaries</span></a>
            <ul class="submenu mega menu vertical" data-submenu>
                <li class=""><a href="http://charleswilkinson.com/cmsms/documentaries/haida-gwaii.php"><span>Haida Gwaii</span></a></li>
            </ul>
            </li>
            <li class=''><a><span class="sectionheader">Dramatic Features</span></a></li>
            <li class=''><a><span class="sectionheader">TV Movies &amp; Episodic</span></a></li>
            <li class=""><a href="http://charleswilkinson.com/cmsms/shop.php"><span>Shop</span></a></li>
            <li class="last_child"><a href="http://charleswilkinson.com/cmsms/contact.php"><span>Contact</span></a></li>
        </ul>
        <div class="clearb">
        </div>
    </div>
</nav>

And the CSS

.title-bar
{
	background: [[$orange]];
	color: white;
}
.top-bar, .top-bar ul { background: transparent; }
#mainMenu column
{
	padding-left: ;
	padding-right: 0;
}

.menu li
{
	margin: 0;
	display: block;
	border-bottom: 1px solid [[$black]];
}

.menu > li > a
{
	background: [[$dark_grey]];
	color: [[$off_white]];
	display: block;
	font-size: 90%;
	text-transform: uppercase;
}

.menu > li > a.menuactive
{
	display: block;
	background: [[$pumpkin]];
	color: [[$white]];
}

.menu > li > a:hover, .menu > li > a.menuactive:hover
{
	color: [[$off_white]];
	background: [[$dark_orange]];
	text-decoration: none;
}
.dropdown.menu > .is-dropdown-submenu-parent > a::after, .is-accordion-submenu-parent > a::after {
  border-color: [[$pumpkin]] transparent transparent;
}
.dropdown.menu .submenu {
  border: none;
}

.no-js .top-bar { display: none; }

@media only screen and (min-width: 40em) {
	.no-js .top-bar { display: block; }
	.no-js .title-bar { display: none; }
	.menu { float: right; }
	
	.menu li
	{
		margin: 0;
		display: inline-block;
		index: 100;
		position: relative;
		top: 1.75rem;
		right: 0;
	}
	
	.menu > li > a
	{
		text-transform: uppercase;
		font-family: OpenSans-Light;
		font-size: 0.86rem;
		background: transparent;
		padding: 0.5rem;
		font-weight: bold;
	}
	
	.menu li a:link
	{
		color: white;
		text-decoration: none;
	}
	
	.menu li a:visited { color: [[$off_white]]; }
	.menu li a:hover, .menu li a.menuactive:hover { background: [[$dark_grey]]; }
	.menu li a.parent { color: [[$pumpkin]]; }
	
	.menu li a.menuactive, .menu li li.menuactive
	{
		background: black;
		color: [[$yellow]];
		font-weight: bold;
	}
}

A little help would be much appreciated.  thank you.

 

Can

 

 

menu responsive dropdown accordion

Hi everyone

This is my first post here though I have been using foundation for the past 6 months. 

I'm using a dropdown menu for desktop and accordion for mobile.  I followed the information on this closed post: http://foundation.zurb.com/forum/posts/38080-f6-small-accordion-to-medium-dropdown

The accordion on mobile works great!!
mobile accordion

However i cannot get the dropdown on desktop to work. it seems to stack the li with children

responsive dropdown for desktop

I have my js in place, i have the initialization in place, i even have the css etc in place.  just cannot get the submenu to hide nor the arrow to display. 

here's my code:

<nav id="mainMenu" class="large-8 column">
    <div class="top-bar-right">
        <ul class="menu vertical medium-horizontal" data-responsive-menu="accordion medium-dropdown">
            <li class="first_child menuactive"><a class="menuactive" href="http://charleswilkinson.com/cmsms/vancouver-no-fixed-address.php"><span>Vancouver: No Fixed Address</span></a></li>
            <li class='has-submenu'><a class="parent"><span class="sectionheader">Documentaries</span></a>
            <ul class="submenu mega menu vertical" data-submenu>
                <li class=""><a href="http://charleswilkinson.com/cmsms/documentaries/haida-gwaii.php"><span>Haida Gwaii</span></a></li>
            </ul>
            </li>
            <li class=''><a><span class="sectionheader">Dramatic Features</span></a></li>
            <li class=''><a><span class="sectionheader">TV Movies &amp; Episodic</span></a></li>
            <li class=""><a href="http://charleswilkinson.com/cmsms/shop.php"><span>Shop</span></a></li>
            <li class="last_child"><a href="http://charleswilkinson.com/cmsms/contact.php"><span>Contact</span></a></li>
        </ul>
        <div class="clearb">
        </div>
    </div>
</nav>

And the CSS

.title-bar
{
	background: [[$orange]];
	color: white;
}
.top-bar, .top-bar ul { background: transparent; }
#mainMenu column
{
	padding-left: ;
	padding-right: 0;
}

.menu li
{
	margin: 0;
	display: block;
	border-bottom: 1px solid [[$black]];
}

.menu > li > a
{
	background: [[$dark_grey]];
	color: [[$off_white]];
	display: block;
	font-size: 90%;
	text-transform: uppercase;
}

.menu > li > a.menuactive
{
	display: block;
	background: [[$pumpkin]];
	color: [[$white]];
}

.menu > li > a:hover, .menu > li > a.menuactive:hover
{
	color: [[$off_white]];
	background: [[$dark_orange]];
	text-decoration: none;
}
.dropdown.menu > .is-dropdown-submenu-parent > a::after, .is-accordion-submenu-parent > a::after {
  border-color: [[$pumpkin]] transparent transparent;
}
.dropdown.menu .submenu {
  border: none;
}

.no-js .top-bar { display: none; }

@media only screen and (min-width: 40em) {
	.no-js .top-bar { display: block; }
	.no-js .title-bar { display: none; }
	.menu { float: right; }
	
	.menu li
	{
		margin: 0;
		display: inline-block;
		index: 100;
		position: relative;
		top: 1.75rem;
		right: 0;
	}
	
	.menu > li > a
	{
		text-transform: uppercase;
		font-family: OpenSans-Light;
		font-size: 0.86rem;
		background: transparent;
		padding: 0.5rem;
		font-weight: bold;
	}
	
	.menu li a:link
	{
		color: white;
		text-decoration: none;
	}
	
	.menu li a:visited { color: [[$off_white]]; }
	.menu li a:hover, .menu li a.menuactive:hover { background: [[$dark_grey]]; }
	.menu li a.parent { color: [[$pumpkin]]; }
	
	.menu li a.menuactive, .menu li li.menuactive
	{
		background: black;
		color: [[$yellow]];
		font-weight: bold;
	}
}

A little help would be much appreciated.  thank you.

 

Can

 

 

Rafi Benkual over 2 years ago

I'm seeing some issue with the markup here. We wrote a lesson on this that will help:

http://zurb.com/university/lessons/have-it-your-way-with-foundation-s-modular-responsive-navigation

Val Ery over 2 years ago

Hi Rafi!
Now there are problems with the responsive menu.
This tutorial shows you how to create a responsive menu - http://zurb.com/university/lessons/have-it-your-way-with-foundation-s-modular-responsive-navigation. Your code is here - https://codepen.io/rafibomb/pen/wozvRQ.

I added:
1. block with the class "title-bar".
2. button with a hamburger icon
3. Foundation version 6.3.1

(css - https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css

js - https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js)

<div class="row">
  <div class="small-12">
    <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><!-- .title-bar -->
  </div><!--small-12 -->
  <div class="columns">
    <ul id="example-menu" class="menu" data-responsive-menu="drilldown medium-dropdown">
      <li>
        <a href="#">Item 1</a>
        <ul class="vertical menu">
          <li>
            <a href="#">Item 1A</a>
            <ul class="vertical menu">
              <li><a href="#">Item 1A</a></li>
              <li><a href="#">Item 1B</a></li>
              <li><a href="#">Item 1C</a></li>
              <li><a href="#">Item 1D</a></li>
              <li><a href="#">Item 1E</a></li>
            </ul>
          </li>
          <li><a href="#">Item 1B</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Item 2</a>
        <ul class="vertical menu">
          <li><a href="#">Item 2A</a></li>
          <li><a href="#">Item 2B</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Item 3</a>
        <ul class="vertical menu">
          <li><a href="#">Item 3A</a></li>
          <li><a href="#">Item 3B</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>


Result:
After changing the size of the screen and opening any menu item, the drop-down menu stops working.

Here there is a question on this issue - forum

Karima Premji over 2 years ago

I reverted back to F6.2.0 and finally got the menu working as drilldown for small and medium, dropdown for large.

I have a minor question regarding the drilldown on iphone 6S.  Panels 2+ are given an inline height.  but when you click back, that height remains and leaves a lot space before any content is seen.  how can i reduce this?  in the js?