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

Epic SpinnersCSSによる素敵なスピナーコレクション「Epic Spinners」前のページ

カルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」次のページZoom SlideShow

関連記事

  1. emotion-ratings

    JavaScript

    絵文字を使ったレーティング機能を実装できる「emotion-ratings」

    emotion-ratingsは絵文字を使ったレーティング機能を実装で…

  2. Responsive jQuery Pop Up Gallery
  3. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

  4. Starfield

    JavaScript

    宇宙空間を移動するような背景アニメーションを実装できる「Starfield」

    Starfieldは宇宙空間を移動するような背景アニメーションを実装す…

  5. ToxicBox

    JavaScript

    さまざまなコンテンツをポップアップウィンドウで表示できる「ToxicBox」

    ToxicBoxは、ライトボックスのjQueryプラグインです。近年、…

  6. mmenu

    JavaScript

    スマホアプリのように横からスライドするメニューのjQueryプラグイン「mmenu」

    mmenuというjQueryプラグインを使えば、スマホアプリのように横…

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP