Re: Toggle and a Link

Home Forums Older releases 0.9.x Toggle and a Link Re: Toggle and a Link

#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!

Register

You will be emailed a link to set your password.

Login

Lost password?