В этой статье описывается метод реализации полностью настраиваемой веб-страницы правой кнопкой мыши с многоуровневыми каталогами в JS. Поделитесь этим для вашей ссылки. Конкретный анализ заключается в следующем:
Это очень хорошая функция веб -мыши. Этот код может управлять меню правой кнопкой мыши мыши на веб-странице и создается полностью в соответствии с вашими пожеланиями. Это может отображаться на нескольких уровнях каталогов.
Скопируйте код следующим образом: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> JS Custom Web Page Многоуровневая навигационная навигационная меню </title>
<стиль типа = "text/css">
html, тело {высота: 100%; переполнение: скрыто;}
тело, div, ul, li {маржа: 0; накладка: 0;}
Тело {font: 12px/1,5/5fae/8f6f/96c5/9ed1;}
ul {list-style-type: none;}
#RightMenu {позиция: абсолют; top: -9999px; слева: -9999px;}
#rightmenu ul {float: слева; граница: 1px sold #979797; фон: #f1f1f1 url (image/line.png) 24px 0 repeat-y; накладка: 2px; box-shadow: 2px 2px 2px rgba (0,0,0, .6);};};};};};};};
#rightmenu ul li {float: слева; Очистка: оба; высота: 24px; cursor: pointer; line-hight: 24px; белое пространство: nowrap; padding: 0 30px;}
#rightmenu ul li.sub {founge-repeat: no-repeat; фоновая позиция: справа 9px; фоновое изображение: url (image/rrow.png);}
#rightmenu ul li.active {фоновый цвет: #f1f3f6; border-radius: 3px; граница: 1px solid #aecff7; height: 22px; line-hight: 22px; фоновая позиция: справа -8px; Padding: 0 29px;}
#rightmenu ul ul {display: none; position: Absolute;}
</style>
<script type = "text/javascript">
var GetOffSet = {
Верх: Функция (OBJ) {
return obj.offsettop + (obj.offsetparent?
},
слева: функция (obj) {
return obj.offsetleft + (obj.offsetparent?
}
};
window.onload = function ()
{
var omenu = document.getElementbyId ("rightmenu");
var aul = omenu.getelementsbytagname ("ul");
var ali = omenu.getelementsbytagname ("li");
var showtimer = hidetimer = null;
var i = 0;
var maxwidth = maxheight = 0;
var adoc = [document.documentelement.offsetwidth, document.documentelement.offsetheight];
omenu.style.display = "none";
для (i = 0; i <ali.length; i ++)
{
// Добавить стрелку в LI, содержащий подменю
ali [i] .getelementsbytagname ("ul") [0] && (ali [i] .classname = "sub");
// двигаться
ali [i] .onmouseover = function ()
{
var Othis = это;
var oul = othis.getelementsbytagname ("ul");
// перемещать мышь в стиль
othis.classname += "Active";
// Показать подменю
if (oul [0])
{
ClearTimeout (Hidetimer);
showtimer = settimeout (function ()
{
for (i = 0; i <othis.parentnode.children.length; i ++)
{
othis.parentnode.children [i] .getelementsbytagname ("ul") [0] &&
(othis.parentnode.children [i] .getelementsbytagname ("ul") [0] .style.display = "none");
}
oul [0] .style.display = "block";
oul [0] .style.top = othis.offsettop + "px";
oul [0] .style.left = othis.offsetwidth + "px";
setwidth (oul [0]);
// максимальный диапазон дисплеев
maxwidth = adoc [0] - oul [0] .OffSetWidth;
maxheight = adoc [1] - oul [0] .offsetheight;
// предотвратить переполнение
maxwidth <getoffset.left (oul [0]) && (oul [0] .style.left = -oul [0] .clientWidth + "px");
maxheight <getoffset.top (oul [0]) && (oul [0] .style.top = -oul [0] .clientHeight + othis.offsettop + othis.clientHeight + "px")
}, 300);
}
};
// мыши
ali [i] .onmouseout = function ()
{
var Othis = это;
var oul = othis.getelementsbytagname ("ul");
// стиль мыши
othis.classname = othis.classname.replace (// s? Active/, "");
ClearTimeout (ShowTimer);
hidetimer = settimeout (function ()
{
for (i = 0; i <othis.parentnode.children.length; i ++)
{
othis.parentnode.children [i] .getelementsbytagname ("ul") [0] &&
(othis.parentnode.children [i] .getelementsbytagname ("ul") [0] .style.display = "none");
}
}, 300);
};
}
// Настройка меню правой кнопкой мыши
document.oncontextmenu = function (event)
{
var Event = Event || window.event;
omenu.style.display = "block";
omenu.style.top = event.clienty + "px";
omenu.style.left = event.clientx + "px";
setwidth (aul [0]);
// максимальный диапазон дисплеев
maxwidth = adoc [0] - omenu.offsetwidth;
maxheight = adoc [1] - omenu.offsetheight;
// предотвратить переполнение меню
omenu.offsettop> maxheight && (omenu.style.top = maxheight + "px");
omenu.offsetleft> maxwidth && (omenu.style.left = maxwidth + "px");
вернуть ложь;
};
// Нажмите, чтобы скрыть меню
document.onclick = function ()
{
omenu.style.display = "Нет"
};
// Пожалуйста, самая большая ширина в LI и назначьте ее всем LI на одном и том же уровне
Функция Setwidth (OBJ)
{
maxwidth = 0;
for (i = 0; i <obj.children.length; i ++)
{
var oli = obj.children [i];
var iwidth = oli.clientwidth - parseint (oli.currentstyle? Oli.currentStyle ["paddingleft"]: getComputeDStyle (Oli, null) ["paddingleft"]) * 2
if (iwidth> maxwidth) maxwidth = iwidth;
}
for (i = 0; i <obj.children.length; i ++) obj.children [i] .style.width = maxwidth+"px";
}
};
</script>
</head>
<тело>
<CENTER> Пользовательское управление правой кнопкой мыши, щелкните правой кнопкой мыши на странице, чтобы просмотреть эффект. </center>
<div id = "rightmenu">
<ul>
<li> <strong> JavaScript Learning </strong> </li>
<li>
Wulin.com
<ul>
<li> Анализ принципов специальных эффектов веб -страницы </li>
<li> Ответьте на действия пользователя </li>
<li> Эффект приглашения </li>
<li> Направленное событием </li>
<li> Операция атрибута элемента </li>
</ul>
</li>
<li>
www.vevb.com
<ul>
<li> Измените цвет фона веб -страницы </li>
<li> Передача параметров функции </li>
<li> Написание функций высокой повторного использования </li>
<li> 126 Эффект выбора почтового ящика </li>
<li> Операции петли и проходов </li>
</ul>
</li>
<li>
Урок 3
<ul>
<li>
Композиция JavaScript
<ul>
<li> Ecmascript </li>
<li> dom </li>
<li> Бом </li>
<li> Источники совместимости JavaScript </li>
</ul>
</li>
<li> Местоположение, преимущества и недостатки JavaScript </li>
<li> Переменные, типы, тип, преобразование типа данных, сфера действия переменной </li>
<li>
Закрытие
<ul>
<li> Что такое закрытие </li>
<li> Простое приложение </li>
<li> Закрытие недостатков </li>
</ul>
</li>
<li> Оператор </li>
<li> Управление потоком программы </li>
<li>
Использование таймеров
<ul>
<li> setInterval </li>
<li> settimeout </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.