Stretchy Navigation

JavaScript

ナビゲーションメニューが伸び縮みする「Stretchy Navigation」

Stretchy Navigationはクリック、タップをすることで伸び縮みするナビゲーションメニューを実装できます。PC、スマホ、タブレットとさまざまなデバイスでも操作感が変わらないのがいいですね。

Stretchy Navigation

デモ

左下からNavigation、Add content、Edit contentのスタイルを選択できるようになっています。

メニューアイコンをクリック(タップ)すると、メニューが伸びて各項目が表示されます。

通常はアイコンのみが表示され、メニューリストが非表示になっている状態なので、見た目もスッキリしてスペースにも余裕が生まれますね。

アニメーションもスムーズでストレスなく操作できます。

Stretchy Navigation

関連記事

  1. jQuery Flip-Quote
  2. humane.js

    JavaScript

    シンプルでモダンなさりげない通知システムを実装できる「humane.js」

    humane.jsはフレームワークなどに依存しないシンプルでモダンな通…

  3. Tabulous.js

    JavaScript

    色々なエフェクトのタブパネルが実装できるjQueryプラグイン「Tabulous.js」

    素敵なタブパネルがあったのでメモがてらご紹介します。オプションを指定す…

  4. Emergence.js

    JavaScript

    ブラウザで要素の可視性を検出する「Emergence.js」

    Emergence.jsは、ブラウザで要素の可視性を検出することができ…

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

    JavaScript

    jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

    bindとliveの違いがちょっとわかりずらかったのでまとめてみました…

  6. preload

    JavaScript

    プリロードやローディング画面を実装できるjQueryプラグイン「preload」

    preloadは、その名のとおり「プリロード」やローディング中の画面を…

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP