この記事では、JSのマルチレベルディレクトリを使用して、完全にカスタマイズされたWebページを実装する方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
これは非常に優れたWebマウス機能です。このコードは、Webページのマウスの右クリックメニューを制御でき、希望に応じて完全に作成されます。複数のレベルのカタログに表示できます。
次のようにコードをコピーします。<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> JSカスタムWebページマルチレベルナビゲーションメニュー</title>
<style type = "text/css">
html、body {height：100％; overflow：hidden;}
ボディ、div、ul、li {マージン：0;パディング：0;}
body {font：12px/1.5/5fae/8f6f/96c5/9ed1;}
ul {list-style-type：none;}
#rightmenu {position：absolute; top：-9999px;左：-9999px;}
＃rightmenu ul {float：left; border：1px solid＃979797; background：＃f1f1f1 url（images/line.png）24px 0 Repeal-y; padding：2px; box-shadow：2px 2px 2px rgba（0,0,0、.6）;}
＃rightmenu ul li {float：left; clear：bloth; height：24px; cursor：pointer; line-height：24px; white-space：nowrap; padding：0 30px;}
#rightmenu ul li.sub {background-repeat：no-repeat; no-repeat; background-position：right 9px; background-image：url（images/arrow.png）;}
＃rightmenu ul li.active {background-color：＃f1f3f6; border-radius：3px; border：1px solid＃aecff7; height：22px; line-height：22px; background-position：right -8px; padding：0 29px;}
＃rightmenu ul ul {display：none; position：absolute;}
</style>
<script type = "text/javascript">
var getOffset = {
上：function（obj）{
Obj.Offsettop +（obj.offsetparent？arguments.callee（obj.offsetparent）：0）return
}、
左：function（obj）{
return obj.offsetleft +（obj.offsetparent？arguments.callee（obj.offsetparent）：0）
}
};
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";
for（i = 0; i <ali.length; i ++）
{
// submenuを含むliに矢印を追加します
Ali [i] .getElementsByTagname（ "ul"）[0] &&（ali [i] .classname = "sub"）;
//移動します
ali [i] .onmouseover = function（）
{
var othis = this;
var oul = othis.getelementsbytagname（ "ul"）;
//マウスをスタイルに移動します
othis.classname += "Active";
// submenuを表示します
if（oul [0]）
{
ClearTimeout（Hidetimer）;
showtimer = setimeout（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] .offseethight;
//オーバーフローを防ぎます
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 = this;
var oul = othis.getelementsbytagname（ "ul"）;
//マウスアウトスタイル
othis.classname = othis.classname.replace（// s？active/、 ""）;
ClearTimeout（showtimer）;
hidetimer = setimeout（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"）;
falseを返します。
};
//クリックしてメニューを非表示にします
document.onclick = function（）
{
omenu.style.display = "none"
};
// 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>
<body>
<center>カスタム右クリックメニューをクリックして、ページを右クリックして効果を表示してください。 </center>
<div id = "rightmenu">
<ul>
<li> <strong> JavaScript Learning </strong> </li>
<li>
wulin.com
<ul>
<li> Webページの特殊効果原則の分析</li>
<li>ユーザーアクションに応答します</li>
<li>プロンプトボックス効果</li>
<li>イベント駆動型</li>
<li>要素属性操作</li>
</ul>
</li>
<li>
www.vevb.com
<ul>
<li> Webページの背景色を変更します</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> bom </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> setimeout </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。