If your menu consists of an image, you can utilize the <map> tag in HTML5 as shown in this example from W3Schools. Simply place onclick attributes on each area and proceed with your coding. Take a look at this JSFiddle:
Code
<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to view them closely:</p>
<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="javascript:" onclick = "alert('you clicked me the SUN')">
<area shape="circle" coords="90,58,3" alt="Mercury" href="javascript:" onclick = "alert('you clicked me the MERCUR')">
<area shape="circle" coords="124,58,8" alt="Venus" href="javascript:" onclick = "alert('you clicked me the VENUS')">
</map>
</body>
</html>
UPDATE: To implement this for your menu, consider the following steps:
The concept involves using the ratio of each element in relation to the image.
1) Begin by opening the menu image with Microsoft Paint.
---> Go to the "View" tab and enable "Rulers" and the "Status bar".
---> Note down the vertices you require. Simply move the cursor to the desired point, and the pixel coordinates will appear at the bottom-left of the software.
---> Visit the "Home" tab and click on the "Resize" button.
---> Select the "Pixels" radio button to view the width and height of the original image.
2) To express an arbitrary point within the image, follow these steps: (assuming a point's coordinates are 83,100 [width, height] and the image size is 800x500 [width x height])
//define the point coordinates
var vertex_X = 83;
var vertex_Y = 100;
//define the original image size
var imageWidth = 800;
var imageHeight = 500;
//calculate the ratio of the point relative to the image
var vertexRatio_X = vertexCoords_X / imageWidth ;
var vertexRatio_Y = vertexCoords_Y / imageHeight;
Once you have the ratio, you can use it as follows:
function defineActiveAreas(){
var videoWidth = document.getElementById("video").clientWidth;
var videoHeight = document.getElementById("video").clientHeight;
var pointNew_X = vertexRatio_X * videoWidth;
var pointNew_Y = vertexRatio_Y * videoHeight;
}
You can perform this calculation for each vertex point. Additionally, you can incorporate this function and link it to an event listener for window resize.