no-image

JavaScript

タッチ対応のドロワーコンポーネント「hy-drawer」

hy-drawerはタッチに対応したドロワーコンポーネントです。AndroidとiOSで自然な感じになるように焦点を当てているとのこと。モバイルアプリのような操作感がとても快適です。オプションもいくつか用意されており、カスタマイズして使うこともできます。

hy-drawer

デモ

上記はMixin Exampleになります。この他にも、Vanilla JS、jQuery、WebComponentによるサンプルが用意されています。

デモページでは、左上にあるハンバーガーメニューアイコンをクリックすると、左からスライドでメニューが登場します。メニューが表示中の時にはコンテンツ部分にオーバーレイがかかるので、メニューの内容に集中しやすくなります。

メニューの外をクリックすると、スライドとともにメニューが非表示になり通常画面に戻ります。

サクサク動作するのでストレスなくとても快適にメニューの開閉ができますね。モバイルアプリのような操作感で、パソコンでもスマホでも違和感なく操作できる印象です。

またオプションにはopened、align、range、persistent、preventDefault、threshold、mouseEventsという項目があり、これらのセッティングの調整ができます。

その他、メソッドにはopen、close、toggleが、イベントにはhy-drawer-init、hy-drawer-perpare、hy-drawer-slidestart、hy-drawer-slideend、hy-drawer-transitioned、hy-drawer-moveが用意されています。

hy-drawer

関連記事

  1. infiniteSlider2.js
  2. slimMenu
  3. FModal.JS

    JavaScript

    シンプルなフルスクリーンのモーダルウィンドウ「FModal.JS」

    FModal.JSはシンプルなフルスクリーンのモーダルウィンドウを実装…

  4. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

  5. Shuffle Images

    JavaScript

    画像をシャッフルすることができるjQueryプラグイン「Shuffle Images」

    Shuffle ImagesというjQueryプラグインを使えば、画像…

  6. jQuery Section Navi Plugin

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP