Toggle and a Link

Home Forums Older releases 0.9.x Toggle and a Link

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1297
    beerye
    Participant

    Hi, I’m currently using Smartmenus on a client site but they have asked for a change from the default behavior. For navigation items that have a submenu in the mobile view, they would like to have the parent link be clickable and separate from the toggle. I followed the advice on another discussion here about adding the “minus” sign on toggle (also what they wanted) but now the parent link is unclickable and only serves as part of the toggle. Is there a way to achieve this?

    Thanks for any advice.

    #1516
    admin
    Keymaster

    Hi, here is how you could do it (there might be even a bit simpler way to achieve it but this is what came to my mind at the moment).

    I think it makes sense to use the sub arrows (SPAN’s) as toggle elements since they are already there for us. You might just need to tweak their style on small screens – i.e. make them bigger and easier to hit, tweak their positions, etc. And then you need just the following additional JS ondomready:

    var $mainMenu = $('#main-menu').on('click', 'span.sub-arrow', function(e) {
    		// toggle the sub menu on sub arrow click in collapsible mode
    		var obj = $mainMenu.data('smartmenus');
    		if (obj.isCollapsible()) {
    			var $item = $(this).parent(),
    				$sub = $item.parent().dataSM('sub'),
    				subIsVisible = $sub.dataSM('shown-before') && $sub.is(':visible');
    			$sub.dataSM('arrowClicked', true);
    			obj.itemActivate($item);
    			if (subIsVisible) {
    				obj.menuHide($sub);
    			}
    			e.stopPropagation();
    			e.preventDefault();
    		}
    	}).bind({
    		// don't show the sub menu in collapsible mode unless the sub arrow is clicked
    		'beforeshow.smapi': function(e, menu) {
    			var obj = $mainMenu.data('smartmenus');
    			if (obj.isCollapsible()) {
    				var $menu = $(menu);
    				if (!$menu.dataSM('arrowClicked')) {
    					return false;
    				}
    				$menu.removeDataSM('arrowClicked');
    			}
    		},
    		'show.smapi': function(e, menu) {
    			$(menu).dataSM('parent-a').children('span.sub-arrow').text('-');
    		},
    		'hide.smapi': function(e, menu) {
    			$(menu).dataSM('parent-a').children('span.sub-arrow').text('+');
    		}
    	});

    Please let me know if you have any questions.

    Cheers!

    #1517
    beerye
    Participant

    Works perfectly, thank you for the quick response and such a robust plugin.

    #2397
    justin_xyn
    Participant

    Hi admin,
    I’m using the Bootstrap version and I want to be able to do the same thing – ie, at collapsed/mobile, allow the parent link to follow the href and only toggle using the span.sub-arrow

    I tried this code, but it’s not working for the Bootstrap version. Any advice?

    Thanks in advance,
    Justin

    #2398
    justin_xyn
    Participant

    Sorry, ignore that for a second – I think I got it working… had a typo! Doh!

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