Menu icon Foundation
Expanded menu on medium-up

Hello!

I'm trying to make a drilldown menu for small screens and expanded dropdown for medium-up.

If I use the .expanded class on the menu, it ends up breaking the drill down navigation on small screens.

How could i achive the expected result? Is there a class like .medium-expanded or something like that? Would be great.

Demo code below!

Thanks in advance.

PS: The code editor broke my nested ul's. Correct code here: http://pastebin.com/RuYtaD08

<ul class="vertical menu large-horizontal expanded" data-responsive-menu="drilldown large-dropdown">
    <li><a href="">Home</a></li>
	<li class="has-submenu">
		<a href="">Grupo</a>
		<ul class="submenu menu vertical" data-submenu>
			<li><a href="">História</a></li>
			<li><a href="">Membros</a></li>
			<li><a href="">Temas</a></li>
			<li><a href="">Bibliografia</a></li>
		</ul>
	</li>
	<li class="has-submenu">
		<a href="">Pesquisas</a>
		<ul class="submenu menu vertical" data-submenu>
			<li><a href="">Fapesp</a></li>
			<li><a href="">Finpe</a></li>
			<li><a href="">Ipea</a></li>
			<li><a href="">Outras</a></li>
		</ul>
	</li>
	<li><a href="">Eventos</a></li>
	<li><a href="">Produção</a></li>
	<li><a href="">Notícias</a></li>
	<li><a href="">Contato</a></li>
	<li><a href="">Login</a></li>
</ul>

Drilldown

dropdowndrilldownexpanded

Hello!

I'm trying to make a drilldown menu for small screens and expanded dropdown for medium-up.

If I use the .expanded class on the menu, it ends up breaking the drill down navigation on small screens.

How could i achive the expected result? Is there a class like .medium-expanded or something like that? Would be great.

Demo code below!

Thanks in advance.

PS: The code editor broke my nested ul's. Correct code here: http://pastebin.com/RuYtaD08

<ul class="vertical menu large-horizontal expanded" data-responsive-menu="drilldown large-dropdown">
    <li><a href="">Home</a></li>
	<li class="has-submenu">
		<a href="">Grupo</a>
		<ul class="submenu menu vertical" data-submenu>
			<li><a href="">História</a></li>
			<li><a href="">Membros</a></li>
			<li><a href="">Temas</a></li>
			<li><a href="">Bibliografia</a></li>
		</ul>
	</li>
	<li class="has-submenu">
		<a href="">Pesquisas</a>
		<ul class="submenu menu vertical" data-submenu>
			<li><a href="">Fapesp</a></li>
			<li><a href="">Finpe</a></li>
			<li><a href="">Ipea</a></li>
			<li><a href="">Outras</a></li>
		</ul>
	</li>
	<li><a href="">Eventos</a></li>
	<li><a href="">Produção</a></li>
	<li><a href="">Notícias</a></li>
	<li><a href="">Contato</a></li>
	<li><a href="">Login</a></li>
</ul>

Drilldown
Kyle Tuczynski almost 4 years ago

An easy and quick fix would be two separate menus.

......

......

José Eduardo Biasioli almost 4 years ago

Indeed.

But I've been doing that with since Foundation 4.

I really wanted to use the resources the framework has to offer. Separating menus seems too much of a quick fix for me.

Maria Garcia almost 4 years ago

Olá José Eduardo,

Eu estava tentando achar soluções para as minhas dúvidas no fórum e acabei achando o seu post.
Vi que você é brasileiro também e resolvi reply aqui.

Eu sou muitooo iniciante e estou tentando achar respostas para as minhas dúvidas em todo lugar mas esta difícil, ainda mais agora com o novo foundation 6.

Eu estava tentando fazer meu menu funcionar e adicionando por exemplo style="width: 120px;", resolveu o meu problema. Acredito que o espaço não era suficiente para o texto + icon. Não sei bem se esse é o seu problema..ou se isso seria a solução correta. Estou tentando aqui .. hehe.

 <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
  <li class="has-submenu" style="width: 100px;">
    <a href="#">Item 1</a>
    <ul class="submenu menu" data-submenu id="m2">
      <li class="has-submenu" style="width: 120px;">
        <a href="#">Item 1A</a>
        <ul class="submenu menu" data-submenu id="m3">
          <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 class="has-submenu" style="width: 100px;">
    <a href="#">Item 2</a>
    <ul class="vertical submenu menu" data-submenu>
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li class="has-submenu" style="width: 100px;">
    <a href="#">Item 3</a>
    <ul class="vertical submenu menu" data-submenu>
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>
  </div>
</div>