[admin]

If you are using the Bootstrap addon, you don’t need to initialize your menu like this:

$(function() {
  $('#main-menu').smartmenus({
  noMouseOver:true,
  subIndicatorsText: " <i class='fa fa-caret-down' aria-hidden='true'></i>",
  subIndicatorsPos: "append",
});

Just add any custom options in “jquery.smartmenus.bootstrap.js” after this line:

					$this.smartmenus({

e.g. like this:

					$this.smartmenus({
						noMouseOver: true,
						...

The next version will allow setting any options via a new attribute “data-sm-options” but for now editing the “jquery.smartmenus.bootstrap.js” file is required.

[admin]

This will be fixed in the next release, thanks!

[admin]

Sorry for this late reply, didn’t notice your post by now!

So you have this issue in collapsible mode? I am not able to reproduce it on any Android device I have. What is the screen size of the tablet and what version of Android does it run?

[admin]

Take a look at the following topic:

http://www.smartmenus.org/forums/topic/mega-menu-full-width-of-parent-element/

[admin]

Thanks for your input! I have actually already planned adding support for a new “data-sm-options” attribute that could be set directly on the root UL element. This will be available with the next release. However, a $('#main-menu').smartmenus(); call would still be needed (except when the Bootstrap addon is used).

[admin]

To make the parent items just a toggle for the sub menus onclick (in collapsible and in desktop mode) just use the code from 1 b) above and disable the collapsible check – i.e.:

$(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;
			}
		// }
	});
});;

[admin]

It checks at runtime whether the menu tree is in collapsible mode or not. In collapsible mode the sub menus (sub UL elements) have static position and in desktop mode they are absolute positioned.

[admin]

Your JS/CSS linked files are still returning 404. Here is how to setup you links (just copy these and replace your current ones):

JS:

<!-- jQuery -->
<script type="text/javascript" src="http://www.britishsteam.com/smartmenus/libs/jquery/jquery.js"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="http://www.britishsteam.com/smartmenus/jquery.smartmenus.js"></script>

CSS:

<!-- SmartMenus core CSS (required) -->
<link href="http://www.britishsteam.com/smartmenus/css/sm-core-css.css" rel="stylesheet" type="text/css" />
<!-- "sm-mint" menu theme (optional, you can use your own CSS, too) -->
<link href="http://www.britishsteam.com/smartmenus/css/sm-mint/sm-mint.css" rel="stylesheet" type="text/css" />

IMPORTANT: I saw the “sm-mint.css” file is missing in its default location – not sure where it is right now on your server. You should find it and put it in the following folder on your server:

/smartmenus/css/sm-mint/

[admin]

This could be configured in “jquery.smartmenus.bootstrap.js”. The following option could be tweaked:

subMenusSubOffsetY: -6,

[admin]

This is an old topic I’ve obviously missed answering at the time for some reason but if someone needs this in the future, you could do it by using the showOnClick: true option. It would make your menu behave like a desktop app menu – i.e. click to activate first sub menu, then hover to show any other sub menus and click again to deactivate the sub menus. In the case with the Bootstrap addon, you would need to add it in “jquery.smartmenus.bootstrap.js” – just find this line:

					$this.smartmenus({

and replace it with:

					$this.smartmenus({
							showOnClick: true,

[admin]

Hi,

1) There are a number of different ways it could work and it’s really a matter of personal preference. The main reason to have it expand the sub menu on first tap by default is that otherwise most mobile end users would not ever expand the sub menus and see the sub pages options – they would just keep tapping and loading the main links. And not using the whole menu item just as sub menu toggle allows setting actual links that could be followed by the users on second tap – even if they expect the sub menu to get hidden on second tap instead of the parent link loaded, they would learn what to expect on the next page (hopefully :)). So, yeah, I mean all diifferent behaviors have their pros and cons.

But anyway, this could be tweaked via the API.

For a), use this additional code:

http://www.smartmenus.org/forums/topic/href-not-working-on-parent-as-expected/#post-3025

If you would like b), you could use this:

http://www.smartmenus.org/forums/topic/hide-submenu-of-clicked-menu-item-only/#post-2714

For 2) you could try using the hideOnClick: false option.

[admin]

I can now see some weird paths in your page source:

<!-- jQuery -->
<script type="text/javascript" src="//http:www.britishsteam.com/smartmenus/libs/jquery/jquery.js"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="//http:www.britishsteam.com/smartmenus/jquery.smartmenus.min.js"></script>

...

<!-- SmartMenus core CSS (required) -->
<link href="//http:www.britishsteam.com/smartmenus/css/sm-core-css.css" rel="stylesheet" type="text/css" />

<!-- "sm-mint" menu theme (optional, you can use your own CSS, too) -->
<link href="//http:www.britishsteam.com/smartmenus/css/sm-mint.css" rel="stylesheet" type="text/css" />

You also have tried to include the SmartMenus code twice:

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="//http:www.britishsteam.com/smartmenus/jquery.smartmenus.min.js"></script>

...

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="//http:www.britishsteam.com/smartmenus/jquery.smartmenus.js"></script>

It’s needed just once.

[admin]

Sorry for the late reply! Please let me know if this is still relevant. I don’t see the SmartMenus script being used on the page you posted.

[admin]

This is caused by the following customization you are using:

// SmartMenus mod - hide the menus on document click just in collapsible mode
$.SmartMenus.prototype._docClick = $.SmartMenus.prototype.docClick;
$.SmartMenus.prototype._docTouchEnd = $.SmartMenus.prototype.docTouchEnd;
$.SmartMenus.prototype.docClick = function (e) {
    if (this.isCollapsible()) {
        this._docClick(e);
    }
}
$.SmartMenus.prototype.docTouchEnd = function (e) {
    if (this.isCollapsible()) {
        this._docTouchEnd(e);
    }
}

If you remove it, the sub menus should be hidden on tap on iPad.

[admin]

Hi,

For the hamburger icon animation you would need to edit the JS code related to it – it’s posted here in the docs:

http://www.smartmenus.org/docs/#menu-toggle-button

and I guess you use it somewhere in your project (unless you are using your own custom code).

[admin]

You could use the markCurrentItem: true option and also some additional JS like this:

$(window).load(function() {
	var $menu = $('#main-menu'),
		obj = $menu.data('smartmenus');
	// show current sub menu if menu is collapsible
	if (obj.isCollapsible()) {
		$menu.smartmenus('itemActivate', $menu.find('a.current').eq(-1));
	}
});

[admin]

If the code runs when the sub menu is hidden (it is hidden via display: none), then you won’t be able to obtain the links’ dimensions or position. A sample workaround would be to set it temporary display: block (but still keep it hidden, for example, via visibility: hidden), get the values you need and then set it display: none again.

[admin]

For example, you could add a class to the parent LI element:

<li class="hidden-sub-mobile">...

and use the following CSS:

@media (max-width: 768px) {
	.hidden-sub-mobile .sub-arrow, .hidden-sub-mobile ul {
		display: none !important;
	}
}

[admin]

There is a slight issue with the .sm-simple theme – in vertical mode it reserves space on the right side of the item for a sub menu indicator (inherited in the CSS from the horizontal setting) – this should be fixed soon.

Anyway, you would need to edit these rules in “sm-simple.css”:

  .sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
    padding: 11px 20px;
    color: #555555;
  }

  /* ... */

  .sm-simple a.has-submenu {
    padding-right: 32px;
  }

[admin]

Hello, yes it could be achieved via the API with some additional code. For example, the following should work (add it somewhere on your page):

JS:

$(function() {
	var $mainMenu = $('#main-menu'),
		$underlay = $('<div id="main-menu-underlay"></div>').appendTo('body');
	$mainMenu.bind({
		'show.smapi': function(e, menu) {
			var $sub = $(menu),
				$li = $sub.parent(),
				obj = $mainMenu.data('smartmenus'),
				mainMenuOffset = $mainMenu.offset();
			// position deeper level sub menus right below the main menu
			if ($sub.dataSM('level') > 2) {
				$sub.css('margin-top', mainMenuOffset.top + obj.getHeight($mainMenu) - $li.offset().top - obj.getHeight($li));
			}
			// show/position underlay
			$underlay.stop(true, true);
			if (!$underlay.is(':visible')) {
				$underlay.css({ top: mainMenuOffset.top + obj.getHeight($mainMenu), left: mainMenuOffset.left, width: obj.getWidth($mainMenu), height: obj.getHeight($sub) }).show();
			} else {
				// get max height of visible sub menus
				var maxHeight = 0;
				$.each(obj.visibleSubMenus, function(index, $sub) {
					maxHeight = Math.max(maxHeight, obj.getHeight($sub));
				});
				$underlay.css('height', maxHeight);
			}
		},
		'hide.smapi': function(e, menu) {
			var obj = $mainMenu.data('smartmenus');
			if (!obj.visibleSubMenus.length) {
				$underlay.fadeOut(250);
			}
		}
	});
});

CSS:

#main-menu-underlay {
	display: none;
	position: absolute;
	background: red;
}

Please let me know if you have any questions.

[admin]

Not sure I get this right but do you actually want to make it non-responsive – i.e. want the desktop styles at all widths? If that is the case, the simplest way to achieve it is to edit the breakpoint in your theme CSS file “sm-mint.css” from this:

@media (min-width: 768px) {

to, for example, something like this:

@media (min-width: 1px) {

[admin]

Hi guys, sorry for this late reply! I’ve, unfortunately, been very busy lately and wasn’t able to look at the forums often..

@straygoat From what I can see, the menu seems to work as intended (apart from the styling which needs some tweaking):

http://straygoat-technicalauthor.co.uk/smartmenutest/TestingMenuFix/Content/Doors.htm

I guess what bothers you is that when a new page is loaded, the menu is not expanded automatically to show the current selected item. To fix that, you would need to change the following code in “Resources/smartmenus-1.0.0-beta1/initialise-accordion.js”:

				/* Automatically open the accordion to show the current item */
				$('#smartmenu-accordion>ul.sm').smartmenus('itemActivate', $('a.selected'));

to something like this:

				/* Automatically open the accordion to show the current item */
				$('#smartmenu-accordion>ul.sm').smartmenus('itemActivate', $('#smartmenu-accordion>ul.sm a.current'));

Please let me know if that still doesn’t solve the issue.

[admin]

Yes, why not. You can put a SmartMenus always collapsible menu (just delete the desktop styles from the theme you’d use) in a slide-in panel.

[admin]

Sorry for this late reply! To fix the issue remove the following rule:

	#main-menu ul{
		position: relative;
	}

from your CSS file:

http://templates.livesiteadmin.com/css/c5a255f7-4ef8-4a7f-8387-8529c0f0b624.css?d=2016-05-13-1621

This custom rule breaks the SmartMenus feature that detects when the menu is in collapsible (mobile) mode.

[admin]

There was a slight issue with your custom file “jquery.smartmenus.more.js”. Just replace it with the following:

http://www.smartmenus.org/files/misc/jquery.smartmenus.more.js

and it should work. Sorry for the late late reply BTW!

[Author]

Posts