MS Access Tips/Sample and VBA and Blog customize etc...

マウスに光源が追随するナビゲーションバーを設置

かっこいい光るエフェクトのボタンを見つけたので当ブログに設置してみました。

Buttons like Windows 7 with JS & CSS

Mootools版とjQuery版があります。当ブログではもちろんjQueryの方です。

NaviBottom.gif

難易度:

下記のような画像をホバー時に表示させてマウスカーソルに追随するように移動させています。

active1.png

css は>Buttons like Windows 7 with JS & CSS のデモのものから下記のように変更しました。オリジナルの設定だと次の要素との間隔がプラウザによって異なるようになり、うまく調整できなかったのですが、.win7セレクタのスタイルに float:left; が入っていたのを削除したら解決しました。

スクリプトは下記のようになります。(この前にjQueryを読み込むスクリプトは記述しておいてくださいね)

これを headブロック内に挿入するか外部ファイルにします。

ナビゲーションのHTMLは下記のようにリストで記述します。

下記が現在の当ブログのHTMLコードです。


拍手する

9 Comments

HASE says...""

lightframeでやりましたけど、できませんでした。
どうすればいいですか?

2010.03.25 23:42 | URL | #- [edit]
hatena says..."lightframe?"

lightframe って、共有テンプレートですか。
具体的にはどのようにしましたか。
記述したHTMLをご提示ください。

2010.03.26 00:36 | URL | #5uE6dEgY [edit]
HASE says...""

旅行いってたのでおくれてしまいました。
すいません
というより、URLが多くておくれません

2010.04.01 15:00 | URL | #- [edit]
HASE says...""

メールで送りたいのですが・・・

2010.04.01 15:50 | URL | #- [edit]
hatena says..."CONTACT ME"

このブログのメニューバーの「CONTACT ME」をクリックするとメールフォームが開きます。そこから添付ファイルも遅れますので、よろしかったらご利用ください。

ただし、
何か分かればアドバイスはしますが、
原因を解明できるかどうかは自信がありません。
私も、この記事で紹介した参照先のコードを丸写ししただけですから。

2010.04.01 18:57 | URL | #5uE6dEgY [edit]
hatena says..."jQuery の読み込み"

HASE さん、メールでHTMLみました。

jQuery を読み込んでません。
下記を参考にHTMLでjQueryを読み込んでください。

jQuery 1.4.2 が出ていた
http://hatenachips.blog34.fc2.com/blog-entry-245.html

2010.04.01 21:54 | URL | #5uE6dEgY [edit]
HASE says...""

ありがとうございます。

できました!

2010.04.01 23:16 | URL | #- [edit]
HASE says...""

もう、しつこくてすいませんが、
こういう画像の作り方と、
各メニューごとに違う色を付ける方法を教えてください
お願いします

2010.04.02 07:34 | URL | #- [edit]
hatena says...""

画像は私もオリジナルのものをそのまま利用させていただいているので、作り方とかはわかりません。

違う色はオリジナルの下記のサイトを参考にしてください。
http://www.coders.me/lang/en/web-html-js-css/javascript/mootools/buttons-like-windows-7-with-js-css

2010.04.02 12:44 | URL | #5uE6dEgY [edit]

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/203-3f61df64
該当の記事は見つかりませんでした。