2013-12-01 2 views
0

У меня есть раскрывающееся меню для мобильных устройств, которое не будет оставаться закрытым при изменении размера окна или перетаскивании в большее или меньшее измерение. Возможно ли, чтобы меню свернулось только до тех пор, пока меню не откроется, когда вы нажмете на него?Складное меню не будет оставаться закрытым при изменении размера окна

Меню сбрасывается при загрузке страницы, однако, как только вы перетаскиваете окно, чтобы изменить его размер, меню открывается самостоятельно.

Спасибо за помощь!

------->

<script> 
     $(function() { 
      var pull  = $('button.open-menu'); 
       menu  = $('nav ul'); 
       menuHeight = menu.height(); 

      $(pull).on('click', function(e) { 
       e.preventDefault(); 
       menu.slideToggle(); 
      }); 

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

<!----------------------------MOBILE NAVIGATION MENU-----------------------------------> 
<div class="mobile-nav-container"> 
<button class="open-menu"><img src="images/menu-button.svg"></button> 
<nav class="nav-menu"> 
<ul class="nav-menu"> 
<li class="mb-nav"><a href="current-journal.html">CURRENT JOURNAL</a></li> 
<li class="mb-nav"><a href="subscribe.html">SUBSCRIBE</a></li> 
<li class="mb-nav"><a href="submit.html">SUBMIT MATERIAL</a></li> 
<li class="mb-nav"><a href="submission-guidelines.html">SUBMISSION GUIDELINES</a></li> 
<li class="mb-nav"><a href="http://3elementsreview.blogspot.com">3E BLOG</a></li> 
<li class="mb-nav"><a href="past-journals.html">PAST JOURNALS</a></li> 
<li class="mb-nav"><a href="about-3elements.html">ABOUT 3ELEMENTS</a></li> 
<li class="mb-nav"><a href="the-editors.html">THE EDITORS</a></li> 
<li class="mb-nav"><a href="contact.html">CONTACT</a></li> 
</ul> 
</nav> 
</div><!----------------------MOBILE NAV CONTAINER END-------------------------------> 
CSS 

.mobile-nav-container { 
    position:relative; 
    background-color:#252525; 
    top:-5px; 
    width:100%; 
    height:40px; 
    border-bottom:5px solid #ffd09d; 
    z-index:300; 
    display:inline-block; 
} 

ul.nav-menu {/*navigation menu as a whole*/ 
    position:relative; 
    top:13px; 
    margin:0px; 
    padding:0px; 
    background-color:#252525; 
    width:100%; 
    border-bottom: 2px solid #ff6000; 
} 

nav ul li a {/*navigation list items*/ 
    position:relative; 
    top:0px; 
    padding-left:5%; 
    padding-right:5%; 
    padding-top:3px; 
    line-height:1.9em; 
    border-bottom: 1px solid #313131; 
    width:90%; 
    height:30px; 
    display:inline-block; 
    font-family:myriad pro; 
    font-size:1em; 
    list-style:none; 
    transition:300ms; 
    -webkit-transition:300ms; 
} 

nav ul li {/*drop down list padding settings*/ 
    list-style:none; 
} 

nav li a {/*main navigation text color and padding settings*/ 
    position:relative; 
    top:0px; 
    margin:0px; 
    padding:0px; 
    color:#ffd09d; 
    text-decoration:none; 
} 

.nav-menu li:active a {/*main navigation TEXT HOVER effects*/ 
    color:#ff6000; 
    background-color:#beb29a; 
    transition:400ms; 
    -webkit-transition:400ms; 
} 

.nav-menu li:hover a {/*main navigation TEXT HOVER effects*/ 
    color:#ff6000; 
    transition:300ms; 
    -webkit-transition:300ms; 
} 

button.open-menu { 
    position:relative; 
    top:5px; 
    left:5%; 
    margin:0px; 
    padding:0px; 
    width:40px; 
    height:29px; 
    display:inline-block; 
    outline:none; 
    background-color:#353535; 
    border:2px solid #424242; 
    box-shadow:0px 0px 2px #000; 
    cursor:pointer; 
} 

button.open-menu:active { 
    cursor:pointer; 
    border:2px solid #353535; 
    box-shadow:none; 
} 
+0

вам нужно пересмотреть, почему вы делаете 'menu.removeAttr ('стиль'); '. Если элемент скрыт 'hide()' или 'slideUp' или аналогичным, он будет иметь встроенный стиль, который скрывает его. Предлагает переключить класс для условий 2 размера – charlietfl

ответ

0

Я принял совет из комментария выше, и удалить одну строку кода

<script> 
     $(function() { 
      var pull  = $('button.open-menu'); 
       menu  = $('nav ul'); 
       menuHeight = menu.height(); 

      $(pull).on('click', function(e) { 
       e.preventDefault(); 
       menu.slideToggle(); 
      }); 

      $(window).resize(function(){ 
       var w = $(window).width(); 
       if(w > 320 && menu.is(':hidden')) { 
        menu.removeAttr('style');   <<<-----I REMOVED THIS LINE----- 
       } 
      }); 
     }); 
</script> 
Смежные вопросы