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」の紹介でした。

関連記事

  1. FixedContent.js

    JavaScript

    モバイルフレンドリーなコンテンツ固定のjQueryプラグイン「FixedContent.js」

    FixedContent.jsはスクロールしてもコンテンツを固定してく…

  2. Random Text Shuffle

    JavaScript

    シャッフルしながらテキストが表示される「Random Text Shuffle」

    Random Text Shuffleは文字をシャッフルしながらテキス…

  3. no-image

    JavaScript

    タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」

    simplelightboxはレスポンシブ対応でタッチフレンドリーなl…

  4. linkunderline

    JavaScript

    テキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」

    linkunderlineは、テキストリンクにアンダーラインを引くアニ…

  5. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

  6. formToWizard

    JavaScript

    ステップごとに入力可能なフォームを実装できる「formToWizard」

    formToWizardはステップごとに(ウィザード)入力可能なフォー…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP