電子書籍の厳選無料作品が豊富!

レスポンシブメニューIE7以降対応のJQueryプラグインということで紹介されていた下記のFlexnavを実装したのですが、実際はIE7,8は対応していません。
具体的に言いますと、横幅800pxのブレイクポイントに縮めても、表示が切り替わりません。
そのままのメニューが横に小さくなるだけです。
自分で実装したものだけでなく、サンプルサイトをIE7.8で確認しても同じです。
このプラグインをいじってIE7.8にも対応させられるのなら、その方法をご教示いただきたいのですが、他に、「本当に」レスポンシブでIE7.8対応のこういった多階層ドロップダウンメニューのプラグインがあればオススメを教えてください。どうぞ宜しくお願い致します。
ちなみにモダンブラウザやIE9以降は正しく表示が切り替わります。
http://jasonweaver.name/lab/flexiblenavigation/

A 回答 (3件)

FLEXNAVはダメそうですね。

プラグインを紹介しているサイトのトップページがそもそも動かないとか、論外だと思います。

Bootstrapは広く使われているのでいいと思います。メニューだけをケチ臭いことを言わず、ページレイアウト全体をレスポンシブWebデザインにしてくれます。

IE7だとわずかに崩れますがほぼ問題なく動きます。IE8以降であれば全く問題ありません。

Bootstrap
http://getbootstrap.com/
Components · Bootstrap
http://getbootstrap.com/components/
    • good
    • 0
この回答へのお礼

回答ありがとうございます。1番目の回答者の方にもお伝えしたのですが、SlickNavで実装できました。しかしわたしのミスかな?と思うとすっきりしなかったので、ありがとうございました。
Bootstarpはレスポンシブ制作のワイヤーなどにもよく使われているようですね。
12分割されているのがまだ慣れないのですが、覚えれば楽なのだろうなと思います。

ありがとうございました。

お礼日時:2014/06/30 17:32

jqueryではなく、mediaqueryの話だと思うのですが・・


IE,IE8はCSS3のmediaqueryに対応していませんから、javascriptを使用しなければなりません。
 いずれにしてもスマホを含めてブラウザ間の誤差をなくするためには
・strictで作成する。
・標準モードで起動するようDOCTYPEを正しく指定する。
・media=screenに対してはリキッドで製作する。
 ・・・mediaquery使わなくても利用できるように
・mediaがhandheld(携帯電話)、print(プリンー)に対しては指定しない。

 ここまでが大原則です。

 そのうえで
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/t …
<![endif]-->
 とjavascriptを読みこんだあと、普通にmediaqueryで指定するほうが楽です。

この回答への補足

回答有り難うございます。
mediaqueryも、<!--[if lt IE 9]>~..の記述もしているんです。
実際他のプラグインを利用しましたら実装できましたので、やはりプラグインの問題のようです。

補足日時:2014/06/30 20:56
    • good
    • 0

jQuery2.x系を使ったとかいうオチではないですかね?

    • good
    • 0
この回答へのお礼

違います 笑。
しかし回答ありがとうございます。
結局SlickNavというプラグインに変えましたら、IE7も対応で、メニューの切り替えもできたのですが、原因はFlexnavというプラグインの不具合なのでしょうか。たまにプラグインによってはサイトで紹介されていても、実際実装してみると異なる..という解説も目にするので...。
メニューの実装自体は他のプラグインでできたのですが、こちらが間違っているならFlexnavのIE7対応でも実装できた方がいると思うので、もう少し回答待ちます。

それと、わたしはIE7は実機ではなく、開発者ツールを使っているので、その辺も少し心配です。確認ツールの不備かも、という。

お礼日時:2014/06/30 15:22

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!