More option for desktop menu?
Home › Forums › Older releases › 1.0.x › More option for desktop menu?
- This topic has 6 replies, 2 voices, and was last updated 5 years, 2 months ago by
pcobb.
-
AuthorPosts
-
February 2, 2016 at 15:24 #3009
pcobb
ParticipantAfter 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
February 4, 2016 at 11:46 #3011admin
KeymasterAs 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!
February 4, 2016 at 11:54 #3012pcobb
ParticipantMany thanks for your response.
I look forward to seeing what you can do.
Many thanks,Paul
February 10, 2016 at 11:33 #3015admin
KeymasterOK, 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.
February 15, 2016 at 17:33 #3021pcobb
ParticipantDo 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
February 15, 2016 at 18:03 #3027admin
KeymasterAs 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.February 15, 2016 at 18:30 #3028pcobb
ParticipantGot it now thanks – I will have a little experimentation now.
Thanks for the speedy response
-
AuthorPosts
- You must be logged in to reply to this topic.