Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイドメニューを実装することができます。jQueryなどを用いずにJSだけで動作するのがいいですね。横からスライドするナビゲーションを取り入れたい時に覚えておきたいところです。
Slideout.js
Slideout.jsの実際のデモは以下になります。iPhoneで動作を確認してみたところ、ちゃんとタッチスライドでメニューを開くことができました。
スマフォの他に、もちろんPCでもサイドからのスライドメニューを実装することができます。
横にスライドするアニメーション動作もシンプルで違和感がないのがいいですね。自然な感じで操作もとてもしやすいと思います。
モバイルからのアクセスがかなり増えてきているので、これからサイトを制作する時にはこういった機能を活用してモバイルファーストで設計してきたいですね。
というわけで、タッチに対応した横からスライドするメニュー「Slideout.js」のご紹介でした。
Slideout.jsの使い方や詳細は以下からどうぞ。