1ページ応答メニュー

Question

ul li aを使用して1ページ応答ドロップダウンメニューを作成し、ハンバーガーをクリックしてモバイルで閉じると、ulが正しく非表示になります。問題は、私はデスクトップのバージョンを表示し、ulが隠されているメニュー項目を選択するためにサイズを変更するときです。私はちょうどここにJS

メニューJS

(function($) { 
     $.fn.menumaker = function(options) { 
     var cssmenu = $(this), 
      settings = $.extend({ 
      format: "dropdown", 
      sticky: false 
      }, options); 
     return this.each(function() { 
      $(this).find(".button-mobile").on('click', function() { 
      $(this).toggleClass('menu-opened'); 
      var mainmenu = $(this).next('ul'); 
      if (mainmenu.hasClass('open')) { 
       mainmenu.slideToggle().removeClass('open'); 
      } else { 
       mainmenu.slideToggle().addClass('open'); 
       if (settings.format === "dropdown") { 
       mainmenu.find('ul').show(); 
       } 
      } 
      }); 
      cssmenu.find('li ul').parent().addClass('has-sub'); 
      multiTg = function() { 
      cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>'); 
      cssmenu.find('.submenu-button').on('click', function() { 
       $(this).toggleClass('submenu-opened'); 
       if ($(this).siblings('ul').hasClass('open')) { 
       $(this).siblings('ul').removeClass('open').slideToggle(); 
       } else { 
       $(this).siblings('ul').addClass('open').slideToggle(); 
       } 
      }); 
      }; 
      if (settings.format === 'multitoggle') multiTg(); 
      else cssmenu.addClass('dropdown'); 
      if (settings.sticky === true) cssmenu.css('position', 'fixed'); 
      resizeFix = function() { 
      var mediasize = 960; 
      if ($(window).width() > mediasize) { 
       cssmenu.find('ul').show(); 
      } 
      if ($(window).width() <= mediasize) { 
       cssmenu.find('ul').hide().removeClass('open'); 
      } 
      }; 
      resizeFix(); 
      return $(window).on('resize', resizeFix); 
     }); 
     }; 
    })(jQuery); 

    (function($) { 
     $(document).ready(function() { 
     $("#cssmenu").menumaker({ 
      format: "multitoggle" 
     }); 
     $("#cssmenu ul li a").on('click','li', function() { 
      $(".button-mobile").removeClass('menu-opened'); 
     // $(this).next('ul').show(); 
     }); 
    }); 
    })(jQuery); 

HTML

<header> 
     <div class="container logo-nav"> 
      <div class="sixteen columns"> 
       <div class="logo"></div> 
       <nav id="cssmenu"> 
        <div class="button-mobile"></div> 
        <ul> 
         <li><a href="#about" class="smoothScroll">ABOUT</a></li> 
         <li><a href="#services" class="smoothScroll">SERVICES</a></li> 
         <li><a href="#research-media" class="smoothScroll">RESEARCH-MEDIA</a></li> 
         <li><a href="#creative" class="smoothScroll">CREATIVE</a></li> 
         <li class="buttonfill"><a href="#contact" class="smoothScroll">CONTACT</a></li> 
        </ul> 
       </nav> 
      </div> 
     </div> 
     <hr> 
    </header><!-- End Header --> 

私はある...唯一のモバイルバージョンのためのULをターゲットにする方法を見つけ出すことはできませんブラウザの960にnavのモバイルバージョンが表示されている場合にのみ適用されるulにjs経由でIDまたはクラスを通知する必要がありますが、コードの設定方法がわかりません。

$("#cssmenu ul").css('display', ''); 

Answer 1

は、私が使用してこの問題を解決することができました。例：@media（最大幅：560ピクセル）{/ *モバイル版のCSSの配置* /}