How can I show a context type menu when clicking a user's photo, With multiple user photo's per page?

Question

I need help, I need to make a menu that only shows when you click on an iamge, I need to position the menu directly to the right hand side of the image div though. So can someone look at the link provided and help me to position the menu div next to the photo div?

Then maybe show an example of the best method to show/hide the menu div on click and how to hide it when clicked outside of the menu area. Whould the best way be to create the menu for each user, if there is 20 users on a page should I create 20 hidden menus? Any help appreciated I know this question kind of seems like I am just lazy but I really don't know how to position the div the way I need it and as for show/hiding it I don't know the best method when it needs to have many of the menus on 1 page.

http://friendproject.isgreat.org/contextmenu.php

Answer 1

You have to apply the css

float: left;

to the image as well as the menu to position the elements like your Photoshopped image.

I think the easiest option is to indeed create a menu next to every image. You would have to hide the menu with

display: none

And could toggle the visibility with jQuery's toggle() function like this:

$("image1").click(function() { 
    $('#menu1').toggle(); 
});

Answer 2

I am going to add another answer because all of this info doesn't fit in a comment.

The elements aren't positioned next to each other because the float:left; is applied to the element that wraps both the image and the menu. They need to have float applied seperately (I think it would work if you apply it to ImageSub instead of Photowrap).

It involves quit a big amount of work if you want the menu to be closed if you click anywhere on the screen. You would also have to toggle a invisible/transparant overlay that stretches to the full width and height of the page. On top of that the menu will be placed. With another onclick event watcher on the overlay both the menu and the overlay would be toggled. This technique is also used with lightboxes.

The overlay could be created with the following CSS:

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

A more effective approach for toggling would be using the JQuery ‘^’ selector. Here's a great tutorial on that topic: http://www.olliekav.com/2008/10/18/writing-multiple-toggle-links-in-jquery/