jqueryでクリックしたらスライドしながら現れるメニューを作る!初心者向け

更新日時:2019.06.03

カテゴリ:JavaScript&jQuery

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

 

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の方がコードも短く書けて単純なのでオススメです( ..)φ

 

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

CAPTCHA