Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Reply To: More option for desktop menu?

Home Forums Older releases 1.0.x More option for desktop menu? Reply To: More option for desktop menu?


OK, here is something that should work (even if you are using any SmartMenus addon). You need to include this on your page after the SmartMenus script “jquery.smartmenus.js”:

$.SmartMenus.prototype.old_init = $.SmartMenus.prototype.init;
$.SmartMenus.prototype.init = function(refresh) {
	if (!refresh && !this.$root.hasClass('sm-vertical')) {
		var $originalItems = this.$root.children('li'),
			$moreSub = this.$root.clone().removeAttr('id').removeAttr('class').addClass('dropdown-menu'),
			$moreSubItems = $moreSub.children('li'),
			$moreItem = $('<li><a href="#">More <span class="caret"></span></a></li>').append($moreSub).appendTo(this.$root),
			self = this,
			hiddenItems = [],
			hiddenMoreItems = [];


	if (!refresh && !this.$root.hasClass('sm-vertical')) {
		function handleResize() {
			var curWidth = $(window).width();
			if (vieportW !== curWidth) {
				// hide More item

				// show all main menu items
				$.each(hiddenItems, function() { $(this).appendTo(self.$root); });
				hiddenItems = [];

				// show all More sub items
				$.each(hiddenMoreItems, function() { $(this).prependTo($moreSub); });
				hiddenMoreItems = [];

				// if in desktop view and the last item is wrapped
				if (!self.isCollapsible() && $originalItems.eq(-1)[0].offsetTop != $originalItems.eq(0)[0].offsetTop) {
					// show More item

					// while the More item is wrapped
					while ($moreItem[0].offsetTop != $originalItems.eq(0)[0].offsetTop) {

					// hide proper More sub items
					$moreSubItems.slice(0, $moreSubItems.length - hiddenItems.length).each(function() {

				// save new viewport width
				vieportW = curWidth;

		$(window).bind('load.smartmenus resize.smartmenus', handleResize);

It doesn’t need any configuration and will work for any horizontal main menu.

I like the idea very much and in the future this might actually become an official addon after some possible code optimizations, etc. But it should work just fine for now as it is.

Please let me know if you have any questions.