تصف هذه المقالة طريقة تنفيذ تأثيرات التنقل بواسطة JS+CSS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
1. رمز البرنامج كما يلي:
نسخة الكود كما يلي: <! doctype html public "-// w3c // dtd xhtml 1.1 // en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<TITLE> CSS+JS تنفذ قائمة منسدلة من مستوى لا حصر لها مع توافق جيد </title>
<type type = "text/css">
*{الهامش: 0 ؛ الحشو: 0 ؛ الحدود: 0 ؛}
Body {font: 12px/130 ٪ Verdana ، Geneva ، Arial ، Helvetica ، Sans-Serif ، 安体 ؛} li {list-style: none ؛}
.clearfix: بعد {content: "" ؛ display: block ؛ الارتفاع: 0 ؛ clear: كلاهما ؛ الرؤية: مخفي ؛}. clearfix {display: inline-block ؛}
ج: الرابط {color:#000 ؛ تدمير النص: لا شيء ؛ }
ج: زيارة {color:#000 ؛ تدمير النص: لا شيء ؛ }
A: Hover {color:#000 ؛ تدمير النص: لا شيء ؛ }
.Menu {العرض: 778px ؛ الارتفاع: 26 بكسل ؛ الخلفية: #ffff ؛ الهامش: 0 Auto ؛}
.Menusel {float: اليسار ؛ العرض: 100px ؛ الموقف: قريب الارتفاع: 25 بكسل ؛ الخلفية: #DDD ؛ رفع الخط: 25 بكسل ؛ الهامش اليساري: 1px ؛ *Margin-Left: 0px ؛ _margin-left: -1px ؛}
.Menusel H2 {font-size: 12px ؛ }
.Menusel a {display: block ؛ text-align: center ؛ العرض: 100px ؛ الحدود: 1 بكسل Solid #A4a4a4 ؛ الارتفاع: 25 بكسل ؛ Border-Bottom: 1px Solid #A4a4a4 ؛ الموقف: قريب z-index: 2 ؛}
.Menusel A: Hover {Border: 1px Solid #A4a4a4 ؛ Border-Bottom: 1px متقطع #EEEEEEE ؛ الموقف: قريب Z-index: 2 ؛ الارتفاع: 25 بكسل ؛}
.ahover a {border-bottom: 1px sutied #Eeeeeeeee ؛ الخلفية: #EEEEEEE ؛ }
. z-index: 1 ؛}
.Menusel ul {width: 125px ؛ الخلفية: #EEE ؛ الحدود: 1 بكسل Solid #A4a4a4 ؛ الهامش أعلى: -1px ؛ الموقف: قريب Z-index: 1 ؛ العرض: لا شيء ؛}
.Menusel .block {display: block ؛}
.typeul li {border-bottom: 1px screaded #a4a4a4 ؛ width: 125px ؛ الموقف: قريب تعويم: اليسار. }
.typeul li a {border: none ؛ width: 125px ؛ }
.typeul li a: hover {border: none ؛ الخلفية: #DDD ؛}
.typeul {margin-left: 0 ؛ }
.typeul ul {left: 125px ؛ أعلى: 0 ؛ الموقف: مطلق ؛}
.fli {margin -left: -1px ؛ اليسار الحدودي: #EEEEE SOLID 1PX ؛}
.Menusel .lli {الحدود: لا شيء ؛ }
</style>
<script type = "text/javaScript"> document.execCommand ("backgroundImageCache" ، false ، true) ؛ </script> <!-IE6 Procession Image مشكلة->
</head>
<body>
<viv>
<div id = "menu1">
<H2> <a href = "/"> قائمة 1 </a> </h2>
<viv>
<ul>
<li> <a href = "// www.vevb.com"> خيار القائمة 1-2 </a> </li>
<li>
<a href = "#"> خيار القائمة 1-2 </a>
<ul>
<li> <a href = "#"> خيار القائمة 1-2-1 </a> </li>
<li> <a href = "#"> خيار القائمة 1-2-2 </a> </li>
</ul>
</li>
<li> <a href = "// www.vevb.com"> خيار القائمة 1-2 </a> </li>
<li> <a href = "#"> خيار القائمة 1-2 </a> </li>
</ul>
</div> <!-موقف->
</div> <!-Denusel->
<div id = "menu2">
<h2> <a href = "#"> القائمة 2 </a> </h2>
<viv>
<ul>
<li> <a href = "#"> خيار القائمة 2-2 </a> </li>
<li> <a href = "#"> خيار القائمة 2-2 </a>
<ul>
<li> <a href = "#"> خيار القائمة 2-2-1 </a> </li>
<li> <a href = "#"> خيار القائمة 2-2-2 </a>
<ul>
<li> <a href = "#"> خيار القائمة 2-2-1 </a> </li>
<li> <a href = "#"> خيار القائمة 2-2-2 </a>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href = "#"> خيار القائمة 2-2 </a> </li>
<li> <a href = "#"> خيار القائمة 2-2 </a> </li>
</ul>
</div> <!-موقف->
</div> <!-Denusel->
<div id = "menu3">
<h2> <a href = "#"> القائمة 3 </a> </h2>
<viv>
<ul>
<li> <a href = "#"> خيار القائمة 3-2 </a> </li>
<li> <a href = "#"> خيار القائمة 3-2 </a>
<ul>
<li> <a href = "#"> خيار القائمة 3-2-1 </a> </li>
<li> <a href = "#"> خيار القائمة 3-2-2 </a>
<ul>
<li> <a href = "#"> خيار القائمة 3-2-1 </a> </li>
<li> <a href = "#"> خيار القائمة 3-2-2 </a>
<ul>
<li> <a href = "#"> خيار القائمة 3-2-1 </a> </li>
<li> <a href = "#"> خيار القائمة 3-2-2 </a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href = "#"> خيار القائمة 3-2 </a> </li>
<li> <a href = "#"> خيار القائمة 3-2 </a> </li>
</ul>
</div> <!-موقف->
</div> <!-Denusel->
</div> <!-قائمة->
<script type = "text/javaScript">
لـ (var x = 1 ؛ x <4 ؛ x ++)
{
var menuid = document.getElementById ("menu"+x) ؛
menuid.num = x ؛
يكتب()؛
}
نوع الوظيفة ()
{
var menuh2 = menuid.getElementSbyTagName ("H2") ؛
var menuul = menuid.getElementSbyTagName ("ul") ؛
var menuli = menuul [0] .getElementsByTagName ("li") ؛
menuh2 [0] .onmouseover = show ؛
menuh2 [0] .onmouseout = unshow ؛
Menuul [0] .onmouseover = show ؛
Menuul [0] .onmouseout = unshow ؛
عرض الوظيفة ()
{
Menuul [0] .ClassName = "Clearfix Typell Block"
}
وظيفة Unshow ()
{
Menuul [0] .ClassName = "Typeul"
}
لـ (var i = 0 ؛ i <menuli.length ؛ i ++)
{
menuli [i] .num = i ؛
var liul = menuli [i] .getElementsByTagname ("ul") [0] ؛
إذا (ليول)
{
typeshow ()
}
}
وظيفة typeshow ()
{
menuli [i] .onmouseover = showul ؛
menuli [i] .onmouseout = unshowul ؛
}
وظيفة showul ()
{
menuli [this.num] .getElementSbyTagName ("ul") [0] .className = "block" ؛
}
وظيفة unshowul ()
{
Menuli [this.num] .getElementsByTagName ("ul") [0] .className = "" ؛
}
}
</script>
</body>
</html>
2. آثار البرنامج
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.