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.

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 25, 2015 at 07:49 #2764
    katieTBA
    Participant

    Hello!

    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 #2766
    admin
    Keymaster

    Hi! 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 #2769
    katieTBA
    Participant

    Great, 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 #2770
    katieTBA
    Participant

    Also, 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 #2772
    admin
    Keymaster

    Yep, 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 #2773
    katieTBA
    Participant

    Thanks 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 #2776
    admin
    Keymaster

    Sorry, 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 #2778
    katieTBA
    Participant

    Yes, 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 #2780
    admin
    Keymaster

    OK, 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 #2782
    katieTBA
    Participant

    I 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 #2785
    admin
    Keymaster

    Np at all! It should work on all recent devices, nothing too funky is used. 🙂

    Cheers!

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘1.0.x’ is closed to new topics and replies.