Rumah > Artikel > hujung hadapan web > Tiruan JavaScript Navigasi Jingdong kiri menu lungsur navigasi kategori kemahiran effect_javascript
Tiruan JavaScript Navigasi Jingdong kiri menu lungsur navigasi kategori kemahiran effect_javascript
- WBOYasal
- 2016-05-16 15:08:301630semak imbas
Contoh dalam artikel ini berkongsi dengan anda menu lungsur yang serupa dengan navigasi kategori kiri JD.com dan Taobao Mall untuk rujukan anda. Kandungan khusus adalah seperti berikut
Rendering:
Kod pelaksanaan:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin:0;padding:0;}
.ul{position:relative;width:200px;height:auto;}
.ul li{height:24px;line-height:24px;border-bottom:1px solid #ddd;text-align:center;font-size:12px;}
.ul li a{display:block;background:#fff;color:#000;text-decoration:none;}
.ul li a:hover{display:block;background:#000;color:#fff;text-decoration:none;}
.ul li div{display:none;width:400px; height:auto;position:absolute;top:0;left:200px; background:#000; color:#fff;}
.ul li div dl dd{float:left; width:100px;}
.ul .liname div{display:block;}
</style>
<script>
window.onload=function(){
var aLi=document.getElementsByTagName("li");
for(var i=0;aLi.length>i;i++){
aLi[i].i=i;
aLi[i].onmouseover=function(){
this.className="liname";
var h1=this.i*25;
var h2=this.getElementsByTagName("div")[0].offsetHeight;
if(h2<h1){
this.getElementsByTagName("div")[0].style.top=h1+'px';
}
}
aLi[i].onmouseout=function(){
this.className="";
}
}
}
</script>
</head>
<body>
<ul class="ul">
<li>
<a href="">类别1</a>
<div class="div">
<dl>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
</dl>
</div>
</li>
<li>
<a href="">类别2</a>
<div class="div">
<dl>
<dd>类别2</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
</dl>
</div>
</li>
<li><a href="">类别3</a><div class="div">
<dl>
<dd>类别3</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
</dl>
</div>
</li>
<li><a href="">类别4</a><div class="div">
<dl>
<dd>类别4</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
</dl>
</div>
</li>
<li><a href="">类别5</a><div class="div">
<dl>
<dd>类别5</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
</dl>
</div>
</li>
<li><a href="">类别6</a><div class="div">
<dl>
<dd>类别6</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
</dl>
</div>
</li>
<li><a href="">类别7</a><div class="div">
<dl>
<dd>类别7</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
</dl>
</div>
</li>
<li><a href="">类别8</a><div class="div">
<dl>
<dd>类别8</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
</dl>
</div>
</li>
</ul>
</body>
</html>
Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Nota kajian JavaScript: Kemahiran deduplication_javascript tatasusunanArtikel seterusnya：Nota kajian JavaScript: Kemahiran deduplication_javascript tatasusunan
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional