Menu icon Foundation

Engineer | Switzerland

My Posts




My Comments

Lukas Hausammann commented on Lukas Hausammann's post about 3 years

I have now found a better solution. But it is still not perfect:
$(document).foundation();

if( Foundation.MediaQuery.atLeast('large') ){
$('li.is-accordion-submenu-parent > a').off('click.zf.accordionMenu');
}

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){
if((newSize == 'large' || newSize == 'xlarge' || newSize == 'xxlarge') && (oldSize == 'medium' || oldSize == 'small')){
$('li.is-accordion-submenu-parent > a').off('click.zf.accordionMenu');
}else if((oldSize == 'large' || oldSize == 'xlarge' || oldSize == 'xxlarge') && (newSize == 'medium' || newSize == 'small')){
Foundation.reInit(['accordion-menu']);
}
});
 
 
If someone has a better idea, I would be happy.

Lukas Hausammann commented on Lukas Hausammann's post about 5 years

Here is the html code:

<main>
  <div class="row" data-equalizer>
    <article class="teaser columns medium-6 large-4">
      <a href="#">
        <div class="teaser-inner" data-equalizer-watch>
          <img src="img/ph_teaser.jpg" alt="teaser">
          <h1>
            Lorem Ipsum
          </h1>

          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
            voluptua. At vero eos et accusam et. <br> darf nicht zu sehen sein.
          </p>

          <button class="button">More Information</button>
        </div>
      </a>
    </article>

    <article class="teaser columns medium-6 large-4">
      <a href="#">
        <div class="teaser-inner" data-equalizer-watch>
          <img src="img/ph_teaser.jpg" alt="teaser">
          <h1>
            Lorem Ipsum
          </h1>

          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
            voluptua. At vero eos et. 
          </p>

          <button class="button">More Information</button>
        </div>
      </a>
    </article>

    <div class="columns large-4 teaser-background-container">

      <div class="row" data-equalizer>
        <article class="teaser background column medium-6 large-12">
          <a href="#">
            <div class="teaser-inner" data-equalizer-watch>
              <h1>
                Lorem Ipsum
              </h1>

              <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
                eirmod tempor invidunt ut labore et dolore. <br>asdf asdf sdaf sdafsdaf asdf 
              </p>

              <button class="button">More Information</button>
            </div>
          </a>
        </article>

        <article class="teaser background column medium-6 large-12">
          <a href="#">
            <div class="teaser-inner" data-equalizer-watch>
              <h1>
                Lorem Ipsum
              </h1>

              <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
                eirmod tempor invidunt ut labore et dolore. 
              </p>

              <button class="button">Login</button>
            </div>
          </a>
        </article>
      </div>
    </div>

  </div>
</main>

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Lukas Hausammann's post about 3 years

I have now found a better solution. But it is still not perfect:
$(document).foundation();

if( Foundation.MediaQuery.atLeast('large') ){
$('li.is-accordion-submenu-parent > a').off('click.zf.accordionMenu');
}

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){
if((newSize == 'large' || newSize == 'xlarge' || newSize == 'xxlarge') && (oldSize == 'medium' || oldSize == 'small')){
$('li.is-accordion-submenu-parent > a').off('click.zf.accordionMenu');
}else if((oldSize == 'large' || oldSize == 'xlarge' || oldSize == 'xxlarge') && (newSize == 'medium' || newSize == 'small')){
Foundation.reInit(['accordion-menu']);
}
});
 
 
If someone has a better idea, I would be happy.

You commented on Lukas Hausammann's post about 5 years

Here is the html code:

<main>
  <div class="row" data-equalizer>
    <article class="teaser columns medium-6 large-4">
      <a href="#">
        <div class="teaser-inner" data-equalizer-watch>
          <img src="img/ph_teaser.jpg" alt="teaser">
          <h1>
            Lorem Ipsum
          </h1>

          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
            voluptua. At vero eos et accusam et. <br> darf nicht zu sehen sein.
          </p>

          <button class="button">More Information</button>
        </div>
      </a>
    </article>

    <article class="teaser columns medium-6 large-4">
      <a href="#">
        <div class="teaser-inner" data-equalizer-watch>
          <img src="img/ph_teaser.jpg" alt="teaser">
          <h1>
            Lorem Ipsum
          </h1>

          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
            voluptua. At vero eos et. 
          </p>

          <button class="button">More Information</button>
        </div>
      </a>
    </article>

    <div class="columns large-4 teaser-background-container">

      <div class="row" data-equalizer>
        <article class="teaser background column medium-6 large-12">
          <a href="#">
            <div class="teaser-inner" data-equalizer-watch>
              <h1>
                Lorem Ipsum
              </h1>

              <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
                eirmod tempor invidunt ut labore et dolore. <br>asdf asdf sdaf sdafsdaf asdf 
              </p>

              <button class="button">More Information</button>
            </div>
          </a>
        </article>

        <article class="teaser background column medium-6 large-12">
          <a href="#">
            <div class="teaser-inner" data-equalizer-watch>
              <h1>
                Lorem Ipsum
              </h1>

              <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
                eirmod tempor invidunt ut labore et dolore. 
              </p>

              <button class="button">Login</button>
            </div>
          </a>
        </article>
      </div>
    </div>

  </div>
</main>

Posts Followed

Following

  • No Content

Followers

  • No Content