Comments (3)
Hi Lloyd,
I think I'd need to see an example of your particular implementation to offer a suggestion as to where the problem may lie.
from accessible-mega-menu.
First, Thanks for a great script! Love this and it was so easy to implement.
I have pretty much the same issue as above, except for the pain point for me is the accessibleMegaMenu()
function messes up only navigation items without mega menu dropdowns.
To get around this I wrapped the accessibleMegaMenu()
function inside a window.resize()
function with a flag (true/false) to execute.
This way accessibleMegaMenu()
will only execute once and only on desktop versions.
var isAccessibleFlag = false,
mobileWidth= 1025;
accessibleNav = function(){
if($(window).width() > mobileWidth && !isAccessibleFlag){
/*
Wrap accessibleMegaMenu() in window.width()
** bug fix for screens that load less than mobileWidth. Since the nav is display:none on load the JS fires and does not init properly. If user resizes screen the nav is borked.**
*/
$('.main-nav-menu').accessibleMegaMenu({
panelClass : "drop",
panelGroupClass: "wrap",
});
isAccessibleFlag = true;
}
};
accessibleNav();
var timeOut = null,
screenWidth = $(window).width();
window.onresize = function() {
if (timeOut !== null) clearTimeout(timeOut);
timeOut = setTimeout(function() {
screenWidth = $(window).width();
if(screenWidth > mobileWidth){
accessibleNav();
}
}, 500);
};
To clarify, the issue occurs when:
- loading a website and
accessibleMegaMenu()
is fired on an element that is set todisplay:none;
, for example loading the site in mobile view (http://cl.ly/image/271L1m1h3x0O) - if you resize the screen to desktop view and the element is then set to
display:block;
some navigation items are misaligned or completely removed from the navigation (http://cl.ly/image/0R1c0F2y1j3v vs http://cl.ly/image/2I3S1J2L1c3T) - the missing nav items do NOT have mega menus and are just nav items.
It appears that the Issue only presents itself on navigation items that do not have mega menu/dropdowns.
Does this help? Or is it more confusing? :)
from accessible-mega-menu.
It took me some time to figure out exactly why I was experiencing this same bug. But once I did, this post helped me resolve, so thank you!!!
My actual solution was a bit simpler, but I think my implementation was fairly straightforward. But will share here if it helps anyone..
`// Set default status...
var megaStatus = false;
var checkWindowSize = function() {
if (window.matchMedia("(min-width: 1024px)").matches) {
triggerMegaMenu();
}
}
$(window).on("load scroll resize",function(e){
checkWindowSize();
});
// --> Trigger accessible menu just 1x...
var triggerMegaMenu = function() {
if (!megaStatus) {
// Loads with lower z-index to avoid FOUC
$('.mega.fouc').removeClass('fouc');
megaStatus = true; // so only fires 1x
$('.block-main.main-navigation').accessibleMegaMenu({
/* prefix for generated unique id attributes, which are required
to indicate aria-owns, aria-controls and aria-labelledby */
uuidPrefix: 'accessible-megamenu',
menuClass: 'nav-menu',
topNavItemClass: 'nav-item',
panelClass: 'sub-nav',
panelGroupClass: 'sub-nav-group',
hoverClass: 'hover',
focusClass: 'focus',
openClass: 'open',
openOnMouseover: true
});
}
}
})`
from accessible-mega-menu.
Related Issues (20)
- 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
- How can I destroy instance of the menu ? HOT 5
- 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
- suppress unformatted display of the menu?
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.