Собственное меню, появляющееся при клике
правой кнопки мышки
Предлагаем Вашему вниманию необычный скрипт, который позволит Вам создать свое собственное меню, которое появится при клике правой кнопкой мышки.
Для демонстрации работы скрипта появляющегося собственного меню при нажатии правой кнопкой мышки, просто кликните на правую кнопку мышки в любом месте данной странички.
Для получения своего собственного меню, появляющегося при клике правой кнопкой мышки как в демонстрационном примере, добавьте в шапку Вашего сайта (между тегами <head></head>) стиль создаваемого меню:
<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;
}
</style>Далее необходимо создать само меню, которое будет показываться при клике правой кнопкой мышки. Для этого необходимо вставить на свою страничку следующий код:
<div id="main_menu">
<div onClick="jump(this);" url="http://usefulscript.ru">На главную</div>
<div onClick="jump(this);" url="script.php">Скрипты</div>
<div onClick="jump(this);" url="useful_site.php">Онлайн-сервисы</div>
<div onClick="jump(this);" url="trick.php">Хитрости</div>
<div onClick="jump(this);" url="forum/index.php">Форум</div>
<hr>
<div onClick="jump(this)" url="support.php">Обратная связь</div>
</div>Далее вставляем скрипт, который будет отображать и скрывать меню, появляющееся при нажатии правой кнопки мышки:
<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;
}
function hide_menu(e) { menu_obj.style.visibility = "hidden"; }
function jump(e) { window.location=e.getAttribute("url"); }
document.oncontextmenu = show_menu;
document.onclick = hide_menu;
</script>Если Вы все сделали так, как написано в данной теме, то у Вас должно получиться точно такое же меню, доступное при клике по правой кнопке мышки, как и в нашем примере.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Админ, подскажи пожалуйста, как исправить это?
Как сделать, чтобы меню появлялось рядом с курсором?
Переменная - var ns6 = document.getElementById&&!document.all использует !document, поэтому скрипт и не работает, было бы неплохо, если бы и с <!doctype html> скрипт заработал, я бы точно применил у себя на сайте.
Как вариант, можно попробовать сделать что-то подобное при помощи jQuery:
$(document).ready(function(){
$('body').mousedown(function(event){
event.preventDefault();
if(event.button==2){
alert("Правая кнопка мыши");
//показываем меню
}
});
$("body").contextmenu(function(){return false;});
});