2017年4月18日

メニューを左からスライド・イン

メニューを画面の左からスライド・インさせる方法を紹介します。

HTML

補足

  • show-menu クラスを付けた span 要素をクリックすることで、メニューのスライドイン・アウトをおこないます。

jQuery

補足

  • show-menu クラスを付けた span 要素がクリックされたら、メニューの左位置を変更してスライド・イン、スライド・アウトさせています。
  • リサイズ(または回転)時に左位置を再設定しないと、画面外に出しておいたメニューが一部見えてしまうことがあるので、リサイズされたら左位置を設定し直しています。

CSS

補足

  • メニューの左位置は、メニューの幅のマイナス値を指定して、あらかじめ画面外に出しています。
  • スマート・フォンの横持ちでメニューの下部が切れてしまうことがあるので、#menu .inner のスタイルを設定して、スクロールできるようにしています。

サンプル