[admin]

That’s a good question. I am currently working on an important client project which will hopefully be completed within a couple of weeks. And then I can fully concentrate on finishing the next SmartMenus release which will be the foundation for the v1.0.0 release. It should hopefully be ready within a month. From there it might be one or two bug fix releases before the final v1.0.0.

So in short, it might be something like 2 months from now but that’s a very rough estimate since I haven’t actually set any deadlines for the project and in general serious client work has priority (at least for now).

[admin]

Hi, glad you like the script!

Just put this line:

$("#main-menu").smartmenus("itemActivate", $("#main-menu").find("a.current").eq( - 1));

inside the domready handler (at the moment it’s after it) along with the SmartMenus init call like this:

$(function() {
	$('#main-menu').smartmenus({
		subMenusSubOffsetX: 1,
		subMenusSubOffsetY: -8,
		markCurrentItem: true,
		markCurrentTree: true,
		hideOnClick: false
	});
	$("#main-menu").smartmenus("itemActivate", $("#main-menu").find("a.current").eq( - 1));
});

and it should work.

Cheers!

[admin]

Yep, there is a pretty simple fix. The thing is when you add the “navbar-right” class to the root UL element, Bootstrap will automatically right align all sub menus (and the SmartMenus script respects all Bootstrap styles.) So to avoid the issue do not add that class but instead right align the main menu “manually”. For example, you can set an id “main-menu” to your root UL element:

<ul id="main-menu" class="nav navbar-nav">

and then use the following additional CSS:

#main-menu {
	float: right !important;
	margin-right: -15px;
}

Cheers!

[admin]

Yeah, the jsfiddle “show” page uses an IFRAME too that is higher than the actual parent page viewport and that’s why this happens. You won’t see anything like this on a regular non-framed page.

As for the other issue you mention – it seems on one of your test computers the resolution is smaller and the browser window is not wide enough to display the desktop mode dropdowns but instead shows the menu in the responsive collapsible mode. You can test that on any computer or browser by manually adjusting the width of the browser window.

As for paid support, I still have some planned work on some new features and once they are ready, this will be the foundation for the 1.0.0 release. There might also be one or two betas before the final 1.0.0 release. Once it’s released, we’ll start offering paid support to interested users but not before that.

Cheers!

[admin]

Hi and sorry for this late reply! I just had too much urgent work recently and also the holidays and I wasn’t able to check the forums.

Yes, that’s a side effect of the automatically added carets – they are added ondomready when the menus are initialized and that’s why the effect can be noticed on page reload. You can disable this feature if you like and add manually Bootstrap carets to the items directly in the source. Here I’ve explained how you can disable the automatically added carets:

http://www.smartmenus.org/forums/topic/control-caret-drawn

Please let me know if you still have any troubles.

[admin]

Hi and sorry for the late reply! Just had too much urgent work recently and plus the holidays.

I didn’t realize you were using the Bootstrap add-on. So, what you’ve done should work like normally (i.e. adding the id to the UL and calling the code onDomReady). Just in addition, you will need to comment out/delete the following code from “jquery.smartmenus.bootstrap.js” (or the min version if you use it):

,
// 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, sorry for the late reply! I just didn’t have any chance to look at the forum last week or so (too much urgent work and also the holidays). As far as I can see, your page does not include the script any more so, unfortunately, I cannot test right now. But in general, if you are using Bootstrap, then it’s much better to use the Bootstrap add-on instead of a separate SmartMenus theme like “sm-clean”. Here is a demo for a fixed top navbar:

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

It will make sure all Bootstrap navbars functionality works like normally (including the Bootstrap theme, breakpoints, etc.) and will save you a lot configuration efforts.

[admin]

Thanks for your kind words! I always try to answer forum questions when I am not too overwhelmed with work, so no problem at all. 🙂

Normally, you can achieve this with an additional menu toggle button that is only visible when the menu is in collapsible mode. There is a short tutorial with some demo code in the docs so please take a look at it and let me know if you have any troubles:

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

Cheers!

[admin]

Hi,

This was addressed in the latest release v0.9.7. Please first make sure you are using it and let me know if you still have any troubles.

Thanks!

[admin]

Here is the same demo I posted above but with your exact HTML structure:

http://jsfiddle.net/nty4ovan/
http://fiddle.jshell.net/nty4ovan/show/ (direct link to the Result frame)

So, yes, this is exactly the window size detection feature in action that makes sure any sub menu is displayed within the browser viewport and all items are accessible. The feature is controlled with the keepInViewport: true/false option.

No need to pay anything for this, it’s an essential built-in feature. BTW, it gets more interesting when your sub menus are long enough to not fit entirely in the viewport height. You can test that too if you like, just play with the fiddle.. 🙂

PS: I am Vasil Dinkov – using admin, just makes it clearer to other forum users that I am actually the forum admin and am directly associated with the project.

[admin]

Ah, I now realize you are actually most likely asking about the window size detection feature and not about speed. Yes, the script has a built-in feature controlled with the keepInViewport: true/false option that when enabled will try to always keep any opening sub menu visible inside the browser viewport. You can test that too in the above demo.

[admin]

Hi, in general the script is designed carefully so that both the load and runtime speed depend as little as possible on the size of the unordered list – e.g. event delegation is used instead of hooking events to the menu items directly, most calculations and sub menu initialization tasks are done on demand at runtime, etc… So the script should handle big or even huge lists quite well. Here is a quick demo using the latest version (you may need to enlarge your browser window to test the dropdowns instead of the collapsible mode):

http://jsfiddle.net/4gscz846/1/

The list is an actual real world example from a client that I’ve used for testing during the development of the jQuery plugin (though he used it with the original non-jQuery version of the script).

Cheers!

[admin]

Hi,

You can control the SmartMenus added carets via the subIndicators: true/false option. In order to change this, you will need to edit the “jquery.smartmenus.bootstrap.js” file and add the option here:

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

						subIndicators: false,

						// 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')
		})

BTW, thanks for sharing your suggestion! I will consider it for the future.

Cheers!

[admin]

OK, thanks for the explanation! You will need to remove the styles that make your menu tree collapsible on small screen devices. I am not sure which theme you’ve used (since it’s obviously modified for your needs) but basically you will need to remove all media queries from the theme – i.e. just delete everything in the theme CSS file after the following comment:

/*
---------------------------------------------------------------
  Responsiveness
  These will make the sub menus collapsible when the screen width is too small.
---------------------------------------------------------------*/

Cheers!

[admin]

Please take a look at the following topic. There is some sample code how to achieve what you would like:

http://www.smartmenus.org/forums/topic/toggle-and-a-link

Please let me know if you still have any questions after that.

[admin]

Hi, please take a look here:

http://www.smartmenus.org/forums/topic/smartmenu-dropdown-doesnt-work-if-main-menu-is-display-inline

I’ve posted some sample CSS code that will center align your main menu items.

[admin]

Hm, to be honest I am not sure I understand very well your question. By default in collapsible mode the main menu is visible and the 2+ levels are collapsed and can be expanded by the user. If you are asking how to hide the main menu too and only show it when clicking your menu toggle button, then please take a look here to learn how to configure your menu button:

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

If this is not what you are asking, please try to explain again.

[admin]

Hi, you will need to override the default options which are:

subMenusMinWidth: '10em',	// min-width for the sub menus (any CSS unit) - if set, the fixed width set in CSS will be ignored
subMenusMaxWidth: '20em',	// max-width for the sub menus (any CSS unit) - if set, the fixed width set in CSS will be ignored

To do this, you need to edit the following in “jquery.smartmenus.bootstrap.js”:

		$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')
		})

and pass the subMenusMaxWidth option with a desired value (could be even '' if you don’t want any max-width constraint):

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

						subMenusMaxWidth: '30em',
						// 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')
		})

Let me know if you still have any troubles.

[admin]

You will need to call a JS function that will update your DIV on item click. Here is some sample code (of course, it can be done in many other ways):

HTML

<li><a href="#" data-page="home">Home</a></li>

JS

$('#main-menu').bind('select.smapi', function(e, item) {
	var page = $(item).data('page');
	// code to fetch the new page and update the DIV content
	// loadPage(page);
	return false;
});

[admin]

It should be. At least I am not aware of any compatibility issues with it.

[admin]

Make sure this line:

$("#dk-main-menu").smartmenus("itemActivate", $("#dk-main-menu").find("a.current").eq( - 1));

is called on document ready – e.g. put it right after this:

		$('#dk-main-menu').smartmenus({
			subMenusSubOffsetX: 1,
			subMenusSubOffsetY: -8,
			markCurrentItem: true,
			markCurrentTree: true,
			hideOnClick: false
		});

and it should work.

Cheers!

[admin]

Hi, yes, you can use the CSS code sample I’ve posted in the following topic:

http://www.smartmenus.org/forums/topic/smartmenu-dropdown-doesnt-work-if-main-menu-is-display-inline

It will make the items center aligned. To align them to the right, just change the following rule:

#main-menu {
	text-align:center;
}

to:

#main-menu {
	text-align:right;
}

[admin]

You don’t really need to care what it does. Just remember to call it after you’ve applied any effects in any custom showFunction you might use – e.g.:

showFunction: function($ul, complete) {
	var curHeight = $ul.css('height');
	$ul.css({ display: 'block', height: 0 }).animate({ height: curHeight }, 200, function() {
		$(this).css({ height: '' });
		// just call complete() at the end
		complete();
	});
}

It’s used for some built-in fixes – you can search the code of “jquery.smartmenus.js” if you’d like to get further details.

[admin]

Please check this topic and let me know if you still have any questions:

http://www.smartmenus.org/forums/topic/vertical-menu-expanded-on-page-load

[admin]

Hi, you could use the following:

$('#main-menu').bind('select.smapi', function(e, item) {
	$('#menu-button').click();
});

If you use a different id for your menu button, just update #menu-button accordingly.

Let me know if you still have any troubles (a live demo would also help very much).

Cheers!

[Author]

Posts