Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.73/11: Рейтинг темы: голосов - 11, средняя оценка - 4.73
6 / 6 / 5
Регистрация: 29.01.2015
Сообщений: 467

Реализовать контекстное меню

24.11.2015, 15:13. Показов 2118. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Привет как сделать меню контекстное? Как отследить клик вне блока контекстного? У меня есть код но он не работает.

JavaScript
1
2
3
4
5
6
e = e || window.event;
target = e.target || e.srcElement;
console.log(target.className);
if ( !(target.tagName == "A" && target.className == "context_menu__link") ) {
    ContextMenu.hideOpenedMenu();
}
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
24.11.2015, 15:13
Ответы с готовыми решениями:

Контекстное меню
Здравствуйте делю контекстное меню на JS, про onMouseOut показывается, а при omMouseOut скрывается. Но мне нужно чтобы меню скрывалось...

Типа контекстное меню
Всем привет. Помогите пожалуйста, не могу найти инфы в инете. Создал многоуровневое меню для своего сайта списками ul li. хочу что бы...

Сложный тест, с запретом на контекстное меню
Здравствуйте, нужно написать тест по теме Пакеты прикладных программ, думал скопирую код и вставлю в учебник, но нажатие правой кнопкой...

3
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,531
25.11.2015, 09:30
Лучший ответ Сообщение было отмечено qwertyyyyyw как решение

Решение

Цитата Сообщение от qwertyyyyyw Посмотреть сообщение
Как отследить клик вне блока контекстного?
это?
Обмен готовыми решениями
1
 Аватар для arcmag
347 / 322 / 203
Регистрация: 27.06.2014
Сообщений: 762
25.11.2015, 11:40
Лучший ответ Сообщение было отмечено qwertyyyyyw как решение

Решение

JavaScript
1
2
3
    window.addEventListener("load", function () {
        menuControll ("селектор элемента открывающего/закрывающего при клике меню", "селектор меню");
    });
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<script>
    function menuControll (label, menu) {
        var lBlock    = typeof label === "string" ? document.querySelector (label) : label,
            mBlock    = typeof menu  === "string" ? document.querySelector (menu)  : menu,
            css       = function (e, css) {for (var i in css) e.style[i] = css[i]; },
            open      = function (e) {
                check = true;
                mBlock.style.display = "block";
            },
            close     = function (e) {
                check = false;
                mBlock.style.display = "none";
            },
            switching = function (e) {
                getComputedStyle (mBlock)["display"] === "none" ? open () : close ();
            },
            over      = function () {
                pos = true;
            },
            out       = function () {
                pos = false;
            },
            doc       = function (e) {
                if (check && !pos) close ();
            }, check  = false, pos = false;
 
        close ();
 
        css (mBlock, {position: "absolute", left: lBlock.offsetLeft + "px", top: (lBlock.offsetTop + lBlock.offsetHeight + 20) + "px"});
 
        lBlock.addEventListener ("click", switching);
        lBlock.addEventListener ("mouseover", over);
        lBlock.addEventListener ("mouseout", out);
 
        window.addEventListener ("click", doc);
    }
 
    window.addEventListener("load", function () {
        menuControll (".labelMenu", ".navMenu");
    });
</script>
<style>
    *{padding: 0px; margin: 0px; box-sizing: border-box; -moz-box-sizing: border-box;}
    .navMenu{width: 250px;border: solid 1px #CCC;margin: 0px auto;}
    .navMenu:after{clear: both; display: table; content: "";}
    .navMenu li{list-style-type: none;text-align: center;}
    .navMenu li a{display: block;padding: 12px;transition: all .3s;color: #333;text-decoration: none;}
    .navMenu li a:hover{background: rgba(0,0,0,0.3);text-decoration: underline;}
    .labelMenu{margin: 75px;width: 75px;height: 75px;background: rgba(0,0,0,0.3);}
</style>
</head>
<body>
 
<div class="labelMenu"></div>
 
<nav class="navMenu">
    <ul>
        <li><a href="#">option 1</a></li>
        <li><a href="#">option 2</a></li>
        <li><a href="#">option 3</a></li>
        <li><a href="#">option 4</a></li>
        <li><a href="#">option 5</a></li>
    </ul>
</nav>
 
</body>
</html>
1
6 / 6 / 5
Регистрация: 29.01.2015
Сообщений: 467
25.11.2015, 11:49  [ТС]
newJS, arcmag, Спасибо!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
25.11.2015, 11:49
Помогаю со студенческими работами здесь

Раскрывающееся меню - при открытии/закрытии вложенного меню закрывается все меню
Проблема во вложенном меню. При открытии/закрытии вложенного меню закрывается все меню. Надо, чтобы главное меню не реагировало на клики во...

Реализовать тройную вложенность пунктов меню
Есть прикольное меню, но в JavaScript/jQuery не разбираюсь Меню работает как надо, но у него двойная вложенность, а нужно сделать тройную...

Работа с меню. При клике на кнопке меню или вне его, меню должно закрываться
Добрый вечер! Изучаю JQuery. Вот ради развития решил написать меню, практически такое же как на Хабре. Два дня ломаю голову над тем, как...

Как создать контекстное меню. Например нажимая на richTextBox правой кнопкой мыши, мне бы предоставлялось контекстное меню
Как создать контекстное меню. Например нажимая на richTextBox правой кнопкой мыши, мне бы предоставлялось контекстное меню???

Как реализовать контекстное меню для listWidget : copy, cut, paste ?
Подскажите как вызывать контекстное меню для при нажатии на элемент listWidget(что это за сигнал?). Как добавлять в это контекстное меню...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
К слову об оптимизации
kumehtar 01.04.2026
Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр).
Hrethgir 31.03.2026
Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда
anaschu 31.03.2026
В прикрепленном документе раздумья о том, как можно поменять модель в будущем
10 пpимет, которые всегда сбываются
Maks 31.03.2026
1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .
Перемещение выделенных строк ТЧ из одного документа в другой
Maks 31.03.2026
Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .
Functional First Web Framework Suave
DevAlt 30.03.2026
Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
Автоматическое создание документа при проведении другого документа
Maks 29.03.2026
Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .
Настройка движения справочника по регистру сведений
Maks 29.03.2026
Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru