recherche

Maison >interface Web >js tutoriel >Exemple d'implémentation JavaScript du menu déroulant

Exemple d'implémentation JavaScript du menu déroulant

黄舟
黄舟original
2017-11-16 15:50:033285parcourir

Dans notre travail de développement quotidien, nous rencontrons souvent la fonction de menu déroulant implémentée par JavaScript Alors comment implémenter cette fonction Vous pouvez utiliser le menu déroulant implémenté par css+js. Obtenez ul via getElementsByTagName et masquez l'affichage. Aujourd'hui je vais partager avec vous un exemple d'implémentation d'un menu déroulant en 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>

Résumé :

Cet article utilise CSS+js pour implémenter le menu déroulant. Je crois que les amis ont un certain. Je comprends cela et j'espère que cela vous sera utile dans votre travail !

Recommandations associées :

Exemple de code de menu déroulant écrit en js

Comment utiliser JavaScript pour créer un effet de menu déroulant dynamique

Utilisez Css+jQuery pour créer un menu déroulant menu inférieur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des méthodes forEach, $.each et map en JavaScriptArticle suivant：Explication détaillée des méthodes forEach, $.each et map en JavaScript

Articles Liés

Voir plus