[admin]

You can achieve it like this – open “jquery.smartmenus.bootstrap.js” and find the following lines:

			.bind({
				// set/unset proper Bootstrap classes for some menu elements
				...

Then change them like this:

			.bind({
				'select.smapi': function(e, item) {
					var $this = $(this),
						obj = $this.data('smartmenus');
					if (obj.isCollapsible()) {
						$this.closest('.navbar').find('button.navbar-toggle').click();
					}
				},
				// set/unset proper Bootstrap classes for some menu elements
				...

This will make sure each time a menu item is selected a click is simulated on the navbar toggle button which would collapse the navbar.

[admin]

Hi again and sorry for the delay! Unfortunately, I wasn’t able to look into this earlier.

You can achieve the exact Bootstrap behavior, for example, like this – first grab a fresh copy of “jquery.smartmenus.bootstrap.js” and then:

1) Activate touch mode even when a mouse is present by adding the following at the end of the file to overwrite the default prototype method:

// activate touch mode permanently
$.SmartMenus.prototype.isTouchMode = function() {
	return true;
};

This will make sure items are only activated on click/tap.

2) Change the following:

'click.smapi': function(e, item) {
	var obj = $(this).data('smartmenus');
	if (obj.isCollapsible()) {
		var $item = $(item),
			$sub = $item.parent().dataSM('sub');
		if ($sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
			obj.itemActivate($item);
			obj.menuHide($sub);
			return false;
		}
	}
}

like this:

'click.smapi': function(e, item) {
	var obj = $(this).data('smartmenus'),
		$item = $(item),
		$sub = $item.parent().dataSM('sub');
	if ($sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
		obj.itemActivate($item);
		obj.menuHide($sub);
		return false;
	}
}

This will make sure parent items onclick always just toggle their sub menus even on desktop (you cannot activate their links like with Bootstrap’s default navbars).

Please let me know if you this does the trick for you.

[admin]

You can try using the showOnClick option. To do so you will need to edit the “jquery.smartmenus.bootstrap.js” file and pass the option in the SmartMenus init call here:

$this.addClass('sm').smartmenus({

		// these are some good default options that should work for all
		// you can, of course, tweak these as you like
		subMenusSubOffsetX: 2,
		subMenusSubOffsetY: -6,
		subIndicatorsPos: 'append',
		subIndicatorsText: '...',
		collapsibleShowFunction: null,
		collapsibleHideFunction: null,
		rightToLeftSubMenus: $this.hasClass('navbar-right'),
		bottomToTopSubMenus: $this.closest('.navbar').hasClass('navbar-fixed-bottom')
	})

e.g. like this:

$this.addClass('sm').smartmenus({
		showOnClick: true,
		...

If you are using the minified version you will need to find the right spot to insert the option.

This would make the first level sub menus open onclick. It is similar to how OS menus work but it is not completely the same like the original Bootstrap dropdowns work. Please let me know if this is fine for you.

Cheers!

[admin]

OK, np, glad to hear you’ve figured it out!

[admin]

I am not able to reproduce this on the default demo page. It’s probably caused by some custom CSS you have on your page. Please post a live demo URL if you like and I can check it for you.

[admin]

Could you please post an URL to a live demo because I don’t understand exactly what you mean? Or at least try to explain how to reproduce it.. Thanks!

[admin]

Hi, this seems to be a bug on right-to-left pages. I will include a fix in the next SmartMenus release. In the meantime you can fix it by editing the following file:

http://nifgashim.com/inc/jq/smartmenus/css/sm-core-css.css

You will need to remove the left:-800px; declaration from the following rule:

ul.sm ul{position:absolute;top:-999999px;left:-800px;width:100px;}

i.e. like this:

ul.sm ul{position:absolute;top:-999999px;width:100px;}

Thanks!

[admin]

Actually, the standard SmartMenus behavior is to expand the sub menu on first click (or tap) on the parent item and to activate the item link on second click. But for the Bootstrap add-on we have copied Bootstrap’s default behavior which is to just expand/collapse the sub menus and never activate the parent item link (it’s only possible via the context menu).

But anyway, to get the default SmartMenus behavior you will need to edit “jquery.smartmenus.bootstrap.js” and delete/comment out the following code:

,
// click the parent item to toggle the sub menus (and reset deeper levels and other branches on click)
'click.smapi': function(e, item) {
	var obj = $(this).data('smartmenus');
	if (obj.isCollapsible()) {
                var $item = $(item),
                	$sub = $item.parent().dataSM('sub');
                if ($sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
                	obj.itemActivate($item);
                	obj.menuHide($sub);
                	return false;
                }
	}
}

[admin]

Hi,

Just don’t use the loader script. It’s used on the default demo to allow easy testing against different jQuery versions. So on your home page:

http://ecbiz135.inmotionhosting.com/~dahlec5/Dahle14/

use this:

<!-- jQuery -->

In sub directories like here:

http://ecbiz135.inmotionhosting.com/~dahlec5/Dahle14/products/sharpeners/HandHeld.htm

use this:

<!-- jQuery -->

and so on… Just like what you are currently doing for the “jquery.smartmenus.js” file.

Cheers!

[admin]

Hi,

You will need a couple of tweaks:

1) Enable the responsive styles for all viewport widths so that you get a collapsible menu in all cases. If you are using any of the default themes, just remove the media queries at the end of the CSS file but keep the rules inside.

Here is a bit more info on the subject:

http://www.smartmenus.org/docs/#small-screen-support

2) By default the script detects when the sub menus need to become collapsible (as defined in the CSS) and switches to “touch mode” – i.e. allows activating the sub menus on click/tap instead of on hover. So you will need to modify this behavior by adding the following JS lines somewhere in your source after the link to the SmartMenus script:

var oldIsTouchMode = $.SmartMenus.prototype.isTouchMode;
$.SmartMenus.prototype.isTouchMode = function() {
	return oldIsTouchMode.call({ isCollapsible: function() { return false; } });
}

This mod will make sure that collapsible sub menus will continue to work on hover when mouse input is present.

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

[admin]

OK, I will obviously need to test this but it might take some time since I don’t have a Windows 8 touch device here at the moment.

So page scrolling doesn’t work while the sub menu is displayed? What about when it’s not displayed, are you able to scroll the page normally then?

[admin]

The scroll feature is there just for mouse users (the scroll arrows are only displayed on mouse hover). When using touch you can simply scroll the whole page down and see the rest of the sub menu. Aren’t you able to scroll the page with a swipe up gesture when the sub menu is displayed?

[admin]

Hi,

Not sure about the exact page layout where you are using the script but on the default demo page the space above the menu is controlled via the BODY element’s padding – i.e. the following rule in “libs/demo-assets/demo.css”:

body {
	...
	padding:2em;
	...
}

You could tweak it as you like as per the spec:

http://www.w3.org/TR/CSS21/box.html#padding-properties

For example, the following would give you none top padding but will keep the BODY right/bottom/left padding:

body {
	...
	padding:0 2em 2em 2em;
	...
}

Cheers!

[admin]

Hi,

This is not a WordPress plugin so you can’t install it like that. You will need to learn how to use jQuery plugins in general and then you can follow the Quick setup instructions in the docs:

http://www.smartmenus.org/docs/#quick-setup

Cheers!

[admin]

Hi,

As far as I understand, you have a collapsible sidebar menu for both desktop and mobile, so you could achieve it, for example, like this:

$('#side-menu').smartmenus({
	mainMenuSubOffsetX: 1,
	mainMenuSubOffsetY: -8,
	subMenusSubOffsetX: 1
});

// collapse the submenus of the current selected menu item
$('#side-menu').smartmenus('itemActivate', $('a.current'));

// disable showing/hiding any sub menus
$('#side-menu').bind('beforeshow.smapi beforehide.smapi', function() {
	return false;
});

Please let me know if you need any further tweaks.

Cheers!

[admin]

You can tweak the the following options:

showTimeout: 250,	// timeout before showing the sub menus
hideTimeout: 500,	// timeout before hiding the sub menus

However, note that using no delay at all – i.e.:

$('#main-menu').smartmenus({
	showTimeout: 0,
	hideTimeout: 0
});

is not very recommended because it hurts usability for desktop/mouse users.

[admin]

Hi! Unfortunately, you can’t make it work automatically if the links to child pages are not in the menu tree since there is no way the script to know the page relations in that case.

So you are left with the option to manually set the “current” class to the appropriate menu items on child pages. You will need to check server-side which are the parent items of the current page and output the “current” class accordingly.

[admin]

Thanks, now I see what you mean!

This is a default setting in Bootstrap’s CSS for collapsed navbars – i.e. the max-height declaration in the following rule in “bootstrap.css”:

.navbar-collapse {
  max-height: 340px;
  ...
}

So you will need to use something like this additionally to overwrite it (just include it after “bootstrap.css”):

.navbar-collapse {
  max-height: none;
}

Please let me know if you still have troubles.

Cheers!

[admin]

Hi,

Could you please post an URL to a live demo (post it as “Protected data” if you prefer to keep it between us)? I guess it’s some custom CSS rule that causes this but I need to test your code in order to investigate it.

Thanks!

[admin]

Hi, please post a live URL where I could test the problem. What is the other item?

[admin]

Hi Greg,

Hmm, yep I noticed it. It seems on pages that take a bit more time to load (i.e. to fire the DOMContentLoaded event) this effect might be noticeable. I will think about possibly a bit improved sample code in the docs but you can fix the issue in the meantime by adding the collapsed class to your menu tree in the source by default:

<ul id="main-menu" class="sm sm-gjs hidden-print collapsed">

Let me know if you still have any troubles.

Cheers!

[admin]

Hi,

I just tested and it looks fine at the moment:

I guess you have fixed the issue. Anyway, let me know if you still have any troubles.

Cheers!

[admin]

Hi,

Please post the website URL so that could test and investigate the issue.

Thanks!

[admin]

Hi,

Please post an URL to a live demo page where we could notice and investigate the issue. It’s very difficult to guess what exactly might be causing it without looking at your code.

Thanks!

[admin]

Hi,

Sorry for the delay! We have national holidays here this week.

Here are quick instructions:

1) Start with the default SmartMenus Bootstrap demo “bootstrap-navbar.html”.

2) Replace the markup in the demo with the markup from the Yamm demo page. You can just remove the ‘s from your markup because the SmartMenus script adds its own sub menu indicators dynamically.

3) Include the yamm.css from the Yamm download package on your demo page.

4) Finally, the yamm.css file will need some tweaking. Open it and replace the following CSS rule at the end:

.yamm .dropdown.yamm-fw .dropdown-menu {
  left: 0;
  right: 0;
}

with the following rules:

.yamm .dropdown.yamm-fw .dropdown-menu {
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
.yamm .dropdown.yamm-fw span.scroll-up, .yamm .dropdown.yamm-fw span.scroll-down {
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
}
.yamm .dropdown.yamm-fw .dropdown-menu, .yamm .dropdown.yamm-fw .dropdown-menu * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Grid demo styles */
.grid-demo {
  padding: 10px 30px;
}
  .grid-demo [class*="col-"] {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 1em;
    text-align: center;
    line-height: 2;
    background-color: #e5e1ea;
    border: 1px solid #d1d1d1;
  }

That’s all. Let me know if you have any troubles.

Cheers!

[Author]

Posts