A flyout menu for Bread & Butter (https://github.com/multiple-states/bread-butter)

menu-flyout.js

<!-- Move to your custom.js file -->

  // Open and close the flyout menu
  $(".m-menu-open a, .m-menu-close a").click(function(){

    $(".page-holder").toggleClass("open", 500, "easeInOutQuart");

  });

  // When a link is clicked close the flyout menu before navigating to the new page
  $('.m-primary-menu a').click(function(event) {

      event.preventDefault();
      var href = this.href;

      $(".page-holder").removeClass("open", 500,  "easeInOutQuart",
      function() {
          window.location = href;
      });

  });

menu-flyout.less

/* ------------------------------------------------------------------ The open button */

.m-menu-open {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  padding: 5px 10px;
  
  .font-size(2);
  text-transform: uppercase;
  
  background-color: @primary-dark;
}

@media (min-width: @break-1) {
  .m-menu-open {
    display: none;
  }
}

.m-menu-open a {
  color: @primary-light;
  
  border-bottom: none;
}


/* ------------------------------------------------------------------ Mobile slide out menu */

.page-holder {
  position: relative;
  left: 0;
  z-index: 500;
  
  background-color: @primary-light;
}

.page-holder.open {
  left: 300px;
}

.m-nav-holder {
  display: block;
  position: absolute;
  width: 300px;
  left: 0px;
  top: 0px;
  z-index: 0;
}

@media (min-width: @break-1){
  .m-nav-holder {
    display: none;
  }
}

/* ------------------------------------------------------------------ Mobile first level nav */

.m-menu-close {
  float: left;
  
  background-color: @primary-dark;
}

.m-menu-close a {
  display: block;
  .padding( 1 );
  
  color: @primary-light;
  text-decoration: none;
  
  cursor: pointer;
}

.m-first-nav {
  width: 100%;
}

.m-first-nav ul {
  display: inline-block;
  float: left;
  width: 100%;
}

.m-first-nav ul li {
  width: 100%;
  float: left;
}

.m-first-nav>ul>li {
  background: @highlight-1;
}

.m-first-nav>ul>li:nth-child(even) {
  background: @secondary-light;
}
  
.m-first-nav ul li a {
  display: block;
  .pad-top( 1 );
  .pad-bottom( 1 );
  
  text-align: center;
  text-decoration: none;
}

.m-first-nav ul li ul {
  display: none;
}

menu-flyout.php

<!-- The absolute positioned open button -->
<div class="m-menu-open"><a href="#">Menu</a></div>

<!-- The menu that is hidden behind the page-holder div-->
<div class="m-nav-holder">
  
  <!-- The close button -->
  <div class="m-menu-close">
    <a>X</a>
  </div>
  
  <!-- The menu -->
  <div class="m-first-nav">
    <?php include ('includes/menu.php'); ?>
  </div>
      
</div><!-- end m-nav-holder -->