Простого отзывчивого меню навигации

Question

Я создал это меню в HTML:

<div class="trigger" style="display:none;">menu</div> 


<div class="nav"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Products</a></li> 
     <li><a href="#">FAQ</a></li> 
     <li><a href="#">Contact</a></li>    
    </ul> 
</div> 

тогда я написал несколько CSS кода, чтобы сделать его выглядеть отзывчивым, и я написал, что на 400px навигация будет скрыта, и только если нажать на кнопка будет отображаться, работает хорошо.

проблема заключается в том, что я нажимаю на меню (на 400 пикселей), чтобы показать его, и я снова нажимаю, чтобы скрыть его, когда меняю размер окна на более высокие размеры, навигационная информация остается скрытой ,

Пример: http://jsfiddle.net/b6pdy89u/

Что такое лучший способ создать эту навигацию?

Answer 1

Добавьте следующий код.

$(window).resize(function() { 
    $('.nav').removeAttr('style'); 
}); 

В качестве альтернативы вы можете это сделать. DEMO

$('.trigger').click(function() { 
    $('.nav').slideToggle(function() { 
     var hidden = $(this).is(':hidden'); 
     if (hidden) 
      $(this).removeAttr('style'); 
    }); 
});