ejMenu - open it inside the viewport

[Irvin Dominin]

Good morning,

I'm using ejMenu to show a menu by clicking on an element. I need to do it programmatically because of our page implementation.

To do so I'm using the following code:

                        $ejMenu.show(newPosition.left, newPosition.top, $(e.element));

the newPosition object contains the position of the clicked element and show the menu at its bottom-left.

The issue I'm facing is that if the clicked element is a position where the menu element cannot be shown in the viewport; the effect is:

 

is there a way to set the menu opening in order to open inside the viewport?

Kind regards,

Irvin Dominin

[Sasikala Nagarajan]

Hi Irvin,
We have analyzed your query and we can achieve your requirement using our existing property “enableRTL”.This API is used to float the menu in Right to Left Direction

Please refer the below code snippet

jQuery(function ($) {

$("#vertical").ejMenu({

menuType: ej.MenuType.NormalMenu,

orientation: ej.Orientation.Vertical

});

$("#vertical").ejMenu('hide');

});

$("a[rel='nofollow' href]").click(function () {

$("#vertical").ejMenu('show');

if (screen.width < $(".e-menu-wrap").width() + $("a[rel='nofollow' href]").position().left) {

s = $("#vertical").data('ejMenu');

s.option("enableRTL", true);

$(".e-menu-wrap").css({ position: "absolute", top: $("a[rel='nofollow' href]").position().top + 20, left: $("a[rel='nofollow' href]").position().left - $("a[rel='nofollow' href]").width() });

}
});

In this we have applied enableRTL property if menu width crosses the screen width. So menu will open in right to left direction.

For your convenience we have prepared the simple sample based on this. Please get the sample from below location

Sample

Please check with the given sample. If we misunderstood your query, can you please provide more details to reproduce the reported issue in our end. if possible can you please reproduce the issue in given sample and revert us the modified sample that will be helpful for us to provide the prompt solution.

Regards,

Sasikala Nagarajan

[Irvin Dominin]

Hi Sasikala,

yes you got the problem! I hope for a default option/behaviour for this situatio, but your workaround works pretty well.

I handled the same for a case where the menu opener is at the page bottom and your workaround works well here too.

Thanks a lot for the support.

Kind regards,

Irvin Dominin

[Sasikala Nagarajan]

Hi Irvin,
Thanks for the update,please let us know if you have further quieries.We will be happy to help you out.
Regards,
Sasikala Nagarjan