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

サイドメニューのタイトルにも光るエフェクトを

前回の記事 ではナビゲーションメニューに Buttons like Windows 7 スクリプトを適用しましたが、今回はサイドメニューのタイトルにも適用したのでその方法を紹介します。

ナビゲーションのように連続するボタンでなく、単独のボタンに適用する場合の参考になると思います。

当ブログでは、サイドバーのタイトルをクリックすることでパーツを折りたたんだり展開したりするjQueryスクリプトを組んでいますので、その機能をユーザーにアピールする為に、いままでホバー時にへこむようCSSで設定してましたが、統一感を出すためにこちらに変更してみました。前より格段にかっこよくなったと自分的には満足していますがいかがでしょうか。

SideMenuEfect.png

難易度:

単独のボタンやタイトルなど要素に組み込む方法は、Buttons like Windows 7 with JS & CSS のページにコード例が載っています。しかし、そのままでは、当ブログのサイドメニューのタイトルには適用できないのでいろいろ試行錯誤しました。

テンプレートのHTMLのプラグインのタイトル要素(h3)に class="win7" を追加して、さらにタイトルを <span>~</span> で囲みます。当ブログでは、下記のようになりました。

テンプレートのスタイルシートは、前回のコードの後に h3要素用のコードを追加しました。高さをオリジナルより低くしたので、背景画像の上位置も-4pxにしています。

スクリプトは前回のものから h3.win7 span 要素にも適用するように16行目を変更して、さらに23,24行目でタイトル要素のホバー時の画像位置を4px上へ移動してます。

追記: これで当初はうまく動作していたのですが、なぜか SyntaxHighlighter 2.0 を導入したら、IE6とIE7でサイドバーの方が動作しなくなりました。試行錯誤した結果、セレクターを $('.win7 a, h3.win7 span') と纏めて記述せずにコードを分割したら動作するようになりました。

さらっと書いてますが、これにたどり着くまで相当の試行錯誤を要しました。IEの非互換性には本当に苦労させられます。

上記の 16~36行目を下記に置換


拍手する

1 Comments

electric says...""

これをプラグイン1に実装して、さらにプラグイン3,記事にも実装したいのですが、やり方がわかりません・・・
現在使用しているテンプレートは、いたおさんが配布している共有テンプレートlightframeです。
返信お願いしますm(_ _)m

2010.04.29 06:21 | URL | #4ARdecsc [edit]

Leave a reply






Trackbacks

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