画面サイズに応じてスケーリングするレスポンシブ メニューを作成しています。画面サイズが変更されたときに、いくつかの要素を非表示にして別の要素を再配置する必要があります。次に、画面サイズが元のサイズにサイズ変更されたときに、すべての要素を元の位置に戻す必要があります。
ウィンドウのサイズを変更すると、ちょっとうまくいきましたが、元の状態に戻すのに苦労しています
これは私のコードです:
**HTML* * *
<nav id="main-nav">
<ul class="menu">
<li class="login-mobile mobile"><a class="login" href="">login</a></li>
<li class="signup-mobile mobile"><a class="signup" href="">sign up</a></li>
<li class="shop-mobile mobile"><a class="shop" href="">shop</a></li>
<li ><a class="home" href="">home</a></li>
<li ><a class="about" href="">about</a></li>
<li ><a class="promo" href="">promo</a>
<ul class="submenu">
<li><a href="">Apple - Free Wi-Fi P</a></li>
<li><a href="">Lanseria - FREE Wi-Fi </a></li>
<li><a href="">BlackBerry PlayBook</a></li>
</ul>
</li>
<li ><a class="services" href="">services</a></li>
<li ><a class="tools" href="">tools</a></li>
<li ><a class="converge" href="">converge</a></li>
<li ><a class="news" href="">news</a></li>
<li ><a class="contact" href="">contact</a></li>
<li class="darkblue_grad"><a class="help" href="">help</a></li>
</ul>
</nav>
**jQuery* *
関数 menuOrder(){
if ($(window).width() > 590) {
$("nav#main-nav ul.menu li.login-mobile, nav#main-nav ul.menu li.signup-mobile").hide();
var mobile = $("nav#main-nav ul.menu > li.shop-mobile");
mobile.appendTo(mobile.parent("ul.menu")).end();
} else{
$("nav#main-nav ul.menu li.login-mobile, nav#main-nav ul.menu li.signup-mobile").show();
}
}
$(document).ready(function(){
menuOrder();
$(window).resize(function() {
menuOrder();
});
});