CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Julien
Julien

Reputation: 165

Keep menu toggle state after page reload

Here’s a toggle menu who works perfectly: If I click on the link (HTML code below), the menu folds. But I want if the users reload the page to keep the state of menu (expand / collapse).

    $('#menu_toggle').click(function () {
        if ($('body').hasClass('nav-md')) {
            $('body').removeClass('nav-md');
            $('body').addClass('nav-sm');
            $('.left_col').removeClass('scroll-view');
            $('.left_col').removeAttr('style');
            $('.sidebar-footer').hide();

            if ($('#sidebar-menu li').hasClass('active')) {
                $('#sidebar-menu li.active').addClass('active-sm');
                $('#sidebar-menu li.active').removeClass('active');
            }
        } else {
            $('body').removeClass('nav-sm');
            $('body').addClass('nav-md');
            $('.sidebar-footer').show();

            if ($('#sidebar-menu li').hasClass('active-sm')) {
                $('#sidebar-menu li.active-sm').addClass('active');
                $('#sidebar-menu li.active-sm').removeClass('active-sm');
            }
        }
    });

<a id="menu_toggle"><i class="fa fa-bars"></i></a>

How to remember the state? Full project: http://demo.kimlabs.com/gentelella/production/index.html Thanks

Upvotes: 0

Views: 7591

Answers (2)

Matthew Spence
Matthew Spence

Reputation: 1041

You should use cookies to store booleans, of if the menu has been opened or closed. Then when a page is loaded, it checks for any stored cookies, and by default uses those variables.

For example:

on page load:

var menuOutBoolean = Cookies.get("menuOutB") || false;
if (menuOutBoolean == true || menuOutBoolean == "true"){
    //put the menu out
}
else {
    //put menu in
}

On change:

if (/*out*/){
    Cookies.set("menuOutB","true");
}
else{
    Cookies.set("menuOutB","false");
}

Note: Here I have used this JavaScript API (Jquery Plugin).

Upvotes: 1

Will Jenkins
Will Jenkins

Reputation: 9787

This is the sort of thing I'd use localStorage for. Just set some kind of flag in localStorage when the state changes and fetch it when your page loads.

I should add that using css classes to represent view state isn't a good idea and will bite you if your UI gets much more complicated.

Upvotes: 0

Related Questions