More option for desktop menu?

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #3009
    pcobb
    Participant

    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

    #3011
    admin
    Keymaster

    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!

    #3012
    pcobb
    Participant

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

    Paul

    #3015
    admin
    Keymaster

    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.

    #3021
    pcobb
    Participant

    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

    #3027
    admin
    Keymaster

    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.

    #3028
    pcobb
    Participant

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

    Thanks for the speedy response

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?