Контекстное меню

Собственное меню, появляющееся при клике
правой кнопки мышки

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

Для демонстрации работы скрипта появляющегося собственного меню при нажатии правой кнопкой мышки, просто кликните на правую кнопку мышки в любом месте данной странички.

Для получения своего собственного меню, появляющегося при клике правой кнопкой мышки как в демонстрационном примере, добавьте в шапку Вашего сайта (между тегами ) стиль создаваемого меню:

< style type = "text/css" >
#main_menu position : absolute ;
width : 160px ;
border : 1px solid #000000;
background — color : #EEEEEE;
font — family : «Verdana» ;
line — height : 20px ;
font — size : 14px ;
z — index : 99 ;
visibility : hidden ;
>
#main_menu > div padding — left : 10px ;
padding — right : 10px ;
>
#main_menu > :hover background — color : #6666FF;
color : #FFFFFF;
cursor : pointer ;
>

Далее необходимо создать само меню, которое будет показываться при клике правой кнопкой мышки. Для этого необходимо вставить на свою страничку следующий код:

Далее вставляем скрипт, который будет отображать и скрывать меню, появляющееся при нажатии правой кнопки мышки:

< script type = "text/javascript" >
var mouse_x = 0 ;
var mouse_y = 0 ;
menu_obj = document . getElementById ( «main_menu» );

function mousemove ( event ) if ( document . attachEvent != null ) mouse_x = window . event . pageX ;
mouse_y = window . event . pageY ;
> else if (! document . attachEvent && document . addEventListener ) mouse_x = event . pageX ;
mouse_y = event . pageY ;
>
>

function show_menu ( e ) mousemove ( e );
menu_obj . style . left = mouse_x + «px» ;
menu_obj . style . top = mouse_y + «px» ;
menu_obj . style . visibility = «visible» ;
return false ;
>

document . oncontextmenu = show_menu ;
document . onclick = hide_menu ;

Если Вы все сделали так, как написано в данной теме, то у Вас должно получиться точно такое же меню, доступное при клике по правой кнопке мышки, как и в нашем примере.

Источник

Делаем новое контекстное меню на странице

Если мы нажмём на правую кнопку мыши на любой странице, то увидим контекстное меню браузера:

Но в некоторых онлайн-сервисах, например в Фигме, появляется не стандартное контекстное меню, а другое, связанное с работой сервиса.

Сегодня расскажем, как сделать такое меню у себя на странице и что для этого потребуется.

Готовим страницу

Так как единственное, что нам нужно, — это контекстное меню, то на странице разместим один заголовок, и всё. Можно даже его не добавлять, но тогда будет непонятно, загрузилась страница или нет.

       
Новое контекстное меню
  

Подключаем библиотеку и отключаем стандартное контекстное меню

Чтобы всё сработало, подключим jQuery — через него мы будем работать с новым меню:

Добавляем тег на страницу, и первое, что нам нужно, — отключить стандартное контекстное меню:

// запрещаем вызов стандартного меню
document.oncontextmenu = function() ;

Теперь по нажатии на правую кнопку мыши мы не увидим ничего, а значит, новое меню нам нужно нарисовать самим.

Рисуем меню

Логика нового меню будет такая:

1. Ждём, пока страница полностью загрузится.
2. Как только нажата правая кнопка мыши — создаём новый блок на странице.
3. В этом блоке простым списком добавляем наши пункты меню.
4. Делаем этот блок видимым.
5. Если нажата любая другая кнопка мыши — убираем этот блок.

Хитрость здесь будет в том, что мы будем в конце убирать контекстное меню не моментально, а с задержкой в 10 миллисекунд. Если делать без задержки, то меню просто не будет работать — в момент нажатия на любой пункт скрипт сразу скроет меню и обработать нажатие уже не получится. Чтобы скрипт успевал среагировать на выбор любого пункта, сделаем паузу в 10 миллисекунд — глазу незаметно, а скрипт успеет сработать.

Теперь при нажатии правой кнопкой мыши на странице появляется такой список. Он работает, но совсем не похож внешне на контекстное меню. Всё дело в том, что мы не сделали стили, которые отвечают за его внешний вид. Давайте это исправим.

Оформляем стили

Чтобы контекстное меню было похоже на привычное меню, сделаем вокруг него рамку, поменяем шрифт и установим абсолютное позиционирование — оно нужно для того, чтобы меню появлялось точно в месте клика. Чтобы было ещё красивее, добавим тень под меню, чтобы оно появлялось как бы поверх страницы:

/* внешний вид меню */ .context-menu < /* настройки шрифта */ font-family: sans-serif; /* устанавливаем абсолютное позиционирование */ position: absolute; /* не показываем меню с самого начала */ display: none; /* цвет фона и настройки рамки вокруг меню */ background-color: #fff; border: 1px solid #333; padding: 5px; /* Добавим тени */ -moz-box-shadow: 5px 2px 10px rgba(0,0,0,0.5); -webkit-box-shadow: 5px 2px 10px rgba(0,0,0,0.5); box-shadow: 5px 2px 10px rgba(0,0,0,0.5); >

Осталось оформить элементы меню — белый фон, отступы и изменение фона элемента при наведении курсора:

/* общий стиль для списка */ .context-menu ul < list-style: none; margin: 0; padding: 0; >/* стиль отдельных элементов */ .context-menu ul li < margin: 0; padding: 0; background-color: #fff; display: block; >/* стиль ссылок в меню */ .context-menu ul li a < color: #333; text-decoration: none; font-size: 12px; display: block; padding: 5px; >/* меняем фон в пункте меню при наведении мыши */ .context-menu ul li a:hover

Что дальше

Теперь, когда вы знаете, как сделать такое меню, можно сделать следующий шаг, например:

• добавить иконки, чтобы пользоваться меню стало удобнее;
• повесить на каждый пункт вызов какой-нибудь полезной функции;
• показывать разные меню в зависимости от элемента, на котором кликнули мышкой;
• красиво оформить меню (как в «Фигме», например).

В будущих статьях сделаем это. Подписывайтесь, чтобы быть в курсе.

Источник

Custom Right Click Context Menu in HTML CSS & JavaScript

Hello friends, today in this blog, you’ll learn how to create a Custom Right Click Context Menu in HTML CSS & JavaScript. In the earlier blog, I have shared how to create a Custom Price Range Slider in JavaScript, and now it’s time to create a custom context menu.

A context menu is a contextual, shortcut, or pop-up menu that appears on the mouse right button click. It contains a limited set of choices that are related to the selected object.

In this project (Custom Context Menu), the context menu appears on the mouse right button click and disappears on the mouse left button click. On this menu, there is a sub-menus too. This sub-menu change its position from right to left if there isn’t enough space to show it to the right side. You can watch a demo or full video tutorial of it.

Video Tutorial of Right Click Context Menu in JavaScript

In the above video, you have seen the demo of this right-click context menu and how I created it using HTML CSS & JavaScript. I hope you liked this context menu and understood the codes of it. If you like this menu and want to get source codes or files, you can easily get them from the bottom of this page.

If you’re a beginner then, I suggest you watch the video first and try to create it by yourself rather than copy codes because, in the video, I have explained the main JavaScript line with written comments that helps you to understand the code more easily.

You might like this:

Right Click Context Menu in JavaScript [Source Codes]

To create this Custom Context Menu in JavaScript. First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the given codes into your file. You can also download the source code files of this context menu from the given download button.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

/* Import Google Font — Poppins */ @import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap’); * < margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; >body < display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 100vh; background: linear-gradient(135deg, #8B55E9 0%, #5D6BE6 100%) >.wrapper < visibility: hidden; position: absolute; width: 300px; border-radius: 10px; background: #fff; box-shadow: 0 12px 35px rgba(0,0,0,0.1); >.wrapper .menu < padding: 10px 12px; >.content .item < list-style: none; font-size: 22px; height: 50px; display: flex; width: 100%; cursor: pointer; align-items: center; border-radius: 5px; margin-bottom: 2px; padding: 0 5px 0 10px; >.content .item:hover < background: #f2f2f2; >.content .item span < margin-left: 8px; font-size: 19px; >.content .setting < display: flex; margin-top: -5px; padding: 5px 12px; border-top: 1px solid #ccc; >.content .share < position: relative; justify-content: space-between; >.share .share-menu < position: absolute; background: #fff; width: 200px; right: -200px; top: -35px; padding: 13px; opacity: 0; pointer-events: none; border-radius: 10px; box-shadow: 0 5px 10px rgba(0,0,0,0.08); transition: 0.2s ease; >.share:hover .share-menu

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

const contextMenu = document.querySelector(".wrapper"), shareMenu = contextMenu.querySelector(".share-menu"); window.addEventListener("contextmenu", e => < e.preventDefault(); let x = e.offsetX, y = e.offsetY, winWidth = window.innerWidth, winHeight = window.innerHeight, cmWidth = contextMenu.offsetWidth, cmHeight = contextMenu.offsetHeight; if(x >(winWidth - cmWidth - shareMenu.offsetWidth)) < shareMenu.style.left = "-200px"; >else < shareMenu.style.left = ""; shareMenu.style.right = "-200px"; >x = x > winWidth - cmWidth ? winWidth - cmWidth - 5 : x; y = y > winHeight - cmHeight ? winHeight - cmHeight - 5 : y; contextMenu.style.left = `$px`; contextMenu.style.top = `$px`; contextMenu.style.visibility = "visible"; >); document.addEventListener("click", () => contextMenu.style.visibility = "hidden");

That’s all, now you’ve successfully created a Custom Right-Click Context Menu in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problem, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Источник

Меню правой кнопки мыши html

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

В рубрике «HTML» Вы найдете бесплатные уроки по работе с этим языком гипертекстовой разметки, который лежит в основе большинства сайтов.

Данная рубрика заменит Вам полноценный «HTML учебник». Здесь Вы сможете найти ответы на большинство вопросов, связанных с HTML и DHTML.

Бесплатные уроки HTML для начинающих

Помимо текстовых уроков, Вы также сможете найти на нашем сайте полезные видео уроки по HTML. Простые и понятные примеры и объяснения помогут Вам в кратчайшие сроки освоить этот базовый язык «сайтостроения».

• 

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

Создан: 8 Августа 2016 Просмотров: 17530 Комментариев: 0

17 бесплатных шаблонов админок

30 сайтов для скачки бесплатных шаблонов почтовых писем

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

Создан: 23 Октября 2015 Просмотров: 23379 Комментариев: 0

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

Создан: 14 Октября 2015 Просмотров: 13787 Комментариев: 0

15 новых сайтов для скачивания бесплатных фото

Создан: 1 Августа 2015 Просмотров: 364146 Комментариев: 2

50+ бесплатных Bootstrap 3 шаблонов и элементов UI

Зум слайдер

Сегодняшний черновик — это простой слайдер с возможностью раскрытия подробной информации о каждом элементе.

Источник