メニューを画面の左からスライド・インさせる方法を紹介します。
HTML
補足
- show-menu クラスを付けた span 要素をクリックすることで、メニューのスライドイン・アウトをおこないます。
jQuery
補足
- show-menu クラスを付けた span 要素がクリックされたら、メニューの左位置を変更してスライド・イン、スライド・アウトさせています。
- リサイズ（または回転）時に左位置を再設定しないと、画面外に出しておいたメニューが一部見えてしまうことがあるので、リサイズされたら左位置を設定し直しています。
CSS
補足
- メニューの左位置は、メニューの幅のマイナス値を指定して、あらかじめ画面外に出しています。
- スマート・フォンの横持ちでメニューの下部が切れてしまうことがあるので、#menu .inner のスタイルを設定して、スクロールできるようにしています。