Slideout.js

JavaScript

軽量でタッチスライド対応のサイドメニュー・Slideout.js

Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイドメニューを実装することができます。jQueryなどを用いずにJSだけで動作するのがいいですね。横からスライドするナビゲーションを取り入れたい時に覚えておきたいところです。

Slideout.js

デモ

スマフォの他に、もちろんPCでもサイドからのスライドメニューを実装することができます。

横にスライドするアニメーション動作もシンプルで違和感がないのがいいですね。自然な感じで操作もとてもしやすいと思います。

モバイルからのアクセスがかなり増えてきているので、これからサイトを制作する時にはこういった機能を活用してモバイルファーストで設計してきたいですね。

というわけで、タッチに対応した横からスライドするメニュー「Slideout.js」のご紹介でした。

Slideout.js

Google検索で日付や期間指定をして検索結果を表示する方法前のページ

スライド機能がついたプロダクトギャラリーを実装できる「Product Preview Slider」次のページ

関連記事

  1. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

  2. jquery-time-slider

    JavaScript

    時間と日付を選択できる「jquery-time-slider」

    jquery-time-sliderは時間と日付を選択できるjQuer…

  3. dndod

    JavaScript

    依存性のないシンプルで簡単なモーダルライブラリ「dndod」

    dndodはjQueryなどへの依存性のないシンプルで簡単なJavaS…

  4. JavaScript

    jQuery MobileでWebサイトをスマートフォン対応にする時に見ておきたい記事のまとめ

    今更ながらようやくjQuery Mobileを使い始めたんですが、基本…

  5. scrollMonitor

    JavaScript

    要素が表示領域に入ったり出たりするとイベントを受け取れる「scrollMonitor」

    scrollMonitorは、要素が表示領域(ビューポート)に入ったり…

  6. no-image

    JavaScript

    jQueryの代わりに使用できるマイクロJavaScriptライブラリ「Selector」

    Selectorは、jQueryの代わりに使用することができるマイクロ…

最近の記事

  1. EOS RP
  2. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  3. スターバックス ハシエンダ アルサシア
  4. イングリッシュマフィン

アーカイブ

PAGE TOP