今回は私もよく使っている「クリックしたら現れるメニュー」を解説していきます。
↓menu2をクリックしてみてください

 

See the Pen
slide-menu by PatX00 (@patx00)
on CodePen.

jqueryでよく使うのがコレ

$('.button').click(function(){
  alert('hello world');
})

buttonというクラスを振ってある要素をクリックしたらクリックイベントが発火してアラートに「hello world」と表示される。というスクリプトです。

今回はこのクリックイベントを使ってクリックすると現れるメニューをご紹介します！

 

といってもやることは単純。

<div>
  <ul>
    <li>menu1</li>
    <li class="trmenu">menu2</li>
    <ul class="is-open">
      <li>menu2-1</li>
      <li>menu2-2</li>
      <li>menu2-3</li>
    </ul>
    <li>menu3</li>
    <li>menu4</li>
  </ul>
</div>

htmlに上記の様な記述をします。

menu1　・・・　クリックする要素
is-open   ・・・　クリックしたときに表示される要素

 

次にcssでis-openを非表示にしておきましょう。

.is-open{
　　display: none;
}

 

最後にjsに下記を記述します。

$(function(){
  $(".trmenu").on('click',function(){
    $(".is-open").slideToggle();
  });
});

.trmenuをクリックしたときに. is-openがスライドしながら現れます。

ここで出てきた「slideToggle」はjQueryのエフェクトです。
指定した要素が非表示の時は縦にスライドしながら表示されます。
指定した要素が表示されているときは縦にスライドしながら非表示になります。

$(".is-open").slideToggle(3000);

みたいな感じで書くと 3秒掛けてスライドします。

これだけです。

私のサイトのヘッダーメニューもこれを使っていますのでクリックしてみてください(‘ω’)ノ

 

本当はaddclassやremoveclassやtoggleclassを使用しても良いのですが、
slideclassの方がコードも短く書けて単純なのでオススメです( ..)φ