0

here is my code...

var menuToggle = false;

$(document).ready(function () {
// Init Tabs
$("#ipsg-tabs").tabs();

// Init Tooltips
$(function () {
    $('.ipsg-tab').tooltip();
});;

// Init Menu 
accordionMenu();

// Toggle Menu
$('.ipsg-logo-menu-btn').click(function () {
    if (!menuToggle) {
        menuToggle = true;
        $('.sg-accordion > .ipsg-nav-items').hide();
        $('.sg-accordion h3').removeClass('state-selected');
        $('.ipsg-container').addClass('ipsg-menu-collapse');
    } else {
        menuToggle = false;
        $('.ipsg-container').removeClass('ipsg-menu-collapse');
    }
});

});

function accordionMenu() {
var allPanels = $('.sg-accordion > .ipsg-nav-items');    
var menuLeaving = false;
$('.sg-accordion > h3 > a').click(function () {
    if (!menuToggle) {
        if (!$(this).parent().hasClass('state-selected')) {
            allPanels.slideUp('fast');
            $('.sg-accordion h3').removeClass('state-selected');

            $(this).parent().next().slideDown('fast');
            $(this).parent().addClass('state-selected');
        } else {
            allPanels.slideUp('fast');
            $('.sg-accordion h3').removeClass('state-selected');
        }
    }

    return false;
});

$('.sg-accordion > h3 > a').mouseenter(function () {
    if (menuToggle) {
        menuLeaving = false;
        $('.sg-accordion > .ipsg-nav-items').hide();
        $('.sg-accordion h3').removeClass('state-selected');
        $(this).parent().next().show();
        $(this).parent().addClass('state-selected');
    }
});

$('.sg-accordion > .ipsg-nav-items').mouseenter(function () {
    if (menuToggle) {
        menuLeaving = false;
    }
});

$('.sg-accordion > h3 > a').mouseleave(function () {
    if (menuToggle) {
        menuLeaving = true;

        setTimeout(function () {
            if (menuLeaving) {
                $('.sg-accordion > .ipsg-nav-items').hide();
                $('.sg-accordion h3').removeClass('state-selected');
            }
        }, 400);
    }
});

$('.sg-accordion > .ipsg-nav-items').mouseleave(function () {
    if (menuToggle) {
        menuLeaving = true;

        setTimeout(function () {
            if (menuLeaving) {
                $('.sg-accordion > .ipsg-nav-items').hide();
                $('.sg-accordion h3').removeClass('state-selected');
            }
        }, 400);
    }
});
}

I am trying to have my toggle menu closed or open depending on the page reload. So if i am using hamburger menu, and click on a link, i want the hamburger menu to stay after reload. Same with having the menu opened up, i want it so if i click on those links, for the menu to stay open on reload.

anyone have any ideas?

Hadjir Mashiri
  • 1
  • Is there any way you can use a backend language to handle this? javascript/jQuery will typically result in a "flash" moment of the menu either being open or closed before changing. Using a backend language, you can pass the code for an already-open menu. – Joseph Marikle May 22 '17 at 20:41
  • I am using .net on the backend.. I wouldn't know exactly how to go by doing this :/ – Hadjir Mashiri May 22 '17 at 20:43
  • Unfortunately the sum of my experience in .net is one internship, so I don't know how exactly you would do that, but it sounds like you can use [`__doPostBack`](https://forums.asp.net/post/2313345.aspx) to send the data (presumably from the click event on the menu item) to the backend, where you could store it in the user's session or flash data and reference it later to add an active class to the menu or menu item(s). That class would simply mimic what your framework uses to open the menu. – Joseph Marikle May 22 '17 at 20:50
  • Obviously, the below answers are on point as to how you can accomplish this with javascript, and it would probably be easier to go that route, but in case you want a backend approach, it sounds doable. – Joseph Marikle May 22 '17 at 20:51
  • where am I suppose to add that code from the link below? – Hadjir Mashiri May 22 '17 at 20:57
  • I would assume you need to add it to `$('.ipsg-logo-menu-btn').click`, but now that I've looked into it more, it sounds like you would also need to [use a panel](https://stackoverflow.com/questions/4959591/dopostback-reloading-entire-page-instead-of-just-the-updatepanel#4960241) to prevent it from reloading the whole page. I'm becoming less convinced that it's worth the effort. – Joseph Marikle May 22 '17 at 21:08

2 Answers2

0

This is the sort of thing I would use localStorage or cookies for. You can set an variable for either that would allow for you to dictate if the menu should be opened or closed.

zeropsi
  • 682
  • 9
  • 24
0

Asked Previously. You can use cookies for that as it is easy to implement and maintainable.
Link is here Jquery UI Accordion menu saving menu state even after refresh

breakit
  • 356
  • 2
  • 8
  • Can you provide your HTML code also so that I can add some code? – breakit May 22 '17 at 21:36
  • the code is just calling on the ipsg-logo-menu-btn class.. in a div...
    the menu is a drop down menu with links.. but when we click the hamburger menu, the dropdown switching to a side icon nav..     – Hadjir Mashiri May 22 '17 at 21:49