Submenu is open indicator

Home Forums Older releases 0.9.x Submenu is open indicator

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1271
    JonnyQ
    Participant

    Would it be possible to show an icon of sorts to indicate that a menu has been opened, eq. a minus sign replacing the plus sign when toggling the submenu open in the Mobile display?

    #1462
    admin
    Keymaster

    Yep, the script has a pretty good API and it’s possible to modify the behavior in many ways quite easily. I have planned to add some samples in the docs soon too but anyway.

    First let me explain why it works like that by default since I think this is quite important. When in collapsible mode, the first click/tap on a menu item that has a sub menu activates the sub menu and the second click loads the item link. This allows setting actual links that work even in collapsible mode to the parent menu items which many users prefer being able to do. That’s why by default we hide the sub menu indicators after the first click instead of, for example, showing a minus “-” since that would easily trick the end users into thinking that clicking again would collapse the sub menu instead of activating the item’s link.

    Now here are some instructions how to modify this behavior if you like:

    1) Comment out/delete the following rule in the theme CSS file (e.g. “sm-blue.css”) – it’s inside the last media query:

    /* Sub menu indicators
    ===================*/
    	...
    	/* Hide sub indicator "+" when item is expanded - we enable the item link when it's expanded */
    	.sm-blue a.highlighted span.sub-arrow {
    		display:none !important;
    	}

    This will make sure the indicators are not hidden when the sub menu is expanded.

    2) Choose one of these JS mods and add it on your page:

    a) Variant 1 – Click/tap to toggle the sub menus in collapsible mode:

    // click/tap to toggle the sub menus in collapsible mode
    var lastClicked = null;
    $('#main-menu').bind('click.smapi', function(e, item) {
    	var obj = $(this).data('smartmenus');
    	if (obj.isCollapsible()) {
    		lastClicked = item;
    		var $sub = $(item).parent().dataSM('sub');
    		if ($sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
    			obj.menuHide($sub);
    			return false;
    		}
    	}
    });
    $('#main-menu').bind('beforehide.smapi', function(e, menu) {
    	if (lastClicked && lastClicked != $(menu).dataSM('parent-a')[0]) {
    		lastClicked = null;
    		return false;
    	}
    });
    $('#main-menu').bind('show.smapi', function(e, menu) {
    	$(menu).dataSM('parent-a').children('span.sub-arrow').text('-');
    });
    $('#main-menu').bind('hide.smapi', function(e, menu) {
    	$(menu).dataSM('parent-a').children('span.sub-arrow').text('+');
    });

    b) Variant 2 – Click/tap to toggle the sub menus in collapsible mode and also reset deeper levels and other expanded branches:

    // click/tap to toggle the sub menus in collapsible mode (reset deeper levels and other branches too)
    $('#main-menu').bind('click.smapi', function(e, item) {
    	var obj = $(this).data('smartmenus');
    	if (obj.isCollapsible()) {
    		var $item = $(item),
    			$sub = $item.parent().dataSM('sub');
    		if ($sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
    			obj.itemActivate($item);
    			obj.menuHide($sub);
    			return false;
    		}
    	}
    });
    $('#main-menu').bind('show.smapi', function(e, menu) {
    	$(menu).dataSM('parent-a').children('span.sub-arrow').text('-');
    });
    $('#main-menu').bind('hide.smapi', function(e, menu) {
    	$(menu).dataSM('parent-a').children('span.sub-arrow').text('+');
    });

    Any of these mods will make sure parent menu items only toggle their sub menus on click/tap when in collapsible mode (also meaning it makes it impossible to activate their link). These also make sure the text in the sub indicators is toggled when a sub menu is shown/hidden – i.e. “+” or “-” is displayed.

    Hope this helps. Please let me know if you have any questions.

    #1728
    mishochu
    Participant

    I was able to make this work by default. Please check out the pull request https://github.com/vadikom/smartmenus/pull/15. In collapsible mode, the first click/tap on a menu item that has a sub menu activates the sub menu and the second click loads the item link (unless the click originates from the sub indicator itself. The actual links still works even in collapsible mode so long as the click is not on the sub indicator. So you no longer need to hid the sub menu indicator by default. This will not trick the end users since they can either collapse the sub menu instead of activating the item’s link or just go ahead and click on any other visual part of the link element and the link is navigated.

Viewing 3 posts - 1 through 3 (of 3 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?