HTML/CSS/JS: Mobile Menu Toggle with CSS Transitions & JS Fallback #snippet

index.html

<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>

script.js

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);
  });
}

style.scss

@import "compass";
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 where supported
    and fall back to jQuery where it's not
  
		Yay for Modernizr!
*/
  .js.csstransitions & {
    height: 0;
    overflow: hidden;
    @include transition(all .2s ease);
    &.open{
			height: 300px;
		}
  }
  .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;
      }
    }
  }
}