Stretchy Navigation

JavaScript

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

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

Stretchy Navigation

デモ

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

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

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

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

Stretchy Navigation

関連記事

  1. Material Design Responsive Table
  2. jquery.resizeend

    JavaScript

    ウィンドウをリサイズした時にイベント発生できる「jquery.resizeend」

    jquery.resizeendは、ブラウザのウィンドウをリサイズした…

  3. FocusPoint

    JavaScript

    画像の指定した部分を中心にレスポンシブ化できるjQueryプラグイン「FocusPoint」

    FocusPointというjQueryプラグインを使えば、画像の指定し…

  4. ARIA TOOLTIP

    JavaScript

    WAI ARIAを活用したユーザーフレンドリーなツールチップ実装「ARIA TOOLTIP」

    ARIA TOOLTIPはWAI ARIAを活用したユーザーフレンドリ…

  5. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  6. LC Micro Slider

最近の記事

  1. OWL-WDDESK01
  2. ワンタッチ着脱フィルターキット
  3. Soundcore Ace A1
  4. cheero USB-C PD Charger 60W

アーカイブ

PAGE TOP