Как я могу показать контекстное меню типа при нажатии на фотографию пользователя, с несколькими фотографиями пользователя на страницу?

Question

Мне нужна помощь, мне нужно создать меню, которое будет отображаться только при нажатии на iamge, мне нужно расположить меню прямо справа от изображения div. Так может ли кто-нибудь взглянуть на предоставленную ссылку и помочь мне расположить раздел меню рядом с разделом фотографий?

Тогда, возможно, покажите пример наилучшего способа показать / скрыть раздел меню при щелчке и как скрыть его при нажатии за пределами области меню. Как лучше всего создать меню для каждого пользователя, если на странице 20 пользователей, я должен создать 20 скрытых меню? Любая помощь приветствуется. Я знаю, что этот вопрос кажется мне просто ленивым, но я действительно не знаю, как расположить div так, как мне это нужно, и как показать / скрыть его, я не знаю лучшего метода, когда он нужен. иметь много меню на 1 странице.

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

Answer 1

Вы должны применить CSS

float: left;

к изображению, а также меню для размещения таких элементов, как ваше фотошоп.

Я думаю, что самый простой вариант - создать меню рядом с каждым изображением. Вам придется скрыть меню с помощью

display: none

И может переключать видимость с помощью функции jQuery toggle () следующим образом:

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

Answer 2

Я собираюсь добавить еще один ответ, потому что вся эта информация не помещается в комментарии.

Элементы не расположены рядом друг с другом, поскольку float: left; применяется к элементу, который оборачивает как изображение, так и меню. Они должны иметь плавающее приложение отдельно (я думаю, что это будет работать, если вы примените его к ImageSub вместо Photowrap).

Это предполагает выход из большого объема работы, если вы хотите, чтобы меню было закрыто, если вы нажмете где-нибудь на экране. Вам также придется переключать невидимое / прозрачное наложение, которое растягивается на всю ширину и высоту страницы. Помимо этого будет размещено меню. При наложении другого наблюдателя событий onclick меню и наложение будут переключаться. Эта техника также используется с лайтбоксами.

Наложение может быть создано с помощью следующего CSS:

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

Более эффективным подходом к переключению было бы использование селектора JQuery ‘^’. Вот отличное руководство по этой теме: http://www.olliekav.com/2008/10/18/writing-multiple-toggle-links-in-jquery/