3-way responsive menu example

3-way-responsive-menu-example.markdown

3-way responsive menu example

Foundation 6 boilerplate

A Pen by Rafi Benkual on CodePen.

License.

index.html

<div class="row">
  <div class="columns">
    <ul class="vertical menu large-horizontal" data-responsive-menu="drilldown medium-accordion large-dropdown">
      <li>
        <a href="#">Item 1</a>
        <ul class="vertical menu">
          <li>
            <a href="#">Item 1A</a>
            <ul class="vertical menu">
              <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>
        <a href="#">Item 2</a>
        <ul class="vertical menu">
          <li><a href="#">Item 2A</a></li>
          <li><a href="#">Item 2B</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Item 3</a>
        <ul class="vertical menu">
          <li><a href="#">Item 3A</a></li>
          <li><a href="#">Item 3B</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

script.js

$(document).foundation();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
<script src="https://cdn.jsdelivr.net/what-input/1.1.4/what-input.min.js"></script>

style.scss

.menu {
  background: #2c3840;
  
  @media screen and (min-width: 64em) {
    padding: 1rem 0;
  }
  
  a {
    color: #fff;
  }
}

.is-drilldown-submenu-parent>a:after {
  border-color: transparent transparent transparent #fff;
}

.js-drilldown-back>a:before {
  border-color: transparent #fff transparent transparent;
}

.is-accordion-submenu-parent>a:after {
  border-color: #fff transparent transparent;
}

.dropdown.menu.large-horizontal>li.is-dropdown-submenu-parent>a:after {
  border-color: #fff transparent transparent;
}

.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right>a:after {
  border-color: transparent transparent transparent #fff;
}

styles

<link href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.css" rel="stylesheet" />