[admin]

For keeping deeper sub levels expanded all the time on desktop, you could use something like this as a start:

@media (min-width: 1001px) {
	.yourMenuClass ul ul {
		display: block !important;
		position: static !important;
		margin: 0 !important;
		/* the following are needed if you use the default fadeOut animation on close */
		-moz-opacity: 1 !important;
		-webkit-opacity: 1 !important;
		opacity: 1 !important;
		filter: alpha(opacity=100) !important;
	}
}

From here, of course, you will probably need to tweak the styling too.

Let me know if you have any troubles.

[admin]

The old v0.9.x releases used to work like an accordion in collapsible mode but, based on user feedback and UX testing (proving, for example, that it is sometimes not appropriate to auto collapse other branches since the active item might be scrolled out of view), this was changed in v1.0. Now sub menus can only be collapsed manually or when the whole tree is reset on click/tap elsewhere on the page.

You could, however, bring back the accordion behavior if you like, by adding the following API tweak on your page:

$(function() {
	$('#main-menu').bind('click.smapi', function(e, item) {
		var obj = $(this).data('smartmenus');
		if (obj.isCollapsible()) {
			var $item = $(item),
				$sub = $item.dataSM('sub');
			if ($sub && !$sub.is(':visible')) {
				obj.itemActivate($item, true);
				return false;
			}
		}
	});
});

Let me know if you have any troubles.

[admin]

Np at all! I’ve tried to design the script so that the amount of sub menus/menu items affect as little as possible the performance of the script so it’s really nice to see real world solutions like yours working fine.

Cheers!

[admin]

Yes, they are clickable (e.g. the About link on this site).

[admin]

Hi,

There is a bug in the “destroy” method (also affecting the “refresh” method) in v1.0.0-beta1 which affects the Bootstrap add-on. I recently fixed it and the fix will be included in the next release but is also available right now in the latest revision on GitHub (you need to get both files directly from these links):

https://raw.githubusercontent.com/vadikom/smartmenus/master/src/addons/bootstrap/jquery.smartmenus.bootstrap.js
https://raw.githubusercontent.com/vadikom/smartmenus/master/src/jquery.smartmenus.js

Please let me know if you still have any troubles after using these latest revisions.

[admin]

Ah, yes, when you install with Bower it will still download v0.9.7 because v1.0 is still marked as beta. Anyway, to fix the ellipsis issue make sure you are using the v1.0 “jquery.smartmenus.bootstrap.js” (or “jquery.smartmenus.bootstrap.min.js”) file because you are probably still using the v0.9.7 one.

[admin]

I can’t test your code and the custom CSS you’ve used but something like this for the active menu should probably work (it should keep it open no matter what):

display:block !important;
height:auto !important;

[admin]

Make sure you are using the latest version of the script core “jquery.smartmenus.js” and Bootstrap addon “jquery.smartmenus.bootstrap.js” and “jquery.smartmenus.bootstrap.css”. You can download from here:

http://www.smartmenus.org/download/

I don’t get double arrows with your sample code with the latest version.

[admin]

Yes, of course, you can have as many as you like and you can initialize them with whatever different options you like. Just use different id’s – e.g. “main-menu” and “footer-menu”, etc.

[admin]

Yep, replace the following:

  $('#menu-btn').click(function() {
    var $this = $(this),
        $menu = $('#main-menu');
    if (!$this.hasClass('collapsed')) {
      $menu.addClass('collapsed');
      $this.addClass('collapsed');
    } else {
      $menu.removeClass('collapsed');
      $this.removeClass('collapsed');
    }
    return false;
  }).click();

with the following:

  $('#menu-btn').click(function() {
    var $this = $(this),
        $menu = $('#main-menu');
    if (!$this.hasClass('collapsed')) {
      $menu.addClass('collapsed');
      $this.addClass('collapsed');
    } else {
      $menu.removeClass('collapsed');
      $this.removeClass('collapsed');
      $("#main-menu").smartmenus("itemActivate",$("#main-menu").find("a.current").eq(-1));
    }
    return false;
  }).click();

Cheers!

[admin]

Yes, I am not sure what exact behavior you would like, so you can try any of these (add it after the SmartMenus init code):

1) Toggling the showOnClick option – when it’s true, it makes the menu behave like desktop application menus – i.e. click to activate the sub menus, then hover to show/hide them until another click deactivates them:

$(function() {
	var winW;
	function toggleMenuShowOnClick() {
		var newW = $(window).width();
		if (newW != winW) {
			$('#main-menu').data('smartmenus').opts.showOnClick = newW < 768;
			winW = newW;
		}
	};
	toggleMenuShowOnClick();
	$(window).bind('resize', toggleMenuShowOnClick);
});

2) Toggling touch mode detection - allows you to simulate the touch mode behavior on desktop - i.e. users always need to click to show/hide sub menus:

$(function() {
	$.SmartMenus.prototype.original_isTouchMode = $.SmartMenus.prototype.isTouchMode;
	var winW;
	function toggleMenuTouchMode() {
		var newW = $(window).width();
		if (newW != winW) {
			if (newW < 768) {
				$.SmartMenus.prototype.isTouchMode = function() { return true; };
			} else {
				$.SmartMenus.prototype.isTouchMode = $.SmartMenus.prototype.original_isTouchMode;
			}
			winW = newW;
		}
	};
	toggleMenuTouchMode();
	$(window).bind('resize', toggleMenuTouchMode);
});

Note that checking $(window).width() may not perfectly match your CSS breakpoint switching in some cases (due to scrollbars in desktop browsers) so if you want perfect match, you may consider some solutions like:

https://www.fourfront.us/blog/jquery-window-width-and-media-queries
https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript

Cheers!

[admin]

Hi,

By default the carets span.caret are required as they are used as toggle buttons in collapsible mode so you need to use them in any case. So you could achieve it by adding both icons in the menu items – e.g.:

<li><a href="#">Dropdown <i class="fa fa-angle-down"></i><span class="caret"></span></a>...

and then showing the FontAwesome one in desktop mode and the Bootstrap default caret in collapsible mode with something like this:

.navbar-nav .fa {
	display: none;
}
@media (min-width:768px) {
	.navbar-nav .fa {
		display: inline-block;
	}
	.navbar-nav .caret {
		display: none;
	}
}

768px is the default Bootstrap breakpoint that triggers collapsible mode so if you use a custom breakpoint width for that, you may need to change it.

Cheers!

[admin]

OK, try replacing your rule with something like this:

.mi_navbar-fixed-top {
	z-index: 1030;
}
@media screen and (max-width: 772px) {
	.mi_navbar-fixed-top {
		top: 0px;
		border-width: 0px 0px 1px;
		position: fixed;
		right: 0px;
		left: 0px;
		z-index: 1030;
	}
	.mi_navbar-fixed-top .navbar-collapse {
		max-height: 340px;
	}
}

It should, hopefully, fix both issues. If you still have any troubles, please post a link to some kind of live demo that I could test.

Cheers!

[admin]

About 1) – are you sure you are now using the updated version of the “wp-bootstrap-navwalker” class from here:

https://github.com/vadikom/wp-bootstrap-navwalker

This is not the original version of the class but a one I modified to support unlimited sub levels.

About 2) – this is now the default collapsible behavior when using the SmartMenus Bootstrap add-on. A first click on the parent link shows the sub menu. A second click activates the link. Apart from that, the +/- toggle button can be used to toggle the sub menu at any time. This allows you to actually add links to parent items which is not possible in Bootstrap by default.

If you would like to revert to Bootstrap’s default behavior (i.e. use the whole parent item just as a sub menu toggle button), you will need to use the data-sm-skip-collapsible-behavior attribute – here is how to do it:

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

[admin]

Hi and sorry for all this delay! It’s been very busy times here lately and I just don’t have the chance to look at the forums very regularly. 😳

It’s not that difficult to use a custom focusable element like a BUTTON after the link as a sub menu toggle in collapsible mode – this could be implemented as an add-on. But the main problem is moving the ARIA attributes from the link to that element since the script core would certainly need some modifications and this would prevent you from being able to upgrade easily in the future.

What you could do with the original v1.0.x script core, is to use the following mod to make sure links are loaded on first tap in collapsible mode (the sub arrow SPAN’s are now actually sub menu toggle buttons in collapsible mode by default):

// don't show the sub menus in collapsible mode unless the sub arrow is clicked
var $mainMenu = $('#main-menu').on('click', 'span.sub-arrow', function(e) {
		var obj = $mainMenu.data('smartmenus');
		if (obj.isCollapsible()) {
			var $item = $(this).parent(),
				$sub = $item.parent().dataSM('sub');
			$sub.dataSM('arrowClicked', true);
		}
	}).bind({
		'beforeshow.smapi': function(e, menu) {
			var obj = $mainMenu.data('smartmenus');
			if (obj.isCollapsible()) {
				var $menu = $(menu);
				if (!$menu.dataSM('arrowClicked')) {
					return false;
				}
				$menu.removeDataSM('arrowClicked');
			}
		}
	});

But, as you can guess, this will mess the ARIA attributes logic when the menu is in collapsible mode (and mobile screen reader users would not be able to activate the sub menus).

[admin]

In the old page you have this:

<body onLoad="loadImages()">

and in the new one – this:

<body>

This is what causes the issue.

But, honestly, all the JS code you have for the rollovers – this reminds me of my teenage years and my first steps with JavaScript (I am almost 33 now). Please consider using CSS for this stuff.

Cheers!

[admin]

I can see you are using some custom class mi_navbar-fixed-top to position your navbar and not Bootstrap’s default navbar-fixed-top. Probably this causes both issues because when I put the menu in a .navbar-fixed-top container I am not able to reproduce the issues here. Maybe you could try also adding the navbar-fixed-top class to your navbar container and this might help, but I don’t have a clear idea since I am not able to test your complete solution.

If you still can’t cope on your own, please post some kind of live demo that I could test and optimize.

Cheers!

[admin]

Hi,

Could you please post an URL to some kind of demo because I am not sure what might be causing it without testing your code? Also please mention what browser you are testing with (or if it happens with all browsers). I will try to check it ASAP.

Thanks!

[admin]

Hi,

In general the SmartMenus core CSS is not designed and intended to be used with the Bootstrap addon – it will break all kinds of things related to your Bootstrap navbar. So it’s not a supported scenario to have both a regular SmartMenus menu and a SmartMenus + Bootstrap addon navbar on the same page.

So I would suggest to either use 2 regular menus or 2 Bootstrap navbars.

[admin]

The script should not affect or break any other functionality on your page. So if you believe this is caused by the SmartMenus script, please post an URL to some kind of demo that I could test and explain what exactly you are trying to achieve and you believe is broken by the SmartMenus script. I will check it ASAP.

Thanks!

[admin]

Hi, you’ve probably not added the following CSS on your page (in addition to “sm-core-css.css” and “sm-simple.css” that you already use):

<!-- #main-menu config - instance specific stuff not covered in the theme -->
<!-- Put this in an external stylesheet if you want the media query to work in IE8 (e.g. where the rest of your page styles are) -->
<style type="text/css">
	@media screen and (min-width: 768px) {
		#main-menu {
			position:relative;
			z-index:9999;
			width:auto;
		}
		#main-menu ul {
			width:12em; /* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */
		}
	}
</style>

Just include this on your page and it should be fine.

[admin]

I think, the visitor will never tap two times, when he does not know, how important these pages are.

Yep, but the same goes for desktop users too. They may just as well skip your section index pages and directly load some of the products pages. So maybe you should reconsider if it’s OK for you to place very important information the users absolutely must see on those index pages and at the same time use dropdowns that provide the possibility to skip them. There are different approaches to solve the potential issue:

– do not include very important information on the section index pages but instead show it on all products pages (I would probably choose this – normally index pages contain just a list of all the child pages)
– do not show the products pages in the dropdowns so that users always need to pass through the index pages and read any important information there
– some other possibilities like mega dropdowns where the index pages are presented by headers and can be loaded on the first tap (but again, this doesn’t solve the issue that they can still be skipped)…

[admin]

OK, I see what you mean. This happens because they use hover CSS menus on desktop that are not mobile optimized. And the delay is the default 300ms click delay before firing the click event that mobile browsers have when you tap a link on the page (browser makers are actually trying to remove that in many scenarios recently). I am not sure what you like about this but it makes the sub menus completely unusable to regular users that are not familiar with their contents. Can you read all the items in 0.3 seconds + plus a variable bit more (depending on your network connection, device and browser loading speed) and then choose the one you are interested in before the parent link is loaded automatically? Of course, not. What happens with further sub menu levels? Try choosing some item from the “Pipe installation” > “Products” sub menu (and remember you have no idea what the items are and first need to read them). I guess you see what I mean.

BTW, I guess you are testing with an older iOS version because in 8.1 I tested with, the first tap on the parent item “Products” activates the sub menu and only a second tap activates the link – it’s not activated automatically. This is obviously because they are trying to make similar non-mobile optimized pure CSS menus usable in some way.

I currently get the behavior you describe on Android (latest Chrome, Firefox and Opera) but as I mentioned, it makes the sub menus completely unusable to regular users.

[admin]

I just tested http://www.tracto-technik.de on Android and iOS and I am not able to observe what you describe. Here is how it behaves for me:

The parent items have 2 active areas that can be tapped. If I tap the text, the link is loaded immediately and no sub menu is displayed. If I tap the arrow, the sub menu is toggled and no link is loaded immediately or in a short while.

Can you explain how exactly you are testing this?

[admin]

Now I also want to start the links of the first or second level by first click. In this case it can show the submenus for a short time, but then link directly on its first click to the page.

Hmm, are you sure about this?

First, please define “a short time”?

And second, if “a short time” is something like a second or two, it doesn’t make sense to show the sub menus at all since the users will not be able to tap any items in them before the parent link is loaded automatically. And if the timeout is longer (e.g. 5-10 seconds or more), it still doesn’t make sense since at some moment after a sub menu is expanded the browser will just start loading the parent link and the users will have no idea what happens..

[Author]

Posts