MooToolsライブラリのFancy menuです。
現在制作のクライアントサイトでmenuの見せ方を検討していましたが、flashではなくても動きのある感じをだしたい。
ということで、web creaters9月号に載っているMooToolsライブラリのFancy menuをベースに制作することにしました。
例:↓
Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu内のzipファイルでサンプルデータがあります。
また、日本のウェブデザイナーの方のブログGood Sleep: MooToolsのFancy menuに非常にわかりやすく記載があるのでこっちの方が参考になるかもしれません。というかこちらを参考にさせてもらいました。非常に助かりました。
詳しくは上記サイトを見ればいいのですが、1点だけ補足(忘れないように自分のためにね)。
menuのなかのマウスポイントにあわせて動く画像ファイルの位置設定で
position: absolute;
の設定があるんですが、
サイトが中央に表示されるパターンの場合、
body直下のいわゆるcontainerとかにあたる箇所を position: relative; にしておかないとその動く画像ファイルがcontainerを通り越してブラウザの左端からはじまってしまうということです。
左寄せのサイトならまあ無視してもいいと思います。
ということで、その製作中サイトに実装したところで今日は寝ます...。