Display a menu when clicking on an Image - jsf

Question

I want to create a primefaces menu component programmatically, here is the xhtml tag:
<p:menu model="#{notificationMenu.model}" />
and here is the spring component associated:
#Component
#Scope("session")
#Qualifier("notificationMenu")
public class NotificationMenu {
#Autowired
NotificationService notificationService;
private MenuModel model;
#PostConstruct
public void createMenuModel() {
List<Notification> listNotifs = notificationService.getAllUnreadNotifsForUser(LoginBean.getConnectedUser());
model = new DefaultMenuModel();
DefaultSubMenu subMenu = new DefaultSubMenu();
for (Notification notification : listNotifs) {
DefaultMenuItem item = new DefaultMenuItem();
item.setValue(notification.getTypenotification().getTypenotif());
item.setUrl("/user/index.xhtml");
subMenu.addElement(item);
}
model.addElement(subMenu);
}
public MenuModel getModel() {
return model;
}
}
I'd like to programmatically associated this menu to a graphical image (like a notification image), so that when the user click on the image the menu is shown... is it possible?
EDIT :
I want the menu to be displayed under the image and disappear on Blur (clicking outside the image).

Answer 1

Overlay Menu
A dynamic menu is created by setting overlay option to true and defining a trigger to show the
menu. Location of menu on page will be relative to the trigger and defined by my and at options
that take combination of four values:
left
right
bottom
top
That said:
<p:menu overlay="true" trigger="img"
my="left top"
at="bottom left"
model="#{notificationMenu.model}" />
<p:graphicImage id="img" />