More option for desktop menu?

[pcobb]

After extensive searching I have found your menu and am liking it immensely.
I am in the process of testing and tweaking for an existing site.
One requirement i have been asked to include is the ability to have a ‘more’ option if the horizontal desktop menu is too narrow to display all the top level menu items on a single line.
Is this do-able do you think – as this would make the solution perfect!
Thanks,

Paul

[admin]

As I am thinking, it can’t be done just with CSS but a JS solution is possible and not too difficult on theory. I will try to find some time in the coming days and prototype something.

I will post again here when there’s any news…

Cheers!

[pcobb]

Many thanks for your response.
I look forward to seeing what you can do.
Many thanks,

Paul

[admin]

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,
			vieportW,
			hiddenItems = [],
			hiddenMoreItems = [];
	}

	this.old_init(refresh);

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

				// 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
					$moreItem.appendTo(self.$root);

					// while the More item is wrapped
					while ($moreItem[0].offsetTop != $originalItems.eq(0)[0].offsetTop) {
						hiddenItems.unshift($moreItem.prev('li').detach());
					};

					// hide proper More sub items
					$moreSubItems.slice(0, $moreSubItems.length - hiddenItems.length).each(function() {
						hiddenMoreItems.unshift($(this).detach());
					});
				}

				// save new viewport width
				vieportW = curWidth;
			}
		}
		handleResize();

		$(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.

[pcobb]

Do i just include this as text in the head of my page or do i need to include a file with the content in it?
I tried initially and all I am seeing is the code displayed at the top of the page when rendered.

Thanks,

Paul

[admin]

As a start, you could put it between <script type="text/javascript"> and </script> tags. Then if you would like to keep the functionality, it’s better to add the code in a .js file and link it after the SmartMenus core “jquery.smartmenus.js” file in the page source.

[pcobb]

Got it now thanks – I will have a little experimentation now.

Thanks for the speedy response

[Author]

Posts