Remember the sub-item selected

Home Forums Older releases 1.0.x Remember the sub-item selected

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #2721
    robertocalero
    Participant

    Hi Vasil,

    I recently upgrade my web menu from zapatec tree menu to smartmenus and i love it but on the way i lost a function very usefull for me.

    That function consist on after click on a sub-item and the new page is loaded, if i come back using the back button or a link, that sub-item remain open with the last opened option.

    I really like to know how to do the same on Smartmenus, because right now if i click on a sub-item and then go back, the menu loads with the initial status (everything closed).

    I post a question on the other forum (SM 0.9) but i just upgrade to the last version (1.0 beta) now.

    Thanks for the reply,
    Regards.

    #2731
    admin
    Keymaster

    Hi and sorry for the delay of this answer!

    There are different ways to achieve it but here is a simple client-side solution that uses window.localStorage which is supported in all latest browsers (better than cookies in our case since it’s not sent with every request). This needs to be called ondomready after the SmartMenus init code:

    // save last selected item to localStorage
    var $mainMenu = $('#main-menu'),
    	localStorage = window.localStorage;
    $mainMenu.bind('select.smapi', function(e, item) {
    	if (localStorage) {
    		// since the items (links) don't have static ids by default, we'll save the item's index
    		// save a timestamp too
    		localStorage.sm_lastSelectedItem = $mainMenu.find('a').index(item) + '-' + new Date().getTime();
    	}
    });
    
    // restore last selected item
    if (localStorage && localStorage.sm_lastSelectedItem) {
    	// only restore if the menu is in collapsible mode on init
    	if ($mainMenu.data('smartmenus').isCollapsible()) {
    		var itemData = localStorage.sm_lastSelectedItem.split('-'),
    			itemIndex = itemData[0],
    			timeStamp = itemData[1];
    		// restore the item if saved within the last 1 hour
    		if (new Date().getTime() - timeStamp < 60 * 60 * 1000) {
    			var $item = $mainMenu.find('a').eq(itemIndex);
    			$mainMenu.smartmenus('itemActivate', $item);
    			$item[0].focus();
    		}
    	}
    	localStorage.removeItem('sm_lastSelectedItem');
    }

    The above will restore the last item if it was selected within the last hour. You can tweak the expiration period on this line if you like:

    		// restore the item if saved within the last 1 hour
    		if (new Date().getTime() - timeStamp < 60 * 60 * 1000) {

    Let me know if you have any questions.

    Cheers!

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?