Выберите раскрывающееся меню для навигации при сворачивании

Глядя на то, что происходит на сайте filamentgroup, вы можете видеть, что ниже определенной ширины тело получает класс nav-menu и удаляется, если размер больше. Это их rwd-nav.js с комментариями:

jQuery(function($){
$('.nav-primary')
  // test the menu to see if all items fit horizontally
  .bind('testfit', function(){
    var nav = $(this),
     items = nav.find('a');

    $('body').removeClass('nav-menu');                    

    // when the nav wraps under the logo, or when options are stacked, display the nav as a menu              
    if ( (nav.offset().top > nav.prev().offset().top) || ($(items[items.length-1]).offset().top > $(items[0]).offset().top) ) {

       // add a class for scoping menu styles
       $('body').addClass('nav-menu');
    };                    
 })

 // toggle the menu items' visiblity
 .find('h3')
   .bind('click focus', function(){
      $(this).parent().toggleClass('expanded')
   });   

   // ...and update the nav on window events
   $(window).bind('load resize orientationchange', function(){
   $('.nav-primary').trigger('testfit');
 });

});

Затем в их rwd-nav.css это изменяется в зависимости от ширины

/* Media queries
------------------------------ */

@media screen and (min-width: 640px) {
  .nav-primary,
  .nav-primary ul {
    float: left;
  }
  .nav-primary ul {
    float: left;
  }
  .nav-primary li {
    float: left;
    font-size: 1.5em;
    border-bottom: 0;
  }   
}

@media screen and (min-width: 910px) {
  .nav-primary {
    float: right;
    clear: none;
  }   
}

Надеюсь, это поможет!