[admin]

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!

[admin]

Hi, unfortunately, I have no idea really without being able to test your code. Please post an URL to some kind of demo if possible.

[admin]

Sorry for the delay of this answer!

Not sure what caused the positioning issue – might be some custom additional CSS you use on your pages, but glad to hear you’ve managed to cope with it. As for the +/- button replacing Bootstrap’s default arrow in collapsible mode, you can check the following data attribute:

http://www.smartmenus.org/docs/#data-sm-skip-collapsible-behavior

which allows you to revert to Bootstrap’s default behavior.

[admin]

Unfortunately, I am not sure what you might be doing wrong without looking at your code so please post an URL to some kind of demo. Are you trying to use 2 different jQuery versions?

[admin]

Hi, can you post an URL to some kind of demo? Because, by default, it should work exactly as you explain – a first click/tap should expand the sub menu and a second should activate the link.

[admin]

Yep, most devs I know actually don’t worry about IE7/8 at all any more. Now that major services do not support them, it’s pretty obvious to any user of those browsers that they can’t expect perfect experience on any modern website.

[admin]

Hi,

To make the whole parent item just a toggle button for its sub menu in collapsible mode, you could use additionally something like this:

$(function() {
	// use the whole parent item as sub menu toggle button
	$('#main-menu').bind('click.smapi', function(e, item) {
		var obj = $(this).data('smartmenus');
		if (obj.isCollapsible()) {
			var $sub = $(item).dataSM('sub');
			if ($sub && $sub.is(':visible')) {
				obj.menuHide($sub);
				return false;
			}
		}
	});
});

As you have noticed, by default the script has a slightly different behavior for parent items in collapsible mode – the first click/tap on them, expands the sub menu, the second click/tap activates the item’s link (and collapses the sub menu since by default the hideOnClick: true option is used). Of course, at any time the sub menu indicator +/- button can also be used as toggle for the sub menu. This allows setting a link that can be activated to parent items, which is not possible in your case.

[admin]

Hm, when I test this on the default demo page “bootstrap-navbar.html”, it works fine. Make sure you are calling it after #menu-id is available in the DOM.

BTW, if you don’t need dynamic values, just use CSS – e.g. like this:

#menu-id span.scroll-down, #menu-id span.scroll-up {
	width: 1000px !important;
}

!important is needed because the script tries to set the width dynamically and we need to override it.

If you are still having troubles, please post an URL to some kind of demo page where I could test the issue. Thanks!

[admin]

Yes, you can do it like this:

$(function() {
	// disable the sub menus in desktop mode
	$('#main-menu').bind('activate.smapi', function(e, item) {
		// only for the li#menu-item-164 item
		if ($(item).parent().is('#menu-item-164')) {
			if (!$(this).data('smartmenus').isCollapsible()) {
				return false;
			}
		}
	});
});

The activate.smapi event is always triggered on the root UL and the item parameter is the menu item’s link (the <a> element).

Cheers!

[admin]

Hi, something like this should do the trick:

$(function() {
	// disable the sub menus in desktop mode
	$('#main-menu').bind('activate.smapi', function(e, item) {
		if (!$(this).data('smartmenus').isCollapsible()) {
			return false;
		}
	});
});

Cheers!

[admin]

Hi and sorry for this late reply! It’s been very hectic times here lately.

If it’s for the entire list, then you could use something like this:

@media (min-width: 768px) {
	nav {
		text-align: center;
	}
	#main-menu {
		display: inline-block;
		text-align: left;
	}
}

where nav is the menu list container element (it might be different in your layout but the sample code above should work on the demo page).

Cheers!

[admin]

Sorry for the late reply! Although, it’s a bit difficult to test it right away, I guess this is caused by Respond.js which most probably applies the desktop styles in IE8 after the domready event. So, I would suggest to just exclude IE7/8 like this:

if (!window.respond) {
	var $mainMenu = $('#main-menu'),
		smObj = $mainMenu.data('smartmenus');
	if (smObj.isCollapsible()) {
		$mainMenu.smartmenus('itemActivate', $mainMenu.find('a.current').eq(-1));
	}
}

This means that the menu will not be expanded just for IE7/8 mobile users (if there are any of those at all nowadays).

[admin]

Hi, if you would like to use Bootstrap’s default behavior (the whole item to act just as sub menu toggle in collapsible mode), you can use the following data-* attribute option:

http://www.smartmenus.org/docs/#data-sm-skip-collapsible-behavior

This is also mentioned at the end of the demo page in the “Quick customization” section:

http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html

Please let me know if you still have any questions.

Cheers!

[admin]

Np, cheers!

[admin]

I just replied to your email. Cheers!

[admin]

Hi, glad you like the script! 🙂

You could use something like this ondomready instead:

var $mainMenu = $('#main-menu'),
	smObj = $mainMenu.data('smartmenus');
if (smObj.isCollapsible()) {
	$mainMenu.smartmenus('itemActivate', $mainMenu.find('a.current').eq(-1));
}

Cheers!

[admin]

Hmm, on theory everything looks fine. If the sub menu is not working and the sub menu indicator arrow is not appearing, then it’s some kind of script initialization problem. Here’s what you could check:

1) Make sure the script files are loaded correctly (double check the path) – the jQuery .js file and jquery.smartmenus.js. You can test if the SmartMenus plugin is loaded correctly with the browser console (in Chrome: hamburger icon -> More tools -> JavaScript Console; in Firefox: hamburger icon -> Developer -> Web Console) – type the following and hit Enter:

$.SmartMenus

If you get undefined, then the “jquery.smartmenus.js” file is not loaded correctly (check its path).

2) If for some reason jQuery is used in noConflict mode, then you may need to change your init code like this:

jQuery(function() {
	jQuery('#main-menu').smartmenus({
		mainMenuSubOffsetX: -1,
		subMenusSubOffsetX: 10,
		subMenusSubOffsetY: 0
	});
});

Hope this helps. Please let me know if you still have troubles.

[admin]

You mean TeamViewer? I could try but it’s better if you could send me a ZIP-ed one-page demo by email. Try saving a page as “Webpage, Complete” with Chrome, ZIP the .html file and its associated folder and send it by email to the address listed here:

http://www.smartmenus.org/contact/

[admin]

When a sub menu is displayed, the script adds the highlighted class to its parent item’s link and removes it again when the sub menu is hidden (provided the keepHighlighted: true option is used which is the case by default). So you could use that to change the sub-arrow’s background image – e.g. something like:

.menuClass a.highlighted span.sub-arrow {
	/* ... */
}

[admin]

Please post an URL to some kind of live demo. Unfortunately, I have no idea what exactly might be causing it without looking at your code.

[admin]

You can target items that have sub menus and add them some right padding to make room for the sub menu indicator like this:

.main-menu ul li a.has-submenu {
  padding-right:30px;
}

Or, alternatively, you could use the subIndicatorsPos: "prepend" option and then use static position for the sub-arrow and float it to the right – something like:

.main-menu ul li a span.sub-arrow {
  float:right;
  background: url(/Resources/right-arrow-white.png) no-repeat center;
  height: 34px;
  width: 20px;
}

Or if this is just for horizontal main menu items, you could use subIndicatorsPos: "append" and something like:

.main-menu ul li a span.sub-arrow {
  display:inline-block;
  background: url(/Resources/right-arrow-white.png) no-repeat center;
  height: 34px;
  width: 20px;
}

[admin]

Thanks, glad you like the script! 🙂 Normally, I’d call a sunny weather nice but we have the hottest days of the year now 37-40° Celsius so I wouldn’t say it’s that nice – hopefully, it will be better soon or we may need to migrate.. 😆

[admin]

Ah, then neglect my previous post. If you would like to include custom HTML code inside your sub menus, you can use mega drop-downs. The last sub menu on the default demo page (“demo/index.html” in the download ZIP) is a mega drop down:

http://vadikom.github.io/smartmenus/src/demo/

So you would have something like this:

<div class="level1">
  <ul class="sm level1">
    <li><a href="#">Main menu item 1</a>
      <ul class="mega-menu">
        <li>
          <div class="menu2">
            <div class="column">
              <ul>
                <li>
                  <a href="#">Item 2</a>
                </li>

                <li>
                  <a href="#">Item 3</a>
                </li>
              </ul>
            </div>

            <div class="column">
              <ul>
                <li>
                  <a href="#">Item 4</a>
                </li>

                <li>
                  <a href="#">Item 5</a>
                </li>

                <li>
                  <a href="#">Item 6</a>
                </li>
              </ul>
            </div>

            <div class="clearboth"></div>
          </div>
        </li>
      </ul>
    </li>
    <li><a href="#">Main menu item 2</a>
      <ul class="mega-menu">
        <li>
          Mega drop down 2 content...
        </li>
      </ul>
    </li>
  </ul>
</div>

and the following CSS as a start for the nested lists inside the mega drop-downs:

.mega-menu ul {
	display: block;
	position: static;
}

because by default ul elements in the menu tree are considered actual sub menus and have display: none; applied in “sm-core-css.css”.

[admin]

Hmm, actually, in v1.0 that code is not needed – I guess you’ve copied it from some old v0.9 thread. It was needed just in v0.9 to make it behave like v1.0 behaves by default. So what you need in v1.0 to bring back the accordion behavior is just the code sample I posted above.

[admin]

No, it shouldn’t behave like that. The +/- button in collapsible mode should only toggle the sub menu – e.g. like it does here:

http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html

So there is probably something wrong with your code. If you like, please post an URL to some kind of live demo and I will check it.

[Author]

Posts