~横からスライドするメニュー~こんにちは。デザイナーの(鈴)です。今回ももちろん「使い方」シリーズです!スマホサイトを制作し始めた時はfacebook風の横からスライドするメニューをよく希望され、困っていました。そこで大いに助けてもらった「sidr」というプラグインを紹介します。「sidr」とは横からスライドするメニューを実現するプラグインです。「sidr」の良さは左右の両方からスライドが可能なことです。同ページに複数実装可能なので、左右のメニューも同時に実装できます。必要なファイルを下記公式ページの「Download」から一式ダウンロード。http://www.berriart.com/sidr/CSSは背景色が明るい「jquery.sidr.light.css」と背景色が暗い「jquery.sidr.dark.css」の2つが用意されています。デザインに合わせて使用するCSSを選んでください。今回は背景色が明るい「jquery.sidr.light.css」を使った場合で紹介します。ダウンロードしたファイルから下記2つを読み込みます。jquery.sidr.light.cssjquery.sidr.min.js読み込む記述は下記のようになります。表示・非表示を制御しています。スライドする部分は以下の内容になり、<li>がメニュー部分になります。<li>に「active」というclass名を指定するとボタンを選択した状態の表現になります。例として「slide-menu」、「slide-menu」というid名にしていますが、classでも可能ですし、後述のスクリプトの指定と合わせていれば自由に指定可能です。基本的にはhead内か外部JSとして下記のコードを記述すれば、イベントが実行されます。※idやclass名はhtmlでの指定と同じなるように注意しましょう。});});</script>この記述は左からスライドするメニューになります。‘right’」にしてください。「sidr」の基本的な実装は以上になります。「slide-menu」というidを付けた要素のボタンのみになります。メニューを表示後、非表示にするためには上記のボタンまで戻らなければなりません。不便なので操作性を向上させるため、メニュー項目内に「閉じる」ボタンを追加するのがいいと思います。href="#sidr">閉じる</a></li></ul></div>「slide-menu」というidを付けた要素をclassに変更します。href=”#sidr”>閉じる</a>を追加します。});});</script>htmlの記述に合わせ、「#slide-menu」を「.slide-menu」にしてください。以上でメニュー内の「閉じる」ボタンでも表示・非表示を制御可能になります。実装してみてこれまた簡単に実装できるので安心なライブラリです。レスポンシブも不安なしですね!CSSも用意されており、よくできているので、そのまま使用可能なのも嬉しいところです。便利なライブラリなのでぜひお試しください。参考リンク下記サイトは参考にしたサイトになります。複数の実装方法などかなり詳しく紹介しています。http://number333.org/2013/06/14/sidr/http://glow-factory.com/blog_web/jquery/how-to-sidr/http://morobrand.net/mororeco/jquery/sidr/http://shufulife.com/close-button-sidr/この記事は1年以上前の記事で内容が古くなっている場合があります。【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。