![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBVyyutCUN27bcHgpeSTPkO_FFM98mfwX21Q3fQbYhc1PgDflO5zI08EeW-BVMjK-qoPDXw_r7T-dIFAWr_bo54_9nmj-aXCyFr5j6wewbn49oZhVwQ10LdJqqFK6RZfaMrt4Q3aCLVQP7/s1600/SnapCrab_NoName_2017-4-18_15-24-5_No-00.png)
メニューを画面の左からスライド・インさせる方法を紹介します。
HTML
補足
- show-menu クラスを付けた span 要素をクリックすることで、メニューのスライドイン・アウトをおこないます。
jQuery
補足
- show-menu クラスを付けた span 要素がクリックされたら、メニューの左位置を変更してスライド・イン、スライド・アウトさせています。
- リサイズ(または回転)時に左位置を再設定しないと、画面外に出しておいたメニューが一部見えてしまうことがあるので、リサイズされたら左位置を設定し直しています。
CSS
補足
- メニューの左位置は、メニューの幅のマイナス値を指定して、あらかじめ画面外に出しています。
- スマート・フォンの横持ちでメニューの下部が切れてしまうことがあるので、#menu .inner のスタイルを設定して、スクロールできるようにしています。