ちょっと変わったCSSナビゲーション
マウスオーバーしたときに画像が入れ替わるロールオーバー効果って昔はJavascriptを使っていたことが多かったけど、最近ではCSSでその効果を演出することは当たり前になってきてますよね。
CSSによるロールオーバー効果っていうのもいろいろと格好いいものが多くてそのスクリプトも公開されていますが、今回のはちょっと変わってて格好いいです。久しぶりにあれこれ触ってサンプルまで作ってしまいました。
Advanced CSS Menu Trick - Web Design Marketing Podcast & Blog
普通、マウスオーバーした画像だけを入れ替えるのですが、このスクリプトはマウスオーバーしている以外の部分の画像も入れ替えてしまいます。マウスオーバーされているところが、クローズアップされていてナビゲーションとしてもとてもいいんじゃないでしょうか？
Advanced CSS Menu Trick - Web Design Marketing Podcast & Blogで、ソースの公開と解説がありますが、全て英語なので訳すのがちょっと面倒だったのと、今作ってるサイトのメニューに使ってみようと思ったので、自分でサンプルを作っちゃいました。
Advanced CSS Menu Trick サンプルページ
使う画像をAdvanced CSS Menu Trick - Web Design Marketing Podcast & BlogのDemoページのように凝ったものにすれば、かなり格好いいですよね。
ただし、CSSだけではIE6.0以前のブラウザでは効果はでないので、やっぱりJavascriptによるHackが必要です。これに関してもcssHover.htcとしてソースを公開してくれています。そのままコピーして使うことができます。
ご本家のDemoページはこちら
Demoページではありますけど、普通に公開されているページでそのデザインもすごく格好いいです。スクリプトを使って動的に作られてるんですが、すっきりとしていて軽いです。
一応、私がカスタマイズしたサンプルページをダウンロードできるようにしましたので、よければダウンロードして使ってみてください。
Advanced CSS Menu Trick サンプルページ ダウンロード
