Sidr使ってよくあるボタンおすとにゅっと横から出てくるサイドメニューを書いた

所用でサイドメニューを書きたかった

よくあるサイドメニュー、いわゆるサイドバー…呼び方はひとそれぞれですが。 あれを実装したかったんですね。とりあえずリンクを押せば横からにゅっと出るようにしたかった。 そしてJadeで書きたかった。

まずは下準備

jQweryとか必要です。

jQuery

あと、Sidrも当然必要ですね。

Sidr - Berriart

これらのjsをダウンロード、適当なところで読み込んでください。

書く

    script(type='text/javascript').
      $(document).ready(function() {
      $('.slide-menu').sidr({
      name: 'sidr-menu',
      side : 'left'
      });
      });

      

    #sidr-menu
      ul
        li.active
          a(href='#') カテゴリー
        li
          a(href='#') カテゴリー
        li
          a(href='#') カテゴリー
        li
          a(href='#') カテゴリー
        li
          a.slide-menu(href='#sidr') 閉じる
        
  
    a.slide-menu(href='#sidr') サイドメニュー

インデントが適当になってるかもしれませんが、Jadeはインデントがおかしいとエラー吐きますのでご注意を。 サイドメニューというリンクをおすとひらくはず。 ほぼSidrのチュートリアルと同じ感じですね。

これでそれっぽいサイトが作れるかもしれない。