Stretchy Navigation

JavaScript

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

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

Stretchy Navigation

デモ

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

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

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

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

Stretchy Navigation

関連記事

  1. Text Scramble Effect

    JavaScript

    テキストをスクランブルしながら表示していく「Text Scramble Effect」

    Text Scramble Effectはテキストをカシャカシャとスク…

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

    JavaScript

    jQueryでアニメーションを遅らせるにはdelayを使えばいいらしい

    ちょっとしたメモです。jQueryでanimateをメソッドチェーンで…

  3. Responsive Multi Menu
  4. JavaScript

    テーブルを綺麗なデザインにしてくれたり並び替え(ソート)もできるjQuery「tablesorter…

    jQueryのプラグインで、テーブルをフレキシブルなデザインにしてくれ…

  5. Ziehharmonika

    JavaScript

    かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

    アニメーションがとてもクールでかっこいいアコーディオンを実装することが…

  6. Choreographer-js

    JavaScript

    多彩なCSSアニメーションを実現できる「Choreographer-js」

    Choreographer-jsは、多彩なCSSアニメーションを実現さ…

最近の記事

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

Instagram始めました

Facebookページ

PAGE TOP