A Pen by Joe Watkins.

FlexNav.js.markdown

FlexNav.js

Fiddling w/FlexNav.js

A Pen by Joe Watkins on CodePen.

License.

index.html

<div class="menu-button">Menu</div>
        <nav>
          <ul data-breakpoint="800" class="flexnav">
            <li><a href="#">Item 1</a>
              <ul>
                <li> <a href="#">Sub 1 Item 1</a></li>
                <li><a href="#">Sub 1 Item 2</a></li>
                <li><a href="#">Sub 1 Item 3</a></li>
                <li><a href="#">Sub 1 Item 4</a></li>
              </ul>
            </li>
            <li><a href="#">Item 2</a>
              <ul>
                <li><a href="#">Sub 1 Item 1</a></li>
                <li><a href="#">Sub 1 Item 2</a>
                  <ul>
                    <li><a href="#">Sub 2 Item 1</a></li>
                    <li><a href="#">Sub 2 Item 2</a></li>
                    <li><a href="#">Sub 2 Item 3</a></li>
                  </ul>
                </li>
                <li><a href="#">Sub 1 Item 3</a>
                  <ul>
                    <li><a href="#">Sub 2 Item 1</a></li>
                    <li><a href="#">Sub 2 Item 2</a>
                      <ul>
                        <li><a href="#">Sub 3 Item 1</a></li>
                        <li><a href="#">Sub 3 Item 2</a></li>
                        <li><a href="#">Sub 3 Item 3</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#">Item 3</a>
              <ul>
                <li><a href="#">Sub 1 Item 1</a></li>
                <li><a href="#">Sub 1 Item 2</a></li>
                <li><a href="#">Sub 1 Item 3</a></li>
              </ul>
            </li>
            <li><a href="">Item 4</a>
              <ul>
                <li><a href="#">Sub 1 Item 1</a></li>
                <li><a href="#">Sub 1 Item 2</a></li>
                <li><a href="#">Sub 1 Item 3</a></li>
              </ul>
            </li>
            <li><a href="#">Item 5</a>
              <ul>
                <li><a href="#">Sub 1 Item 1</a></li>
                <li><a href="#">Sub 1 Item 2</a></li>
                <li><a href="#">Sub 1 Item 3</a></li>
              </ul>
            </li>
            <li><a href="#">Item 6</a>
              <ul>
                <li><a href="#">Sub 1 Item 1</a></li>
                <li><a href="#">Sub 1 Item 2</a></li>
                <li><a href="#">Sub 1 Item 3</a></li>
              </ul>
            </li>
          </ul>
        </nav>

script.js

/* https://github.com/indyplanets/flexnav */
$(".flexnav").flexNav();

style.scss

@import "compass";
$breakpoint: 800px;

.flexnav {
  .touch-button {
    @media(min-width:$breakpoint){
      display:none;
    }
  }
  li {
    text-align:center;
    @media(min-width:$breakpoint){
      width:16.66%;
    }
    a {
      text-decoration:none;
      &:hover {
        background:#777;
      }
      @media(min-width:$breakpoint){
        border:0px;
      }
    }
  }
}


















@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
body {
font-family: 'Roboto Slab', serif;
}