1. General discussions
  2. Saturday, 02 December 2017
Hi. I am using the Aspasia template and other JoomShaper templates for different sites. I would like to add an override for the menu navigation in the main menu bar so that users can use the keyboard keys - the "tab" key to tab through the sub menu items.

Currently users can tab through the main menu items but not the sub menu items unless you use the mouse to put the cursor in the sub menu items, then they display and you can tab to each sub menu item.

What files should I copy to the template html directory? What code should I change to add a focus event so that when navigating the sub menus, they are displayed and there is a focus on each sub menu item?
Responses (5)
Hi there,

We are really sorry to say that, we don't provide customization support. We can only help you to find out the file location.

plugins/system/helix3
templates/shaper_helix3/features/menu.php

-Thanks
  1. more than a month ago
  2. General discussions
  3. # 1
Hi there,

We are really sorry to say that, we don't provide customization support. We can only help you to find out the file location.

plugins/system/helix3
templates/shaper_helix3/features/menu.php

-Thanks


____


We ended up solving the problem in a Joomla site with the Aspasia template. We added jquery code to the top of templates/<template name>/js/main.js:

jQuery('.sp-megamenu-parent > .sp-menu-item > a').on('focus', function(event){
jQuery('.sp-has-child > div').css('display'.'none');
});
jQuery('.sp-megamenu-parent > .sp-has-child > a').on('focus', function(event){
jQuery(event.target.nextSibling).css('display'.'block');
});

Is there a better place to put this code? We put this code in the template style Javascript custom code area but nothing changed. Putting it in the main.js file worked. I just hope it is not overwritten when I upgrade the template and Joomla. I know files under the <template>/html directory are safe and the <tempalte>/css/custom.css file is safe.

We are working hard to make our Joomla sites keyboard accessible. I hope this helps other people.The next challenge is to make a carousel keyboard accessible - press tab to navigate a carousel slides and have a pause link. Any suggestions would be helpful. This would be a feature change for the carousel. Any place to request a feature?
  1. more than a month ago
  2. General discussions
  3. # 2
Hi there,

We are really sorry to say that, we don't provide customization support. We can only help you to find out the file location.

plugins/system/helix3
templates/shaper_helix3/features/menu.php

-Thanks


____


We ended up solving the problem in a Joomla site with the Aspasia template. We added jquery code to the top of templates/<template name>/js/main.js:

jQuery('.sp-megamenu-parent > .sp-menu-item > a').on('focus', function(event){
jQuery('.sp-has-child > div').css('display'.'none');
});
jQuery('.sp-megamenu-parent > .sp-has-child > a').on('focus', function(event){
jQuery(event.target.nextSibling).css('display'.'block');
});

Is there a better place to put this code? We put this code in the template style Javascript custom code area but nothing changed. Putting it in the main.js file worked. I just hope it is not overwritten when I upgrade the template and Joomla. I know files under the <template>/html directory are safe and the <tempalte>/css/custom.css file is safe.

We are working hard to make our Joomla sites keyboard accessible. I hope this helps other people.The next challenge is to make a carousel keyboard accessible - press tab to navigate a carousel slides and have a pause link. Any suggestions would be helpful. This would be a feature change for the carousel. Any place to request a feature?


Hi, I would request to you that, please write down your javascript code inside the main.js file and keep a backup of this file. Thanks
  1. more than a month ago
  2. General discussions
  3. # 3
Revisiting this since I also would also like to incorporate keyboard navigation as required by WCAG ... when I apply the code you mention in Helix 3 I get an error 'SyntaxError: Unexpected string' ...

In DW I also see 'Parsing error: Unexpected token 'none'

Has anyone else had any luck getting this to work?

Thanks in advance for any assistance
  1. more than a month ago
  2. General discussions
  3. # 4
Revisiting this since I also would also like to incorporate keyboard navigation as required by WCAG ... when I apply the code you mention in Helix 3 I get an error 'SyntaxError: Unexpected string' ...

In DW I also see 'Parsing error: Unexpected token 'none'

Has anyone else had any luck getting this to work?

Thanks in advance for any assistance


Hi there, Just create a new forum post and provide me your FTP access & Joomla administrator access via PM. Thanks
  1. more than a month ago
  2. General discussions
  3. # 5


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.