IE7,8対応のレスポンシブメニューを探しています
- IE7以降に対応したJQueryプラグインのFlexnavを試してみましたが、IE7,8では正しく表示されません。
- 自分の実装だけでなく、サンプルサイトも同様の問題が発生しました。
- IE7,8にも対応したレスポンシブな多階層ドロップダウンメニューのプラグインをおすすめいただけませんか?
- ベストアンサー
レスポンシブメニューIE7以降対応のJQueryプ
レスポンシブメニューIE7以降対応のJQueryプラグインということで紹介されていた下記のFlexnavを実装したのですが、実際はIE7,8は対応していません。 具体的に言いますと、横幅800pxのブレイクポイントに縮めても、表示が切り替わりません。 そのままのメニューが横に小さくなるだけです。 自分で実装したものだけでなく、サンプルサイトをIE7.8で確認しても同じです。 このプラグインをいじってIE7.8にも対応させられるのなら、その方法をご教示いただきたいのですが、他に、「本当に」レスポンシブでIE7.8対応のこういった多階層ドロップダウンメニューのプラグインがあればオススメを教えてください。どうぞ宜しくお願い致します。 ちなみにモダンブラウザやIE9以降は正しく表示が切り替わります。 http://jasonweaver.name/lab/flexiblenavigation/
- hpineh0913
- お礼率55% (39/70)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
FLEXNAVはダメそうですね。プラグインを紹介しているサイトのトップページがそもそも動かないとか、論外だと思います。 Bootstrapは広く使われているのでいいと思います。メニューだけをケチ臭いことを言わず、ページレイアウト全体をレスポンシブWebデザインにしてくれます。 IE7だとわずかに崩れますがほぼ問題なく動きます。IE8以降であれば全く問題ありません。 Bootstrap http://getbootstrap.com/ Components · Bootstrap http://getbootstrap.com/components/
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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/trunk/css3-mediaqueries.js"></script> <![endif]--> とjavascriptを読みこんだあと、普通にmediaqueryで指定するほうが楽です。
補足
回答有り難うございます。 mediaqueryも、<!--[if lt IE 9]>~..の記述もしているんです。 実際他のプラグインを利用しましたら実装できましたので、やはりプラグインの問題のようです。
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2281)
jQuery2.x系を使ったとかいうオチではないですかね?
お礼
違います 笑。 しかし回答ありがとうございます。 結局SlickNavというプラグインに変えましたら、IE7も対応で、メニューの切り替えもできたのですが、原因はFlexnavというプラグインの不具合なのでしょうか。たまにプラグインによってはサイトで紹介されていても、実際実装してみると異なる..という解説も目にするので...。 メニューの実装自体は他のプラグインでできたのですが、こちらが間違っているならFlexnavのIE7対応でも実装できた方がいると思うので、もう少し回答待ちます。 それと、わたしはIE7は実機ではなく、開発者ツールを使っているので、その辺も少し心配です。確認ツールの不備かも、という。
関連するQ&A
- jQueryを利用してドック型のメニューに関して
始めまして。 現在、サイトを作成中なのですが、 グローバルメニューをjQueryのiconDockプラグインを 利用してたjQueryのiconDockプラグインを利用してドック型のメニューを考えています。 横幅を固定したドック型のメニューはどの様にすれば可能でしょうか。 通常は該当アイコンが拡大した時、左右(上下)にメニューエリアが拡がってしまいますが、それを800px内で行いたいのです。 何卒宜しくお願いします。
- 締切済み
- AJAX
- jquery
初心者になります。 jqueryなのですが スライド式のメニュー表示で その他のブラウザではスライド表示されますが Ieはクリックしても全然スライドしません jqueryはIeには未対応なのでしょうか? それとも何か設定があるのでしょうか? すみませんよろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryアコーディオン(IE6の対応)
どなたかご教授頂けると嬉しいです。 http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-easy-accordion.html 上記のjQueryがIE6対応とあるのですが、実際に表示を確認してみると崩れてしまっています。 どうにかIE6で正常に表示出来ないか試行錯誤しているのですが上手くいきません……。 もしわかる方がおられましたら教えてください。 宜しくお願いします。
- ベストアンサー
- JavaScript
- 多階層ドロップダウンのスマホ化について
現在PCサイトにおいて多階層のドロップダウンメニューのスマホ対応を、jQueryプラグインを使うことによって実装致しました。 しかし一つ問題があるのですが、スマホ化した際に、liの親要素は全てリンクがヌルリンクになり、タッチして下の階層が開ける仕様になっているため、PCの方ではコンテンツのあるメニューの一部が開けなくなってしまいました。 他のプラグインやbootsstrap等の例も見たのですが、やはりスマホでは親要素はクリックできるようになっているため、ヌルリンクになっているようです。 メニューの構成自体を変えた方が良いのでしょうか?それとも他に実装できる方法があれば、解説サイトのリンクだけでも良いのでご教示お願い致します。
- 締切済み
- JavaScript
- jquery
jquery でレスポンシブなメニューを勉強しています。 下記のURLを参考に作ってみたのですが、この場合のjqueryって(HTML要素の)表示の切り替えをしているのですよね? 簡単ではないでしょうが手作業で ライブラリ を使わずできますか? またどのようにすればよいでしょうか? https://rico-notes.com/programming/html/header-responsive/
- ベストアンサー
- JavaScript
- jqueryのプラグインdroppy.jsについて
WEBデザイン初心者です。 グローバルナビ部分を、ドロップダウンリストにしたいなと思い、jqueryで実装しようと思っています。 調べてみたところ、よく使われているプラグインにdroppy.jsというものがありましたが、 どの紹介サイトでもjQueryのサイトにリンクされています。 ただ、そこから、ダウンロードファイルが見つかりません。 もしかして、jQueryサイトでは取り扱わなくなったプラグインなのでしょうか。 あまりにもdroppyの事例が多いので、できれば導入したいのですが、分かる方いれば、よろしくお願いします。
- ベストアンサー
- JavaScript
- IE6で動かないjQueryはどのようにすれば?
jQueryであるサイトを作っているのですが、IE6を使用した場合動かなくなってしまい困っております。 今更そんな古いブラウザをサポートしなければ良いのにと言われそうですが・・・IE6~9の混在環境のため困っております・・・比率は数%なのですが・・・ 使っているプラグインはcoda-sliderです。http://kevinbatdorf.github.com/codaslider/ これがどうしてもスライドできずかつパネルがすべて表示されてしまいます。 (ほぼサンプルどおりのソース) とりあえず一番上にあるパネルだけでも表示されるようになれば上出来なのですが・・・ 詳しい方教えていただけませんでしょうか?
- ベストアンサー
- JavaScript
- WordPressのプラグインとjQueryのそれ
jQueryの存在を知り、WordPressでスライド画像表示なんかが簡単に実現できることを知りました。さらには、WordPressのプラグインとして直接実装も可能なようですが、両方可能な場合、どちらを選べばよいのでしょうか? Nivo Slider, ColorBox, FancyBoxを手始めに候補としています。 例えば、jQueryプラグインとして実装したほうが重くならない、などといった違いがあるのでしょうか?比較しつつ教えていただけると助かります。
- ベストアンサー
- ブログ
- IEでのjQuery の実装について
教えてください。 現在、jQuery の jqplot を利用してグラフの表示を検討しております。 HTML(ブラウザ:IE,chrome)での表示は問題なく行われますが、 HTMLをASPファイル内に組み込んでページを表示させようとすると chromeでは問題なくグラフが表示されますが、IEではエラーが発生します。 IEでも動作するようにするためのアドバイスをお願いします。 以下、ロジックです。 <!-- jQuery グラフ表示部 ここから --> <script language="javascript" type="text/javascript" src="../jQuery/jquery-1.9.0.min.js"></script> <!--[if lt IE 9]> <script language="javascript" type="text/javascript" src="../jQuery/excanvas.min.js"></script> <![endif]--> <script language="javascript" type="text/javascript" src="../jQuery/jquery.jqplot.min.js"></script> <script language="javascript" type="text/javascript" src="../jQuery/jqplot.barRenderer.min.js"></script> <script language="javascript" type="text/javascript" src="../jQuery/jqplot.categoryAxisRenderer.min.js"></script> <link rel="stylesheet" type="text/css" href="../jQuery/jquery.jqplot.min.css" /> <script> jQuery( function() { jQuery . jqplot( 'jqPlot-sample', [ [ [ '4月', 65 ], [ '5月', 72 ], [ '6月', 74 ], [ '7月', 63 ], [ '8月', 85 ], [ '9月', 90 ] ] ], { animate: true, seriesDefaults: { renderer: jQuery . jqplot . BarRenderer, }, axes: { xaxis: { renderer: jQuery . jqplot . CategoryAxisRenderer, } } } ); } ); </script> <!-- jQueryグラフ表示部 ここまで --> html部分 <div id="jqPlot-sample" style="height: 300px; width: 300px;"></div>
- 締切済み
- JavaScript
- レスポンシブWEBデザイン jsの指定について
レスポンシブWEBデザインで、PC用に指定しているjQueryプラグインを、スマホでは指定しない方法を知りたいと思っています。 例えば、640px以下はjQueryプラグインを動かさない、といった感じです。 ご教授の程、よろしくお願いします。
- ベストアンサー
- CSS
お礼
回答ありがとうございます。1番目の回答者の方にもお伝えしたのですが、SlickNavで実装できました。しかしわたしのミスかな?と思うとすっきりしなかったので、ありがとうございました。 Bootstarpはレスポンシブ制作のワイヤーなどにもよく使われているようですね。 12分割されているのがまだ慣れないのですが、覚えれば楽なのだろうなと思います。 ありがとうございました。