I've been facing some challenges with my mega menu implementation. The dropdown appears either on the left or right side based on calculations of offset.left, but it seems to behave differently across various screen resolutions.
As a solution, I'm considering displaying the First and Second dropdown menus on the right side and the rest on the left. However, I'm unsure how to incorporate the nth-child element logic into an if statement.
Here's a simple example in this Fiddle: http://jsfiddle.net/42MfQ/1/
You can view my current mega menu sample that has issues like this one here: http://jsfiddle.net/5eecT/13/
Your assistance in getting the script to display the menus correctly would be greatly appreciated.
At present, the code is not functioning as intended. Here's a snippet illustrating part of the problematic code:
if (($(this).offset().left) + 200 > $('.menu-wrapper').width()) {
$(this).find(".dropdown").addClass("dropdown-last");
}
Considering this issue, I propose displaying the first two dropdown menus on the right side and the rest on the left to avoid incorrect auto-detection.
I am seeking guidance on how to write this particular code block:
if($( "li:nth-child(1)" ) == true || "li:nth-child(2)" == true ))
{
alert('show dd menu on right side of parent menu');
}
Otherwise,
{
alert('show dd menu on left side of parent menu');
}