<a id="mobile-menu-toggle" href="#">Menu</a>

<nav id="main-nav" class="closed">
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
  </ul>
</nav>

@import "compass/css3";

body{
  width: 70%;
  margin: 0 auto;
  padding-top: 20px;
}
#mobile-menu-toggle{
  color: #990000;
  background: #eee;
  display:block;
  width: 50px;
  padding: 10px;
  border-bottom: solid 1px #ccc;
  text-decoration: none;
  text-transform: uppercase;
}

#main-nav{

/*  
    Setting up CSS for the menu toggle.
    We'll use CSS transitions for the animation, 
    where supported
*/
  .js.csstransitions & {
    height: 0;
    overflow: hidden;
    @include transition(all .2s ease);
    &.open{
      height: 300px; 
      /* The need for set pixel height is a flaw in this CSS animation technique.
      Height 100% doesn't work.
      */
      
    }
  }
  /* and set up a fall back to jQuery where it's not */
  .js.no-csstransitions &{
    display: none;
  }

/* Basic styles */
  ul{
    list-style: none;
    width: 250px;
    margin:0;
    padding: 0;
      li{
        padding: 20px;
        background: #eee;
        border-top: solid 1px #ccc;
        &:first-child{
          border: 0;
        }
      a{
        text-decoration:none;
        color: #545454;
      }
    }
  }
}

var main_nav = $('#main-nav');
var menu_toggle = $('#mobile-menu-toggle');

if(Modernizr.csstransitions){
  // CSS Class toggles where transitions are supported 
  menu_toggle.click(function(){
    main_nav.toggleClass('open');
    main_nav.toggleClass('closed');
  });
} else{
  // Good old slideToggle for everybody else
  menu_toggle.click(function(){
    main_nav.slideToggle(200);
  });
}