和田憲幸のブログ

札幌市白石区在住、個人事業のWebエンジニア 和田憲幸(45歳)のブログです。

nvIR.js

グローバルメニューを美しく彩るJavascriptを公開したヅラ。

2011-02-23 14:35:27
入力時間 / 10:38

その名もnvIR.js。ということで1年以上前から個人的には使っていたのですが、汎用的に昇華するのに1年かかりましたね。おかげでいろいろと改善できて割と満足しております。メニュー系ライブラリなんていまさら?みたいな所あると思いますが、ほら、私他の人が作ったライブラリ使ったこと無いからわからんのね。変だったらゴメンね。

以下、特徴。

クリック音が出せるぞ

audioタグ対応ブラウザ(Mobile Safari含む)の場合、クリック時にカチッと言わせる事ができる。wavとoggを取り替えるとそれ以外の音を出すこともできる。個人的にはウザい機能だなと自負している。

クリック時にも画像が変わるぞ

マウスオーバーとマウスアウトは一般的ですがAppleさんクラスになるとonclick時にもしっかりとヘコみエフェクトを付けてるわけです。これはパクらな!ということでonclick時にも画像が変わります。ちなみにonclick時、普通に画像を変えると押した時の画像がほぼ目視できないので0.2秒程度のインターバルを設けています。レスポンス悪くしてどーするよ!

プルダウンメニューがでるぞ

プルダウン(引っ張り下げる)メニューがでます。それだけです。ちなみに1コマだけ半スケです。

IRだぞ

imgタグじゃなく、当然のことながらImageReplaceです。HTMLがとにかく美しい。

異人さんにもやさしい

ブラウザのLanguageがjaまたはjpじゃない場合はIRをしません。よって機械翻訳をかけてもしっかり見える。これは外人さんに優しいぞ。はなから画像にすんな!って話もあるとは思いますが、そこはほら、MSゴシックが貧弱だから悪いってことで。

その他、いろいろありますが大体こんな感じかな。一番の特徴はやはりHTML構造が非常に美しく保てるということ。DreamWeaver標準のロールオーバー&アウトだとbodyタグの中まで汚染されますし、兎角HTMLコードが汚くなりがち。なによりもスクリプトにHTMLを合わせるのであれば破綻するのは自明の理です。

以前も書いたけどJavascriptはあくまでHTML構造体を補完するものであってスクリプト自体が主役なわけじゃないと思うのよねあたし。ということで使う機会があればぜひ使ってみていただきたい。

nvIR.js のダウンロード
nvIR.js のデモ

P.772