Automatically close sub menus when opening other sub menus
Home › Forums › Older releases › 1.0.x › Automatically close sub menus when opening other sub menus
- This topic has 10 replies, 2 voices, and was last updated 5 years, 4 months ago by
admin.
-
AuthorPosts
-
September 25, 2015 at 07:49 #2764
katieTBA
ParticipantHello!
Thank you for the great menu; it’s so useful!
I have a quick question: on the responsive version of the menu, I would like only one sub menu to display at a time. In other words, if the user clicks on a main menu item to open a sub menu, any other sub menu that was open would automatically close. Is this something that is possible to do?
Thanks again!
September 25, 2015 at 15:02 #2766admin
KeymasterHi! Yes, it’s possible. Take a look at this post for details:
http://www.smartmenus.org/forums/topic/accordion-failed/#post-2660
and let me know if you have any questions.
September 28, 2015 at 04:17 #2769katieTBA
ParticipantGreat, thanks! Here is the script as I now have it in the <head>:
<script type="text/javascript"> $(function() { $('#main-menu').bind('click.smapi', function(e, item) { var obj = $(this).data('smartmenus'); if (obj.isCollapsible()) { var $item = $(item), $sub = $item.dataSM('sub'); if ($sub && !$sub.is(':visible')) { obj.itemActivate($item, true); return false; } } }); $('#main-menu').smartmenus({ }); $('#menu-button').click(function() { var $this = $(this), $menu = $('#main-menu'); if ($menu.is(':animated')) { return false; } if (!$this.hasClass('collapsed')) { $menu.slideUp(250, function() { $(this).addClass('collapsed').css('display', ''); }); $this.addClass('collapsed'); } else { $menu.slideDown(250, function() { $(this).removeClass('collapsed'); }); $this.removeClass('collapsed'); } return false; }); }); </script>
That works! Just wanted to double-check: I’m not unnecessarily duplicating anything, am I?
Thanks again!
September 28, 2015 at 05:40 #2770katieTBA
ParticipantAlso, I’m seeing the issue that you mentioned (“it is sometimes not appropriate to auto collapse other branches since the active item might be scrolled out of view”). Is there a way to keep the accordion functionality, but also auto scroll to the main menu item that was clicked so that no part of the expanded sub menu section gets pushed off screen?
October 1, 2015 at 12:43 #2772admin
KeymasterYep, your code looks OK.
Is there a way to keep the accordion functionality, but also auto scroll to the main menu item that was clicked so that no part of the expanded sub menu section gets pushed off screen?
On theory auto scrolling is not a problem (in most cases), but it’s not producing a good user experience either and that’s why it’s not used in similar accordion scripts.
October 2, 2015 at 06:14 #2773katieTBA
ParticipantThanks for your response! I’m not quite sure I understand…let me see if I can put my question another way. It seems like the problem that you identified in your earlier version of the script (the version that allowed for accordion functionality) is that part of an expanded sub menu might be scrolled out of view when a menu above it is auto collapsed. Would it be possible to not only auto collapse a sub menu when another main menu item is clicked on, but also at the same time scroll the clicked on main menu item to the top of the screen, so that its expanded sub menu will show in full?
Thanks again, you have been so helpful!
October 9, 2015 at 15:24 #2776admin
KeymasterSorry, for this delay! It’s been a crazy week here.
Yep, I understood what you mean. Here is a quick demo of how it can be done (this is not using the SmartMenus plugin but it’s not a problem to achieve the same thing with it):
http://www.nygaardtoender.com/produkter/damer/
Check the “KATEGORIER” menu. I personally don’t find the auto-scrolling when a sub menu is expanded user friendly either – it can still cause confusion.
Let me know if you like this and I will create a demo for you.
October 11, 2015 at 05:22 #2778katieTBA
ParticipantYes, the behavior of the menu on the site you linked to is exactly what I’m looking for! It would be great if you could create a demo; thank you again for all your help!
October 12, 2015 at 11:41 #2780admin
KeymasterOK, here is the demo:
http://jsfiddle.net/9xtnk2zc/1/
You will need the jQuery scrollTo plugin for the scrolling and then just use a custom
collapsibleShowFunction
when you initialise the SmartMenus plugin:// custom function to auto scroll to activated parent item in collapsible mode collapsibleShowFunction: function($ul, complete) { $ul.slideDown(200, function() { complete(); // auto scroll to parent item $(window).scrollTo($ul.dataSM('parent-a'), 500); }); }
Cheers!
October 21, 2015 at 08:43 #2782katieTBA
ParticipantI haven’t tested it yet in all mobile devices, but so far this works beautifully! Thank you so much for your help – you’ve been invaluable! 🙂
October 22, 2015 at 12:29 #2785admin
KeymasterNp at all! It should work on all recent devices, nothing too funky is used. 🙂
Cheers!
-
AuthorPosts
- You must be logged in to reply to this topic.