collapsibleBehavior: accordion BUT if link is only # (hash) open the child

Home Forums Latest release 1.1.x collapsibleBehavior: accordion BUT if link is only # (hash) open the child

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #3719
    carasmo
    Participant

    Hello,

    This menu is the best there is.

    I am using collapsibleBehavior: ‘accordion’ behavior but need to find out if there is a bit of jQuery to add to do the following:

    If the parent link is only a # hash, open the children, otherwise if it’s an actual link, go to the link but on the first tap/click, not the second.

    #3720
    admin
    Keymaster

    Hi, could be achieved in different ways but here’s what I came up with at the moment:

    1) First use collapsibleBehavior: 'accordion-link' instead.

    2) Then use the following additional JS:

    // SmartMenus jQuery - for href="#" items, expand sub menu (if available) on first tap
    $('#main-menu').on('select.smapi', function(e, item) {
      var obj = $(this).data('smartmenus'),
          $item = $(item);
      if (obj.isCollapsible() && $item.is('[href="#"]')) {
        var $sub = $item.dataSM('sub');
        if ($sub && !$sub.is(':visible')) {
          obj.itemActivate($item, true);
        }
        return false;
      }
    });
    #3721
    carasmo
    Participant

    That works great!

    Here’s the final js to do the following:

    -Keep open on current url
    -If parent only an # toggle the children and close on click
    -If link is a link go to the url

    Also checked that the aria labels worked and they do!

    You are amazing — thank you so much.

    
    
    
    //__ SmartMenus.org args
    var $primary_menu = $('.menu-secondary');
    
    //__ keep open on current
    $primary_menu.smartmenus( 'itemActivate', $primary_menu.find( 'a.current' ).eq( -1 ) );
    
    /* 
     * if parent is a #, toggle children
     * if parent is a #, toggling the title closes children
     * if parent is a link, go to url on first click
    */
    $primary_menu.smartmenus( {
        subMenusMinWidth:    '250px',
        showTimeout:         '300',
        markCurrentItem:     true,
        collapsibleBehavior: 'accordion-link',
        hideOnClick:         false
        
    } ).on( 'select.smapi', function( e, item ) {
        
        var obj   = $(this).data( 'smartmenus' ),
            $item = $(item);
            
        if ( obj.isCollapsible() && $item.is('[href="#"]') ) {
            var $sub = $item.dataSM( 'sub' );
            if ( $sub && !$sub.is( ':visible') ) {
                obj.itemActivate( $item, true );
            }
            return false;
        }
    } ).bind('click.smapi', function( e, item ) {
    
        var obj = $( this ).data( 'smartmenus' );
        
        if ( obj.isCollapsible() ) {
            var $sub = $( item ).dataSM( 'sub' );
            if ( $sub && $sub.is( ':visible' ) ) {
                obj.menuHide( $sub );
                return false;
            }
        }
    } );
    
    #3722
    carasmo
    Participant

    Okay that code above is wrong for the current open. Needs to come after.

    //__ SmartMenus.org args
    var $primary_menu = $('.menu-secondary');
    
    /* 
     * if parent is a #, toggle children
     * if parent is a #, toggling the title closes children
     * if parent is a link, go to url on first click
    */
    $primary_menu.smartmenus( {
        subMenusMinWidth:    '250px',
        showTimeout:         '300',
        markCurrentItem:     true,
        collapsibleBehavior: 'accordion-link',
        hideOnClick:         false
        
    } ).on( 'select.smapi', function( e, item ) {
        
        var obj   = $(this).data( 'smartmenus' ),
            $item = $(item);
            
        if ( obj.isCollapsible() && $item.is('[href="#"]') ) {
            var $sub = $item.dataSM( 'sub' );
            if ( $sub && !$sub.is( ':visible') ) {
                obj.itemActivate( $item, true );
            }
            return false;
        }
    } ).bind('click.smapi', function( e, item ) {
    
        var obj = $( this ).data( 'smartmenus' );
        
        if ( obj.isCollapsible() ) {
            var $sub = $( item ).dataSM( 'sub' );
            if ( $sub && $sub.is( ':visible' ) ) {
                obj.menuHide( $sub );
                return false;
            }
        }
    } );
    		
    //__ keep open on current
    $primary_menu.smartmenus( 'itemActivate', $primary_menu.find( 'a.current' ).eq( -1 ) );	
    
    #3723
    carasmo
    Participant

    This is resolved. I can’t find a way to mark it though.

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?