I have the following code example in fiddle.net here of a Dijit.Menu and a div. The Menu appears with a left click, my problem is that the Menu overlaps (or covers, hides) the content of the target div and users cannot read its content when making comparisons with the alternatives presented in the Menu, see the figure below.
So is there a way to make the Menu appear without overlapping the div content, so that the div content could be seen while browsing the menu items, maybe positioning the menu below or above the div, as in the following figure.
This can be achieved with some javascript attached to the
onOpen
event that is triggered when the popupMenu is shown.The code should get the position and the height of the clicked element and calculate the position where the menu should be placed:
Use these coordinates to set the left and top style attributes of the popup menu holder element:
Here is a jsfiddle with the popup menu positioned as in your image