Vertical dropdown with toogle link clickable and submenu always open

Home Forums Older releases 0.9.x Vertical dropdown with toogle link clickable and submenu always open

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #2893
    jimbob
    Participant

    Hi,
    it seems that i have a very exotic wish to use this wonderful menu.
    1.)
    I like to use smartmenu for a vertical accordeon menu, where the toogle link (I mean the parent link) is clickable (to another site) and not only a toogle to open the submenu, and

    2.)
    if a link in the submenu is clicked – that the submenus still remains open and is not closed after page load.

    Part 1 is solved – i think so (with help of this forum) with this code

    
    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('+');
    		}
    	});
    
    

    but how can i keep the submenu open if active?

    Nay help would be wonderful.

    Thanks
    Jimbob

    #2894
    jimbob
    Participant

    Its crazy.
    Searching 2 days for a solution of this problem and found it 5 minutes after posting in this forum.

    Here is the solution:

    
    
    $(function() {
    		$('#main-menu').smartmenus({
    			mainMenuSubOffsetX: 1,
    			mainMenuSubOffsetY: -8,
    			markCurrentItem: true,
    		markCurrentTree: true,
    		hideOnClick: false
    		});
    $("#main-menu").smartmenus("itemActivate", $("#main-menu").find("a.current").eq( - 1));
    	
    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('+');
    		}
    	});
    
    
    
    });
    
    

    Greetings
    jimbob

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