Trunk.js

JavaScript

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

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

Trunk.js

Trunk.js

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

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

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

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

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

mophie juice pack heliumiPhone SE対応の超薄型バッテリーケース「mophie juice pack helium for iPhone 5s/5」前のページ

陽炎のような揺れを表現できる「Animated Heat Distortion Effects with WebGL」次のページAnimated Heat Distortion Effects with WebGL

関連記事

  1. no-image

    JavaScript

    レスポンシブ対応のシンプルなLightboxプラグイン

    レスポンシブに対応したシンプルなLightboxプラグインを紹介します…

  2. MG Space

    JavaScript

    Google画像のようなアコーディオンプラグイン「MG Space」

    MG SpaceはGoogle画像のようなjQueryアコーディオンプ…

  3. JavaScript

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  4. no-image

    JavaScript

    続きを読むボタンを実装できる「ReadMorePlugin」

    ReadMorePluginは「続きを読む」、「もっと読む」、「Rea…

  5. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP