Собственное контекстное меню
Для того чтобы создать собственное контекстное меню (меню появляющееся при нажатии правой кнопки мыши) нужно:
1. Открыть страницу на которой хотите сделать контекстное меню и после тэга <title> вставить следующее:
<style>
.context {
position:absolute;
width:190px;
visibility:hidden;
border: 1px solid #8587A2;
filter: alpha(Opacity=70);
background-image: url(http://altsup.narod.ru/images/background.gif);
font-weight: bold;
}
.contexttext {
font-family: Arial;
font-size: 10px;
font-style: normal;
font-weight: bold;
color: #C9CADA;
text-decoration: none;
text-align: left;
}
</style>
|
С параметрами можете поэксперементировать позже.
2. После закрывающего тэга </style> вставляем следующий скрипт:
<script>
var menuskin = "context";
var display_url = 1;
function showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
ie5menu.style.left = document.body.scrollLeft + event.clientX;
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5() {
ie5menu.style.visibility = "hidden";
}
function highlightie5() {
if (event.srcElement.className == "contexttext") {
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
if (display_url)
window.status = event.srcElement.url;
}
}
function lowlightie5() {
if (event.srcElement.className == "contexttext") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "C9CADA";
window.status = "";
}
}
function jumptoie5() {
if (event.srcElement.className == "contexttext") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
else
window.location = event.srcElement.url;
}
}
</script>
|
При недостаточных знания лучше в этом коде ничего не менять.
3. Далее, после скрипта нам нужно вставить следующий код, который как раз и будет являтся телом нашего выпадающего меню:
<DIV class=url id=ie5menu onclick=jumptoie5(); onmouseout=lowlightie5() onmouseover=highlightie5()> <!-- В этой строке менять ничего не нужно -->
<DIV class=contexttext url="http://altsup.narod.ru"> Главная страница</DIV> <!-- В этой строке меняем URL и название ссылки -->
<hr align="center" width="100%" size="0" noshade color="#9A9EC0"> <!-- Это разделительная линия, меняем параметры на свой вкус -->
</DIV>
|
Для того чтобы добавить еще ссылок в контекстное меню, просто добавляем в вышеприведенный код (перед закрывающим </DIV>) следующую строку:
|
<DIV class=contexttext url="http://altsup.narod.ru"> Главная страница</DIV>
|
Меняем в ней http://altsup.narod.ru и Главная страница на свои значения.
Теперь когда Вы сделали тело контекстного меню, осталось совсем немного: добавить после закрывающего тэга </DIV> следующий скрипт:
<script>
if (document.all && window.print) {
ie5menu.className = menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}
</script>
|
Всё готово, сохраняем страницу, открываем в браузере, если всё правельно сделали, при клике правой кнопкой мыши по странице, должно показаться Ваше меню.
Пример работы скрипта можно увидеть на этой странице, просто нажмите правую кнопку мыши.
Важно: скрипт работает не во всех браузерах.
Если возникнут вопросы, задавайте их через форму отправки вопросов.
