RSS横に飛び出るjQueryメニュー・Horizontal Slide Out MenuをIE対応にする
Cat: » WEBデザイン, cssやプログラミング
Day:7月 22, 2010
昨日書いたjQueryのメニューの
Horizontal Slide Out Menuという
横に飛び出るcssメニューですが、
デフォルトではIEで表示が崩れて
います。これをIEでも実装出来る
ようにします。
メールを頂いたので以下のjQuery+cssメニューをIEに対応させる方法を。
Horizontal Slide Out Menu
Horizontal Slide Out Menuはこの記事の一番下です。IEだとこのように表示が崩れています。
デフォルトでは以下のようにli aにfloatが指定されています。
.mh_wrapper ul li a{
text-decoration:none;
cursor:pointer;
display:block;
float:left;
margin:0px;
text-indent:0px;
padding:0px 10px 0px 3px;
line-height:40px;
height:40px;
text-indent:10px;
letter-spacing:1px;
color:#ddd;
background-color:#525252;
text-shadow:1px 1px 1px #000;
border:1px solid #333;
border-left:none;
}
これだけだとIEではうまく表示されないのでliに直接floatを指定。
cssに以下を追加します。
.mh_wrapper ul li{
float:left;
}
IE6のキャプチャです。↓
jQueryプラグインを使いたいけど、IEで確認したら、動くは動くけど表示が崩れてた、というケースは非常に多く見かけますが、cssで対応できる場合も多々あります。
以前、CSS-TRICKSのStart/Stop Sliderというプラグインを使用する機会があったのですが、これも以下のようにIE6だけ表示が崩れていました。
この場合はデフォルトでは以下のようになっている部分
#mover{
width: 2880px;
position:
relative;
}
IE6だけ崩れているのでcssハックを使います。
#mover{
width: 2880px;
position: relative;
_width: auto;
_position: absolute;
}
これで以下のように、IE6の表示が直ります。
IEで表示が崩れるのはある意味当たり前なので、jsは動作するようでしたら、諦めずに挑戦してみるといいかもしれません。僕のようにjsの知識が乏しくても何とかなるケースもありますし、やはり使いたいですしね。
What a great resource! Exercise Balls