Question

I am building a responsive menu that scales dependent on screen size. i need to hide some li’s and rearrange another when the screen size changes, then when the screen size is resized back to its original size all elements need to revert back to the way they where.

I kinda got it working when I resize the window, but I’m batteling to get it back to its original state

this is my code:

**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**

function 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();
    });

});

Answer 1

Why not stash the innerHTML of your menu in a variable at load time, then just write it back onto the DOM when you need a fresh copy. No need to “un-do” anything this way.

EDIT:

capture the original menu (do this before manipulating it, when the page loads):

var originalMenu = $('#main-nav').html()

write-back the original menu:

$('#main-nav').html(originalMenu)