レスポンシブ・ナビゲータレスポンシブ・モードで起動し、再度サイズを変更するとメッセージが表示される

Question

レスポンシブ・ナビゲーションを構築しようとしていますが、以下の手順を実行したときに表示が乱れているようです： 1.ナビゲーションのサイズを940px 2.メニューを有効にします 3.次にブラウザのサイズを940ピクセル以上に再調整します。 4.メニューが再びインラインではありません。それはすべて台無しです。

私が作成するコードは次のとおりです。また、上codepen：https://codepen.io/rezasan/pen/YqjNMg HTML：

<header> 
    <nav class="clearfix"> 
    <div class="pullmenu"> 
    </div> 
    <ul class="clearfix"> 
     <li><a>About</a></li> 
     <li><a>Services</a></li> 
     <li><a>Products</a></li> 
    </ul> 
    <div class="logo"> 
     <a><img src="img/site_assets/logo_nav.png"></a> 
    </div> 
    <ul> 
     <li><a>Media</a></li> 
     <li><a>News</a></li> 
     <li><a>Contact</a></li> 
    </ul> 
    </nav> 
</header> 

CSS：

header { 
     position: fixed; 
     z-index: 1; 
     width: 100%; 
    } 

    .logo { 
     display: inline-block; 
     vertical-align: top; 
    } 

    .logo img { 
     width: 145px; 
    } 

    .pullmenu { 
     display: none; 
    } 

    nav { 
     height: 110px; 
     width: 100%; 
     background: #fff; 
     letter-spacing: 0.2em; 
     font-family: 'brandon-grotesque'; 
     font-weight: 500; 
     position: relative; 
     text-transform: uppercase; 
    } 

    nav ul { 
     padding: 0; 
     margin: 0 auto; 
     display: inline-block; 
    } 

    nav li { 
     display: inline; 
     float: left; 
    } 

    nav a { 
     display: inline-block; 
     text-align: center; 
     line-height: 110px; 
     padding: 0px 20px; 
     font-size: 8pt; 
    } 

    nav a:hover { 
     text-decoration: underline; 
    } 

    @media screen and (max-width: 940px) { 
     .logo { 
     display: none; 
     } 
     nav { 
     height: auto; 
     } 
     nav ul { 
     width: 100%; 
     display: none; 
     height: auto; 
     } 
     nav li { 
     width: 100%; 
     float: none; 
     position: relative; 
     } 
     nav li a { 
     border-bottom: 1px solid #576979; 
     } 
     nav ul:last-child li:last-child a { 
     border-bottom: none; 
     } 
     nav a { 
     width: 100%; 
     text-indent: 25px; 
     } 
     .pullmenu { 
     display: block; 
     background: gray; 
     height: 110px; 
     width: 100%; 
     position: relative; 
     } 
    } 

はJQuery：

$(function() { 
    var pull = $('.pullmenu'); 
    menu = $('nav ul'); 
    menuHeight = menu.height(); 
    $(pull).on('click', function(e) { 
    e.preventDefault(); 
    menu.slideToggle(); 
    }); 
}); 

$(window).resize(function() { 
    var w = $(window).width(); 
    if (w > 940 && menu.is(':hidden')) { 
    menu.removeAttr('style'); 
    } 
}); 

台無しに位置合わせのために添付参照してください。

Answer 1

は解決策を見つけました。これは、slideToggleが2つのulを変更し、通常の画面に戻ってブロックとして表示するためです。 解決策は、2つのulを一緒にラップするdivを作成し、そのdivを制御対象として使用することでした。ブラウザの幅が短い場合、メディアクエリはクラスを非表示にします。 最後に、divをスライドトグルします。

http://codepen.io/rezasan/pen/YqjNMg

HTML

<header> 
     <nav class="clearfix"> 
     <div class="pullmenu">MENU 
     </div> 
     <div class="nav-group"> 
      <ul class="clearfix"> 
      <li><a>About</a></li> 
      <li><a>Services</a></li> 
      <li><a>Products</a></li> 
      </ul> 
      <div class="logo"><a><img src="http://placehold.it/200x100"></a></div> 
      <ul> 
      <li><a>Media</a></li> 
      <li><a>News</a></li> 
      <li><a>Contact</a></li> 
      </ul> 
     </div> 
     </nav> 
    </header> 

CSS

header{ 
      position: fixed; 
      z-index: 1; 
      width: 100%; 
    } 

    .logo{ 
     display: inline-block; 
     vertical-align: top; 
    } 

    .logo img{ 
     width: 145px; 

    } 

    .pullmenu{ 
     display: none; 
    } 

    nav { 
     height: 110px; 
     width: 100%; 
     background: #fff; 
     letter-spacing: 0.2em; 
     font-family: 'brandon-grotesque'; 
     font-weight: 500; 
     position: relative; 
     text-transform: uppercase; 
    } 

    nav ul { 
     padding: 0; 
     margin: 0 auto; 
     display: inline-block; 
    } 

    nav li { 
     display: inline; 
     float: left; 
    } 

    nav a { 
     display: inline-block; 
     text-align: center; 
     line-height: 110px; 
     padding: 0px 20px; 
     font-size: 8pt; 
    } 

    nav a:hover{ 
    text-decoration: underline; 
    } 

    @media screen and (max-width: 940px) { 
     .logo{ 
      display: none; 
     } 
     nav { 
      height: auto; 
     } 
     nav ul { 
      width: 100%; 
      height: auto; 
     } 

     .nav-group{ 
      display:none; 
     } 

     nav li { 
      width: 100%; 
      float: none; 
      position: relative; 
     } 
     nav li a { 
      border-bottom: 1px solid #576979; 
     } 

     nav ul:last-child li:last-child a { 
      border-bottom: none; 
     } 

     nav a { 
      width: 100%; 
      text-indent: 25px; 
     } 
     .pullmenu { 
      display: block; 
      background: gray; 
      height: 110px; 
      width: 100%; 
      position: relative; 
     } 
    } 

jQueryの

$(function() { 
     var pull = $('.pullmenu'); 
     menu  = $('.nav-group'); 
     menuHeight = menu.height(); 
     $(pull).on('click', function(e) { 
      e.preventDefault(); 
      menu.slideToggle(); 
     }); 
    }); 

    $(window).resize(function(){ 
     var w = $(window).width(); 
     if(w > 940 && menu.is(':hidden')) { 
      menu.removeAttr('style'); 
     } 
    });