Stretchy Navigation

JavaScript

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

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

Stretchy Navigation

デモ

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

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

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

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

Stretchy Navigation

関連記事

  1. nanoGALLERY
  2. jQueryプラグインで実装できるカレンダー

    JavaScript

    jQueryプラグインで実装できるカレンダー10選

    jQueryプラグインで実装することができる10個のカレンダーがCod…

  3. paroller.js

    JavaScript

    垂直・水平の動きに対応したパララックス効果を実装できる「paroller.js」

    paroller.jsは垂直・水平方向の動きに対応したパララックス効果…

  4. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

  5. jCorner

    JavaScript

    フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」

    jCornerというjQueryプラグインを使ってみました。フラットデ…

  6. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

最近の記事

  1. NIB2600
  2. Anker PowerPort Atom PD 4
  3. USB-2H401BKN
  4. Dyson Pure Cool Me

アーカイブ

PAGE TOP