レスポンシブデザインでコーディングをしていて、スマホ版の場合、メニューをたたむタイプにしたい時の簡単な作り方

PC版だとこんな感じ。

スマホ版だとこんな感じにしたいとします。

いろいろ試してみて、一番簡単な方法は、

<div id="navOpn"></div>
<nav>
<ul>
<li>menu01</li>
<li>menu02</li>
<li>menu03</li>
</ul>
</nav>

HTMLはだいたいこんな感じですよね。
ここにjQueryをセッティングしていきます。

$(document).ready(function(){
$('#navOpn').click(function(){
if($(window).width() > 767){
} else{
$('nav').slideToggle();
}
});
$('nav a').click(function(){
if($(window).width() > 767){
} else{
$('nav').hide();
}
});
});
$(window).resize(function(){
if($(window).width() > 767){
$('nav').show();
} else{
$('nav').hide();
}
});

こんな感じです。

今回はブレイクポイントは768pxで設定しているので、767px以下の場合にjQueryが適用されます。
ナビゲーションをオープンにするボタンをクリックすると、ナビゲーションがスライドで出てきて、ナビゲーションをクリックすると消えるようになっています。
２つ目の部分はウィンドウサイズを768px以上にするとナビゲーションが表示され、767px以下だとナビゲーションを消すようにしています。