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. Ziehharmonika

    JavaScript

    かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

    アニメーションがとてもクールでかっこいいアコーディオンを実装することが…

  2. Product Tour

    JavaScript

    レスポンシブなプロダクトツアーを実装できるCSS・jQuery「Product Tour」

    Product Tourはレスポンシブに対応したプロダクトツアーを実装…

  3. JavaScript

    とても簡単にカッコいいタグクラウドを実装することができるjQueryプラグイン「jQCloud」

    とってもカッコいいタグクラウドを実装することができるjQueryプラグ…

  4. Stretchy

    JavaScript

    入力した文字数に合わせて可変するフォーム実装「Stretchy」

    Stretchyは入力した文字数に合わせてボックスが伸び縮みするフォー…

  5. JavaScript

    2つの異なるスクロール動作が印象的なjQueryプラグイン「multiscroll.js」

    multiscroll.jsというおもしろいjQueryプラグインがあ…

  6. Zebra_Tooltips

    JavaScript

    シンプルでスマートなツールチップを実装できる「Zebra_Tooltips」

    Zebra_Tooltipsは軽量でシンプルなツールチップを実装できる…

最近の記事

  1. 上島珈琲店 No.11
  2. 銀座トリコロール
  3. 牛たん焼定食

アーカイブ

PAGE TOP