Trunk.js

JavaScript

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

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

Trunk.js

Trunk.js

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

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

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

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

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

関連記事

  1. JavaScript

    JavaScriptの配列操作をメモがてら整理してまとめてみる

    自分用のメモです。JavaScriptの配列操作に関するメソッドなんか…

  2. jQuery Responsive Thumbnail Gallery Plugin

    JavaScript

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQuery Responsive T…

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQue…

  3. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

  4. JavaScript

    jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

    jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便…

  5. AnimatedSlideNav

    JavaScript

    動きがオシャレなアニメーションのサイドナビゲーション「AnimatedSideNav」

    AnimatedSideNavは、動きがオシャレなアニメーションによる…

  6. Tilt Hover Effects

    JavaScript

    ホバーによるチルトエフェクトを実装できる「Tilt Hover Effects」

    指定したアイテムにホバーすることでオシャレなチルトエフェクトを実装する…

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP