[admin]

Yes, you could tweak the variables, etc. When you are happy with the result, you could just copy the SASS code or directly the compiled CSS (by clicking “View Compiled” on Codepen) and replace the CSS in “sm-blue.css” with the new one.

Now that you ask, I will probably create a short video tutorial covering the process…

[admin]

From what I understand, 1) and 2) work exactly as you would like by default:

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

so I am not sure what might be wrong for you. Maybe you’ve used some custom CSS that breaks the features but I will need to look at your code to be able to tell for sure.

About 3) you could use a small mod posted here:

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

[admin]

On this page:

http://www.britishsteam.com/smartmenus/sm-mint.htm

jQuery doesn’t seem to be loaded correctly:

http://www.britishsteam.com/smartmenus/jquery.js

Please fix this first and let me know if you still have any problems.

BTW, the upgrade process from 0.9.x to 1.0.x is covered in the following section of the manual:

http://www.smartmenus.org/docs/#upgrading-0-9-x

[admin]

Are you using real links or page anchors? From what you describe, it’s strange that when you click Sub Option 1 the menu does not collapse but when you click Sub Option 2, it does collapse.

Anyway, to solve the issue(s) I will need to look at/test your code, so if possible please post an URL to some kind of live demo.

[admin]

Unfortunately, I am not sure what exactly might be wrong without looking at your code. I guess it’s some simple config issue – e.g. misconfigured id(s) for the second toggle button, etc. but it might be anything really. If you like, please post some kind of demo and I will check it.

[admin]

I just tested and parent item links can be activated. The first click/tap expands the sub menu and the second loads the link. Isn’t that OK?

[admin]

If I understand you correctly (I hope so), you would like the sub menus in collapsible mode to function like an accordion. For that you could use some additional code posted here:

http://www.smartmenus.org/forums/topic/accordion-failed/#post-2660

Just make sure your root UL element has the main-menu id set or change the id in the code if you are using a different id.

[admin]

Hi! I’m not sure I understand very well what you mean. Do you experience the same behavior on the following page:

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

If not, please post some kind of demo of your implementation and try to explain what exactly is wrong with it so that I could investigate the issue.

If yes, then please try to explain a bit better what exactly you mean (e.g. what you are doing step by step and what you are expecting to happen).

Thanks!

[admin]

Ah sorry, didn’t pay attention that you are using v0.9.x! The noMouseOver option is not available in v0.9.x so you can use a small mod posted in this thread:

http://www.smartmenus.org/forums/topic/show-submenus-when-click-only/

Let me know if you still have any troubles.

[admin]

Hi, just use the noMouseOver: true option.

[admin]

You don’t need to modify the script core. You can disable the automatically created sub indicators by using the subIndicators: false option.

[admin]

Yes, v0.9.x had a different bahavior in collapsible mode – i.e. the “+” was just an indicator and not an actual toggle button. So now that you’ve upgraded, the +/- button is a toggle button acting independently from the rest of the menu item so I believe everything should be OK now.

Cheers!

[admin]

Put the code right after your SmartMenus init code:

                $("#main-menu").smartmenus({
                    hideOnClick: true  //, isPopup: true;
//subMenusSubOffsetX: 1,
//                  subMenusSubOffsetY: -8
                }
);

so that it’s called ondomready just like the above and it should work.

[admin]

I saw you are using an iframe to load your links inside, so you could use, for example, something like this:

// simulate a click on the menu toggle button on menu item select in mobile view
$('#main-menu').bind('select.smapi', function(e, item) {
	var obj = $(this).data('smartmenus');
	if (obj.isCollapsible()) {
		$('#main-menu-state')[0].click();
	}
});

[admin]

Hm, just tested with the latest Firefox on Mac. For me, the first click shows the sub menu and the second click loads the link of the parent item. Isn’t this what you need?

[admin]

Ah, sorry for the late reply, I somehow didn’t notice your post.. 😕

This is not possible out of the box right now. On theory you could include another menu tree in the mega menu and init it separately from the parent menu but there would still be some CSS issues currently. Maybe in the future we would consider supporting similar setups.

[admin]

Hi,

If you are using the Bootstrap addon, you need to use <span class="caret"></span> inside the parent item links for the carets and then it should work fine. Because when you add the carets via CSS with a::after the script cannot differentiate between a click on the link and the caret pseudo element.

Cheers!

[admin]

Hi, unfortunately, this cannot be done. Due to the fact that the menus are truly nested UL elements, CSS clipping cannot be used (since sub levels would be clipped) and tall menus can only be scrolled in the browser viewport.

[admin]

Sure, you can send it to smartmenus@smartmenus.org if you like or upload it somewhere and post the link here (as Protected data if you like to keep it between us).

[admin]

Hi,

I am not sure why you would need to use the script for such a basic functionality (that could actually be achieved easily without any JS at all) but here is something that should work as intended:

$(function() {
	var $menu = $('#main-menu');
	$menu.smartmenus({
		subMenusSubOffsetX: 1,
		subMenusSubOffsetY: -8,
		markCurrentItem: true,
		noMouseOver: true,
		hideOnClick: false
	});
	
	// show current sub menu on init
	$menu.smartmenus('itemActivate', $menu.find('a.current').eq(-1));
	
	// prevent activating any items
	$menu.bind('activate.smapi', function() { return false; });
});

Please let me know if you have any troubles.

[admin]

There you go:

// deactivate item's sub on Space if it's activated
$.SmartMenus.prototype.old_rootKeyDown = $.SmartMenus.prototype.rootKeyDown;
$.SmartMenus.prototype.rootKeyDown = function(e) {
	if (!this.handleEvents()) {
		return;
	}
	if (this.isCollapsible()) {
		if (e.keyCode == 32) {
			var $target = $(e.target);
			if ($target.is('a') && this.handleItemEvents($target)) {
				var $sub = $target.dataSM('sub');
				if ($sub && $sub.is(':visible')) {
					this.menuHide($sub);
					e.preventDefault();
					return;
				}
			}
		}
	}
	this.old_rootKeyDown(e);
};

This replaces the default rootKeyDown method so just include it on your page after the script core “jquery.smartmenus.js”.

[admin]

Could you please post a link to some kind of live demo? It’s very difficult to try to debug without being able to see/test your code. Thanks!

[admin]

Options can be passed when initializing the plugin – e.g.:

$('#main-menu').smartmenus({
	noMouseOver: true
});

[admin]

The default scrolling functionality doesn’t provide a handy method to scroll to a certain position at the moment (this is something I’ve already planned as a feature for a future release) but if the long sub menu doesn’t have any additional sub levels, then a real scrollbar can be added to it. Then it’s not a problem to scroll the sub menu programmatically and focus any item when a user starts typing – here is a live example on one of our customers’ site (except that the menu scrolls on a letter link click instead of keyboard typing) – check the “Alle marken” sub menu:

https://www.kosmetikkaufhaus.de/

The additional functionality to scroll as you type is simple to add when a real scrollbar is used (it can be implemented as part of a support response).

[admin]

Yep, more themes will surely be available sooner or later. BTW, the current ones can be customized quite heavily just by editing the SASS variables. If you haven’t tried it, just use the Codepen links on the default demo page. Codepen provides instant preview while you edit the theme:

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

[Author]

Posts