cari

Rumah  >  Artikel  >  hujung hadapan web  >  JavaScript实现下拉菜单的实例

JavaScript实现下拉菜单的实例

黄舟
黄舟asal
2017-11-16 15:50:033251semak imbas

在我们日常开发工作中，经常会遇到JavaScript实现下来菜单的功能，那么如何实现这个功能呢，可以利用css+js实现的下拉菜单。通过getElementsByTagName获取ul,隐藏显示。今天就给大家分享一下JavaScript实现下拉菜单的实例！

<!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" > 
<head runat="server"> 
<title>JavaScript下拉菜单</title> 
<style type="text/css"> 
* { 
padding:0; 
margin:0; 
} 
body { 
font-family:verdana, sans-serif; 
font-size:small; 
} 
#navigation, #navigation li ul { 
list-style-type:none; 
} 
#navigation { 
margin:20px; 
} 
#navigation li { 
float:left; 
text-align:center; 
position:relative; 
} 
#navigation li a:link, #navigation li a:visited { 
display:block; 
text-decoration:none; 
color:#000; 
width:120px; 
height:40px; 
line-height:40px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#c5dbf2; 
padding-left:10px; 
} 
#navigation li a:hover { 
color:#fff; 
background:#2687eb; 
} 
#navigation li ul li a:hover { 
color:#fff; 
background:#6b839c; 
} 
#navigation li ul { 
display:none; 
position:absolute; 
top:40px; 
left:0; 
margin-top:1px; 
width:120px; 
} 
#navigation li ul li ul { 
display:none; 
position:absolute; 
top:0px; 
left:130px; 
margin-top:0; 
margin-left:1px; 
width:120px; 
} 
</style> 
<script type="text/javascript"> 
function displaySubMenu(li) { 
var subMenu = li.getElementsByTagName("ul")[0]; 
subMenu.style.display = "block"; 
} 
function hideSubMenu(li) { 
var subMenu = li.getElementsByTagName("ul")[0]; 
subMenu.style.display = "none"; 
} 
</script> 
</head> 
<body> 
<ul id="navigation"> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">栏目1</a> 
<ul> 
<li><a href="#">栏目1->菜单1</a></li> 
<li><a href="#">栏目1->菜单2</a></li> 
<li><a href="#">栏目1->菜单3</a></li> 
<li><a href="#">栏目1->菜单4</a></li> 
</ul> 
</li> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">栏目2</a> 
<ul> 
<li><a href="#">栏目2->菜单1</a></li> 
<li><a href="#">栏目2->菜单2</a></li> 
<li><a href="#">栏目2->菜单3</a></li> 
<li><a href="#">栏目2->菜单4</a></li> 
<li><a href="#">栏目2->菜单5</a></li> 
</ul> 
</li> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">栏目3</a> 
<ul> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">栏目3->菜单1</a> 
<ul> 
<li><a href="#">菜单1->子菜单1</a></li> 
<li><a href="#">菜单1->子菜单2</a></li> 
<li><a href="#">菜单1->子菜单3</a></li> 
<li><a href="#">菜单1->子菜单4</a></li> 
</ul> 
</li> 
<li><a href="#">栏目3->菜单2</a></li> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">栏目3->菜单3</a> 
<ul> 
<li><a href="#">菜单3->子菜单1</a></li> 
<li><a href="#">菜单3->子菜单2</a></li> 
<li><a href="#">菜单3->子菜单3</a></li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</body> 
</html>

总结：

本文通过css+js实现的下拉菜单，相信小伙伴们对此有了一定了解和认识，希望对你的工作有所帮助！

相关推荐：

用js写的下拉菜单实例代码

如何使用JavaScript实现创建动态下拉菜单效果

利用Css+jQuery 制作下拉菜单

Atas ialah kandungan terperinci JavaScript实现下拉菜单的实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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：JavaScript中的forEach与$.each以及map方法的详解Artikel seterusnya：如何学习JS

Artikel berkaitan

Lihat lagi