Response Menu

by Sam Fereday

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<nav class="site-navigation">
  <button class="menu-button">Menu</button>
  <ul class="menu-root">
    <li>
      <a href="#">The Suites</a>
    </li>
    <li>
      <a href="#">Food</a>
    </li>
    <li class="dropdown"><span class="submenu-button"></span>
      <a href="#">Gallery</a>
      <ul>
        <li><a href="#">Movies</a>
          <ul>
            <li><a href="#">Movies</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Romance</a>
    </li>
    <li class="dropdown"><span class="submenu-button"></span>
      <a href="#">Contact</a>
      <ul>
        <li><a href="#">Location</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </li>
  </ul>
</nav>

SCSS

@mixin nav-breakpoint($point) {
   @if $point == desktop {
     @media (min-width: 70em) { @content ; }
  }
  @else if $point == laptop {
     @media (min-width: 64em) { @content ; }
  }
   @else if $point == tablet {
     @media (min-width: 50em) { @content ; }
  }
  @else if $point == phablet {
     @media (min-width: 37.5em)  { @content ; }
  }
  @else if $point == mobileonly {
     @media (max-width: 37.5em)  { @content ; }
  }
  @else {
     @media (max-width: $point)  { @content ; }
  }
}

@mixin nav-hide() {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

@mixin site-navigation-module($width: 100%, $breaks-on: tablet) {
  width: $width;
  
  ul,
  ul li,
  ul ul li{
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 9999;
    list-style: none;
  }
  ul {
    width: 100%;
    display: none;
  }
  .submenu-button {
    display: block;
  }
  @nav-breakpoint($breaks-on) {
    .submenu-button {
       @include nav-hide;
    }
    ul ul {
      width: auto;
      display: block;
      position: absolute;
      left: -9999px;
    }
    ul ul ul {
      margin-left: 100%;
      top: 0;
    }
    li:hover>ul {
      left: auto;
    }
  }
}

@mixin site-navigation-theme($idle-colour, $hover-colour, $sub-menu-background, $breaks-on: tablet) {
  display: flex;
  > ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
  }
  .hide {
     position: absolute;
     top: -9999px;
     left: -9999px;
  }
  .menu-button {
    height: 47px;
    padding: 12px 24px;
    border: 0;
  }
  .submenu-button {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0;
    top: 0;
    background: $sub-menu-background;
    cursor: pointer;
  }
  
  // Colour things in (using prefs)
  background-color: $idle-colour;
  
  ul {
    padding: 12px;
    ul {
      padding-left: 24px;
      background: $sub-menu-background;
    }
    
    @nav-breakpoint($breaks-on) {
      padding: 0;
      ul {
        padding-left:...

JavaScript

var breakAtWidth = 1024;
var cssmenu = $(this);

$(".menu-button").on('click', function() {
  $(this).toggleClass('menu-opened');
  $(this).find('.button').toggleClass('hamburger--collapse is-active');
  var mainmenu = $('.menu-root');
  if (mainmenu.hasClass('open')) {
    mainmenu.slideUp('fast').removeClass('open');
  } else {
    mainmenu.slideDown('fast').addClass('open');
  }
});

cssmenu.find('li ul').parent().addClass('has-sub');

cssmenu.find('.submenu-button').on('click', function() {
  $(this).toggleClass('submenu-opened');
  if ($(this).siblings('ul').hasClass('open')) {
    $(this).siblings('ul').removeClass('open').slideUp('fast');
  } else {
    $(this).siblings('ul').addClass('open').slideDown('fast');
  }
});

resizeFix = function() {
  if ($(window).width() > breakAtWidth) {
    cssmenu.find('ul').slideDown('fast');
  }

  if ($(window).width() <= breakAtWidth) {
    //cssmenu.find('ul').slideUp('fast').removeClass('open');
  }
};
resizeFix();