Menu icon Foundation

My Posts







My Comments

Shane Sheppard commented on Shane Sheppard's post over 3 years

@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">

  &lt;ul class="menu dropdown"&gt;
    &lt;li class="mega-menu"&gt;&lt;a data-toggle="example"&gt;EXAMPLE&lt;/a&gt;
      &lt;div class="mega dropdown-pane bottom" id="example" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true; vOffset:-1"&gt;

        &lt;div class="expanded row"&gt;
          &lt;div class="large-12 columns"&gt;
            &lt;h3&gt;Example Title&lt;/h3&gt;
            &lt;hr&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="expanded row"&gt;



                    &lt;div class="large-2 columns"&gt;
                       &lt;img src="http://placehold.it/180x180" /&gt;
                    &lt;/div&gt;
                    &lt;div class="large-2 columns"&gt;
                       &lt;img src="http://placehold.it/180x180" /&gt;
                     &lt;/div&gt;
                    &lt;div class="large-2 columns"&gt;
                       &lt;img src="http://placehold.it/180x180" /&gt;
                    &lt;/div&gt;
                    &lt;div class="large-2 columns"&gt;
                       &lt;img src="http://placehold.it/180x180" /&gt;
                    &lt;/div&gt;
                    &lt;div class="large-2 columns"&gt;
                      &lt;img src="http://placehold.it/180x180" /&gt;
                    &lt;/div&gt;
                    &lt;div class="large-2 columns end"&gt;
                       &lt;img src="http://placehold.it/180x180" /&gt;
                    &lt;/div&gt;


         &lt;/div&gt;


      &lt;/div&gt;
    &lt;/li&gt;

    &lt;/div&gt;
&lt;/div&gt;

</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;
}
}

Shane Sheppard commented on Shane Sheppard's post over 3 years

Is there anyway of making this work in Foundation 6?

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

Shane Sheppard commented on Shane Sheppard's post over 3 years

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 commented on Shane Sheppard's post over 3 years

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 commented on Shane Sheppard's post almost 4 years

Thanks Rafi,
Both of those posts are helpful.
I am now looking into using Gulp so i have a couple of options to do the same thing.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Shane Sheppard's post over 3 years

@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">

  &lt;ul class="menu dropdown"&gt;
    &lt;li class="mega-menu"&gt;&lt;a data-toggle="example"&gt;EXAMPLE&lt;/a&gt;
      &lt;div class="mega dropdown-pane bottom" id="example" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true; vOffset:-1"&gt;

        &lt;div class="expanded row"&gt;
          &lt;div class="large-12 columns"&gt;
            &lt;h3&gt;Example Title&lt;/h3&gt;
            &lt;hr&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="expanded row"&gt;



                    &lt;div class="large-2 columns"&gt;
                       &lt;img src="http://placehold.it/180x180" /&gt;
                    &lt;/div&gt;
                    &lt;div class="large-2 columns"&gt;
                       &lt;img src="http://placehold.it/180x180" /&gt;
                     &lt;/div&gt;
                    &lt;div class="large-2 columns"&gt;
                       &lt;img src="http://placehold.it/180x180" /&gt;
                    &lt;/div&gt;
                    &lt;div class="large-2 columns"&gt;
                       &lt;img src="http://placehold.it/180x180" /&gt;
                    &lt;/div&gt;
                    &lt;div class="large-2 columns"&gt;
                      &lt;img src="http://placehold.it/180x180" /&gt;
                    &lt;/div&gt;
                    &lt;div class="large-2 columns end"&gt;
                       &lt;img src="http://placehold.it/180x180" /&gt;
                    &lt;/div&gt;


         &lt;/div&gt;


      &lt;/div&gt;
    &lt;/li&gt;

    &lt;/div&gt;
&lt;/div&gt;

</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;
}
}

You commented on Shane Sheppard's post over 3 years

Is there anyway of making this work in Foundation 6?

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

You commented on Shane Sheppard's post over 3 years

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>

You commented on Shane Sheppard's post over 3 years

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.

You commented on Shane Sheppard's post almost 4 years

Thanks Rafi,
Both of those posts are helpful.
I am now looking into using Gulp so i have a couple of options to do the same thing.

Posts Followed

No Content

Following

  • No Content

Followers