Menu icon Foundation
Mega Menu / Full Row Dropdown

Hi All,

Is there a way of creating a full column dropdown or mega menu in Foundation 6?

I have found tutorials using several methods but they use Foundation 4 or 5 and no longer work with the current framework.

This would be a really awesome tutorial for your building block page.

This feature is a must for e-commerce projects with a diverse and wide set of products lines, and would be helpful even if just a plug-in.

This is the closest have found - http://codepen.io/SitePoint/pen/yNeZzK/

Cheers

foundation6mega-menudropdownnavigationux

Hi All,

Is there a way of creating a full column dropdown or mega menu in Foundation 6?

I have found tutorials using several methods but they use Foundation 4 or 5 and no longer work with the current framework.

This would be a really awesome tutorial for your building block page.

This feature is a must for e-commerce projects with a diverse and wide set of products lines, and would be helpful even if just a plug-in.

This is the closest have found - http://codepen.io/SitePoint/pen/yNeZzK/

Cheers

Rafi Benkual almost 4 years ago

Hmm, should work the same, what have you tried so far?

The example you gave is from Foundation 5.

Alejandro almost 4 years ago

I use this:

<div class="top-bar-right">
<ul class="menu dropdown">
  <li class="mega-menu"><a data-toggle="institucional"><span class="txt-white">INSTITUCIONAL<br> <small class="light"> Autoridades, Misión<br>Objetivos y Servicios</small></span></a>
    <div class="mega dropdown-pane bottom sombra-1 sombra-1" id="institucional" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true; vOffset:11">


<div class="expanded row">
              <div class="small-3 columns"> 
                <h4>Información institucional</h4>
                <ul class="no-bullet">
                  <li><a href="/mision.htm">Misión, visión y valores</a></li>
                    <li><a href="/origen.htm">Origen y proyección del INTI</a></li>
                  <li><a href="/auto.htm">Autoridades</a></li>
                  <li><a href="/convenios.htm">Convenios firmados con otras instituciones</a></li>
                   <li><a href="/contrataciones/">Contrataciones</a></li>


                </ul>
              </div>
              <div class="small-3 columns"> 
                <h4>Servicios</h4>
                <ul class="no-bullet">
                    <li><a href="/oferta/">Oferta de servicios</a></li>
                    <li><a href="/contrataciones/">Guía de trámites</a></li>
                    <li><a href="http://www-biblio.inti.gov.ar/">Biblioteca</a></li>
                </ul> 
              </div>
              <div class="small-3 columns end"> 
               <h4>Donde estamos</h4>
                <ul class="no-bullet">
                 <li><a href="/INTIpais.htm">INTI en el país</a></li>
                  <li><a href="/centros.htm">Centros</a></li>
                  <li><a href="/unidades_extension.htm">Unidades de Extensión</a></li>
                  <li><a href="/oficinas_tecnicas.htm">Oficinas de información</a></li>
                </ul> <!--   <h4>Biblioteca</h4>
                <ul class="no-bullet">

                 <li><a href="boletinbibliografico/index.php">Boletín bibliográfico</a></li>
                </ul>-->
              </div>

             <!--     <div class="small-3 columns"> 
              <h4>Servicios</h4>
                <ul class="no-bullet">
                    <li><a href="oferta/">Oferta de servicios</a></li>
                </ul>
              </div>-->
</div>


    </div>
  </li>
</div>
.mega-menu{
  padding: .5rem 1.3rem .7rem;
  -webkit-transition: background-color .2s ease-out;
  -moz-transition: background-color .2s ease-out;
  -o-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
  background-color: $institucional;
  &:hover{
    background-color: scale-color($button-background, $lightness: -15%);
  }
  z-index:0;
  .mega{
    width: 100%;
    max-width: 85rem;
    margin: 0 auto !important;
    left: 0% !important;
    right: 0% !important;
  }
}

Shane Sheppard almost 4 years ago

Hi @Rafi Bengal

Yeah i know unfortunately that method messed with my off canvas mobile nav displaying it on all media sizes. This is through changes that are made to foundation 6.

Shane Sheppard almost 4 years ago

Hi @Alejandro

Your example is not working correctly within my environment, are you using F6

I would like to make the Example's in this menu have mega drop downs within
the grid row size not left or right aligned.

  <div class="top-bar hide-for-small-only">
    <div class="column row">
      <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li>
            <a href="#">Example 1</a>
          </li>
          <li><a href="#">Example 2</a></li>
          <li><a href="#">Example 3</a></li>
          <li><a href="#">Example 4</a></li>
        </ul>
      </div>
    </div>
  </div>

Shane Sheppard almost 4 years ago

Is there anyway of making this work in Foundation 6?

http://codepen.io/SitePoint/pen/yNeZzK?editors=1010

David de Junnemann almost 4 years ago

Hi,
The example given by Alejandro works pefectly on foundation 6.0.6.
Thank you Alejandro

Lisa Lisa almost 4 years ago

Shane - I would also like to see that sort of menu work with Foundation 6. Does anyone have any working code they can share?

Shane Sheppard almost 4 years ago

@Lisa Lisa

This does work i had problems with $institucional mixin that was in the example code;

heres my version of @Alejandro post:

<div class="top-bar hide-for-small-only">
    <div class="row column">
      <div class="top-bar-left">

      <ul class="menu dropdown">
        <li class="mega-menu"><a data-toggle="example">EXAMPLE</a>
          <div class="mega dropdown-pane bottom" id="example" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true; vOffset:-1">
            
            <div class="expanded row">
              <div class="large-12 columns">
                <h3>Example Title</h3>
                <hr>
              </div>
            </div>
            <div class="expanded row">


                      
                        <div class="large-2 columns">
                           <img src="http://placehold.it/180x180" />
                        </div>
                        <div class="large-2 columns">
                           <img src="http://placehold.it/180x180" />
                         </div>
                        <div class="large-2 columns">
                           <img src="http://placehold.it/180x180" />
                        </div>
                        <div class="large-2 columns">
                           <img src="http://placehold.it/180x180" />
                        </div>
                        <div class="large-2 columns">
                          <img src="http://placehold.it/180x180" />
                        </div>
                        <div class="large-2 columns end">
                           <img src="http://placehold.it/180x180" />
                        </div>


             </div>


          </div>
        </li>

        </div>
    </div>
</div>


//CSS
.mega-menu{
  //padding: .5rem 1.3rem .7rem;
  -webkit-transition: background-color .2s ease-out;
  -moz-transition: background-color .2s ease-out;
  -o-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
  /*&:hover{
    background-color: scale-color($button-background, $lightness: -1%);
  }*/
  z-index:999;//USED TO GO OVER ORBIT CONTROLS
  .mega{
    width: 100%;
    max-width: $grid-row-width; //GRID SIZE SET IN SETTINGS.SCSS
    margin: 0 auto !important;
    left: 0% !important;
    right: 0% !important;
  }
}