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
- This topic has 4 replies, 2 voices, and was last updated 3 years, 5 months ago by
carasmo.
-
AuthorPosts
-
September 27, 2017 at 17:47 #3719
carasmo
ParticipantHello,
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.
September 28, 2017 at 16:20 #3720admin
KeymasterHi, 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; } });
September 28, 2017 at 20:47 #3721carasmo
ParticipantThat 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 urlAlso 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; } } } );
September 28, 2017 at 22:15 #3722carasmo
ParticipantOkay 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 ) );
September 28, 2017 at 22:16 #3723carasmo
ParticipantThis is resolved. I can’t find a way to mark it though.
-
AuthorPosts
- You must be logged in to reply to this topic.