[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る

Modified 2015-10-17 更新情報 メニュースライドイン時スクロールできるサンプルを追記しました。コメント欄での返答で誤りがあった箇所を削除しました。 コンテンツ 部分をクリックしても閉じることができるようにするコードを追記しました。 スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックするとコンテンツを押し出してメニューがスライドインしてくる動きを jQuery と CSS で作る方法です。やってみると意外と簡単なコードで作ることができます。 サンプルデモとダウンロード ◆ 横からスライドインするメニュー demo｜memocarilog このサンプルコードは以下よりダウンロードできます。 ◆ SaoriMiyazaki/SlideIn_Menu HTMLコード スライドインしてくるメニューとメニューボタンの記述をします。 <!-- スライドメニュ

[akihiro0117]

“ position: fixed; top: 0; left: -240px; width: 240px; height: 100%; background: #E87272;”

[aoiasaba]

これ、あっさり実装できてソースコードもあまり増えなくてよかった！！助かりました

[sutanto1983]

スライド　メニュー

[qrac_jp]

Webアプリ開発用。

[h-a-t-e-h-a-t-e-h-a-t-e-n-a]

スマホ対応 ナビ

[cosakana0912]

jQuery使えない時。

[Yukarigohan]

スライド、スマホ