0

CSSレスポンシブサイトを作成しています。

モバイル画面の解像度でドロップダウン メニューを非表示にするにはどうすればよいですか? そして、より大きな解像度で再び表示されますか? （私はjQueryが初めてです）

これは私のhtmlです：

<div id="menuContainer">

  <ul id="menu">

     <li id="about">

     <a href="about.html">About</a>

          <ul class="dropdown">

             <li>
               <a href="#">Link 1</a>
             </li>

             <li>
               <a href="#">Link 2</a>
             </li>

             <li>
               <a href="#">Link 3</a>
             </li>

          </ul>

      </li>

  </ul>

</div>

そして私のjQuery：

$('#menu li ul').css({
    display: "none",
  });
      $('#menu li').hover(function() {
        $(this)
          .find('ul')
          .stop(true, true)
          .slideDown('fast');
      }, function() {
        $(this)
          .find('ul')
          .stop(true,true)
          .fadeOut('fast');
      });
4

3 に答える 3

0

これはあなたが探しているものではないかもしれませんが、私が動的なページ サイズに使用したのはTwitter の Bootstrap ライブラリです。

無料で使えるAPIです。

そうでなければ、JQuery の実装を支援する技術的な知識がありません。

于 2013-03-21T21:42:36.190 に答える
0

CSS でメディア クエリを使用してみてください

@media only screen and (max-device-width: 480px) {
    .dropdown {  display: none; }

}

これは、画面サイズが 480px 未満の場合にのみ、そのクラスに display: none を適用することを意味します。

詳細については、この記事 ( http://css-tricks.com/css-media-queries/ ) をお読みください。これらは、Web サイトをレスポンシブにするための中心となります。

于 2013-03-21T21:41:39.817 に答える
0

メディア クエリを使用しない理由

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
/* Do whatever you want for this resolution */
}

上記のコメントのように、
これを試すことができます

$(window).resize(function() {
  var windowWidth = $(window).width(); //retrieve current window width
  var windowHeight = $(window).height(); //retrieve current window height

  // show/hide dropdown based on height/width values
});
于 2013-03-21T21:41:43.007 に答える