Comments (5)
Use a media query and display none on the mega menu. Then display block on your custom menu.
from accessible-mega-menu.
What if I want to use the same menu for both mobile and desktop so doing a display none is not an option? I'm using a CMS and trying to be SEO conscious to not duplicate navigation links that would confuse Google's bots.
Are there any methods for destroying and re-initializing the megamenu js on resize? My event handlers won't function over top of the libraries.
from accessible-mega-menu.
I created a destroy function right below "setOptions" around line 825
destroy: function() {
$(this.menu).off('.accessible-megamenu');
}
Initiate
$("nav:first").accessibleMegaMenu(megamenu);
Remove
$('nav:first').data('plugin_accessibleMegaMenu').destroy();
Re-start
$('nav:first').data('plugin_accessibleMegaMenu').init();
from accessible-mega-menu.
@carlafranca Hi, Can you please elaborate further on how can I use the above destroy function. I need to turn-off megamenu below certain resolution and bind different events(touch -tap/doubleTap)
Many thanks in advance.
Regards,
Mark W
from accessible-mega-menu.
@pbhar28 Hi Mark, yes sure. Here is how I use it.
1. On load:
Start the plugin only on specific size:
if($(window).width() >= 992 ){
$("nav:first").accessibleMegaMenu(megamenu);
}
2. On window resize I call one of the functions below depending on the browser size:
mobileSetup:
On my implementation I remove all the "aria" on links and dropdowns added by the plugin (It will be added again once the plugin is restarted)
I do it because my menu changes completely. No second level on mobile.
//Remove aria on mobile
$('.nav__item > a').removeAttr('aria-controls aria-expanded aria-haspopup');
$('.nav__menu-panel').removeAttr('role aria-expanded aria-hidden aria-labelledby');
//Destroy accessibility plugin on mobile
if($('nav:first').data('plugin_accessibleMegaMenu')) {
$('nav:first').data('plugin_accessibleMegaMenu').destroy();
}
desktopSetup:
//Check if plugin was started using data and the plugin name
if( $('nav:first').data('plugin_accessibleMegaMenu') ){
//Restart the plugin
$('nav:first').data('plugin_accessibleMegaMenu').init();
}else{
$("nav:first").accessibleMegaMenu(megamenu);
}
from accessible-mega-menu.
Related Issues (20)
- jquery 3 has renamed jQuery.expr[":"]
- RTL support - reversed navigation keys
- Navigation with arrow keys is incorrect with JAWS
- How to add 3 rd lavel menu inside submenu group?
- Not working properly With Wordpress Avada Theme HOT 6
- Top-level links not firing megamenu in Safari HOT 9
- Hover true on desktop, false on mobile?
- Full Menu Display Flashes on load/refresh HOT 1
- Visual indication of presence of sub-menu HOT 1
- Megamenu does not count with single items in menu
- Menu flashes when mouse positioned just right on Chromium based browsers
- Main links fail WCAG2 tests in pa11y HOT 1
- Can't use top level links? HOT 2
- Not working properly in firefox in MAC OS HOT 2
- Update readme/docs about library invocation settings HOT 1
- openOnMouseover preventing scrolling out of open mega menu HOT 2
- Additional menu levels?
- jquery-accessibleMegaMenu.js in this repo breaks the example HOT 4
- Working partially on Wordpress and Divi theme
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from accessible-mega-menu.