Trunk.js

JavaScript

滑らかなスライド表示がいい!レスポンシブなナビゲーションメニュー「Trunk.js」

Trunk.jsはレスポンシブに対応したナビゲーションメニューを実装することができるjQueryプラグインです。左サイドから滑らかにメニューがスライド表示されるシンプルで操作性のいいナビゲーションメニューをつくることができます。

Trunk.js

Trunk.js

PC閲覧時にはあらかじめメニューが横一列に表示されていますが、スマホやタブレットからだとこれが非表示になり、メニューアイコンが表示されます。

アイコンをクリックすると左サイドからメニューがスライドで表示されます。表示された際に軽くバウンドするあたりのアニメーションがいい感じですね。

シンプルでとても使いやすいナビゲーションメニューだと思います。

レスポンシブに対応していることから、いろんなデバイスで快適にナビゲーションメニューを操作できます。

スマホやタブレットの閲覧時に、滑らかにスライド表示するナビゲーションメニューを実装したいという方は、ぜひTrunk.jsを活用されてみてはいかがでしょうか。

関連記事

  1. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  2. JavaScript

    中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」

    jQuery.twinkleというjQueryプラグインを使えば、中心…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる

    jQueryでreplaceWithやreplaceAllを使えば好き…

  4. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  5. Picker

    JavaScript

    iOSのようなピッカーを実装できるJSライブラリ「Picker」

    Pickerは、iOSのUIのようなピッカーを実装することができるJS…

  6. Ace Responsive Menu

最近の記事

  1. OWL-WDDESK01
  2. ワンタッチ着脱フィルターキット
  3. Soundcore Ace A1
  4. cheero USB-C PD Charger 60W

アーカイブ

PAGE TOP