Всем привет. Возникла еще одна проблема.
Когда расширение экрана меньше чем 540 пикселей, скрывается главное меню.
Появляется кнопка.
При клике на кнопку выезжает главное меню, которое раньше скрывалось.
Проблема в том, что когда я, открываю меню и закрываю его, и меняю расширение на больше чем 540 пикселей, то меню просто не появляется.
Логику я понимаю, и понимаю почему оно скрытое.
Но как это решить, не по силам.
<div class="menu"> <!-- Menu -->
<div class="login-menu"> <!-- Login Menu -->
<ul id="sub-menu-login"> <!-- Login Sub Menu -->
<li>
<a href="#">Stas Staseg</a>
<ul>
<li><a href="#">My Profile</a></li>
<li><a href="#">My Swivl</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Sign Out</a></li>
</ul>
</li> <!-- Login Sub Menu END-->
</ul>
</div>
<ul class="navigation"> <!-- Navigation-->
<li>
<a href="#">My Feed</a>
<span>Videos shared <br> with me</span>
</li>
<li>
<a href="#" class="active">Library</a>
<span>My private uploaded <br> content</span>
</li>
<li>
<a href="#">Shared</a>
<span>My shared content</span>
</li>
<li>
<a href="#">Groups</a>
<span>Create and manage <br> sharing lists</span>
</li>
</ul> <!-- Navigation END-->
</div>
<div class="collapse-nav"></div>
// Upload buttons
$(".upload-video > a, .upload-slides > a").click(function (e) {
var wrap = $(this).next(".drop-block-wrap")[0];
$(".drop-block-wrap").filter(function() {return this !== wrap}).hide();
$(this).next(".drop-block-wrap").toggle();
});
//Callapse
$(".collapse-nav").click(function(){
$('ul.navigation').toggle();
$('.header-wrap').toggleClass("height207");
});
//If width
function windowSize(){
if ($(window).width() > '526'){
//$('ul.navigation').css({'display':'block'});
//Если здесь написать, что бы меню показывалось, то при изменении расширения экрана меню будет видно постоянно. Работает не корректно.
} else {
}
}
$(window).on('load resize',windowSize);
});
В какую сторону копать?
