Movable Type 備忘録

 Color Fading Menu with jQuery

  • Nov152008
  • Vote:
    http://bizcaz.com/archives/2008/11/15-225805.php
  • Categories: jQuery
  • Tags:
  • Social Bookmark

こんばんわ^^

お友達に頼まれてたテンプレートセットを時間の合間みてせっせと作ってたのですが、だいぶ完成してきました。
お友達といっても 1 回り以上年上の方なので、一応歳相応に落ち着いた、シックなものを･･･ということでいろいろ配色してます。

黒系統が好きなわたしですが、好みが合って気に入ってくれると嬉しいな (●´∀｀●)

さて、久々に jQuery を使ったカスタマイズのご紹介です。
ナビゲーションバーなどのメニューにオススメの一品かもです。

サンプルを表示できませんでした。

上記メニューは以下のページで配布されてる jQuery 用のスクリプトを使ってます。

使い方

使い方はすっごくシンプルです。
基本的に以下のようなかんじでリンクを並べるだけです。あとは JavaScript がやってくれちゃいます。

Color Fading Menu

  1. <div id="pageBody">
  2.     <a class="hoverBtn" href="http://●●●.com">●●●</a>
  3.     <a class="hoverBtn" href="http://■■■.com">■■■</a>
  4.     <a class="hoverBtn" href="http://▲▲▲.com">▲▲▲</a>
  5. </div>

そうすると、以下の青字のように hoverBtn というボックスでラッピングされます。

Color Fading Menu

  1. <div id="pageBody">
  2.     <div class="hoverBtn">
  3.         <a class="hoverBtn" href="http://●●●.com">●●●</a>
  4.         <a class="hoverBtn" href="http://■■■.com">■■■</a>
  5.         <a class="hoverBtn" href="http://▲▲▲.com">▲▲▲</a>
  6.     </div>
  7. </div>

で、もう一つホバー & 透過用の div 要素が作成されてまして、それがフェードアウトされてサンプルのように見えるっていうしくみっぽいです。

  1. div.hoverBtn a {
  2.     position: relative;
  3.     z-index: 2;
  4.     display: block;
  5.     width: 100px;
  6.     height: 30px;
  7.     line-height: 30px;
  8.     text-align: center;
  9.     font-size: 1.1em;
  10.     text-decoration: none;
  11.     color: #000;
  12.     background: transparent none repeat-x 0 0 scroll;
  13. }

jQuery の curCSS が使用されてまして、スタイルシート中の上記青字の部分( div.hoverBtn a 要素 )のバックグラウンドカラーを transparent からお好みの配色に変更すると背景がフェードアウトされるのではなく、テキストのみがフェードされるようになります。

サンプルを表示できませんでした。

これマジすっごいです (●＞∀＜●)／
お試しあれぇ～。

 Trackback Pings(1)

from Ys DESIGN

メニューにマウスオーバーすると、背景画像と文字色がフェードで切り変わるメニュー「Color Fading Menu」のご紹介記事です。 Color Fa...

Tracked on August 12, 2009

 Comments(1)

#1: Posted by Author Profile Page 哲やん @ November 16, 2008 [REPLY]
user-pic

依頼人じゃないんですけど、年齢の話題に「ドッキリ」しました（笑）

 

 Post a Comment

 

コメント用フィード