Basic Metro Dynamic jQuery Tab Menu

JavaScript

お洒落でスタイリッシュなタブメニュー「Basic Metro Dynamic jQuery Tab Menu」

Basic Metro Dynamic jQuery Tab Menuは、お洒落でスタイリッシュなタブメニューを実装できるのが特徴です。jQueryが使われています。さりげなく切り替わるアニメーションとシンプルなデザインがとてもクールですね。

Basic Metro Dynamic jQuery Tab Menu

Basic Metro Dynamic jQuery Tab Menu

デモでは黒で統一されたスタイリッシュなタブメニューが用意されています。各タブを選択すると、それに対応したコンテンツが表示されます。

フェードによるさりげないアニメーションで切り替わる姿がとてもお洒落ですね。コンテンツの量に応じてボックスの高さが変化するのもいいと思います。

また、デモのタブメニューは全体的にブラックで統一されていますが、CSSを弄ることで簡単にカラーを変更することができます。もちろん、カラーだけでなくフォントのサイズやボーダー、ボックスシャドウなど、細かい部分まで自分好みにカスタマイズすることも可能です。

ちなみに、JSのコードを見ると分かると思いますが、タブやコンテンツに記述するテキストはHTMLに記述するのではなく、JS側で記述します。

というわけで、クールでスタイリッシュなタブメニューを実装できる「Basic Metro Dynamic jQuery Tab Menu」の紹介でした。

RV gallery-slider軽量でタッチフレンドリーなギャラリースライダー「RV gallery-slider」前のページ

スプレッドシートのようなテーブルを実装できるjQueryプラグイン「Dynamic Table」次のページDynamic Table

関連記事

  1. Amigo Sorter Plugin

    JavaScript

    タッチ対応で直感的に並べ替えできるjQueryプラグイン「Amigo Sorter Plugin」

    Amigo Sorter Pluginは、タッチ対応で直感的にリスト項…

  2. jquery-calendar

    JavaScript

    レスポンシブ対応でスケジュール管理もできるカレンダー「jquery-calendar」

    jquery-calendarはレスポンシブに対応したスケジュール管理…

  3. Radial SVG Slider

    JavaScript

    放射状に切り替わるスライダーを実装できる「Radial SVG Slider」

    Radial SVG Sliderは、放射状に広がりながら切り替わるス…

  4. jQuery-LightBox

    JavaScript

    軽量でモバイルフレンドリーなLightbox実装「jQuery-LightBox」

    jQuery-LightBoxは、軽量でレスポンシブにも対応したモバイ…

  5. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  6. no-image

    JavaScript

    マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」

    Masked Circle Sliderは、円形のマスクエフェクトが素…

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP