Web作成再挑戦 / Spryでメニューバー

試験的にSpryMenuBarを使ってみる

AdobeのAjaxフレームワーク「Spry」のメニューバーを導入してみる。

やってみたのはSpryMenuBar、簡単にスライドできるメニューバーができた。

サイトが多少なりとも重くなることと、ブラウザによってイマイチ揃わないのは致し方ないが、画像表示用に設置している Liteboxで問題が。

条件としては、IEでメニューを表示した後にLiteboxで画像表示させた際に発生。

初期読み込み時では大丈夫。

また FirefoxやNetscapeでは問題なし。

SpryMenuBarのCSSで IEのハックが記述されていたので、CSSをいじってみたり、はたまた Flashが透過を突き抜ける対策を参考にしてLightbox.jsの変更もしてみたが堂々巡り。

結局のところ対策は単純であった。

SpryMenuBarの Z-index値が Liteboxの値よりもでかかっただけ。

SpryMenuBar用のZ-indexを10代に小さくしたらちゃんと透過の下におさまってくれた。

Z-indexの値だけに本家の Lightboxでも問題でると思う。