Maison > Article > interface Web > Utilisation des attributs js pour obtenir l'effet d'un menu déroulant horizontal en HTML5 (code)
Ce que cet article vous apporte concerne l'effet de l'utilisation des attributs js pour obtenir des menus déroulants horizontaux en HTML5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
<!doctype html> <html> <head> <title></title> <meta charset="utf-8"> <style> *{padding:0px;} p{margin:20px 150px;} ul{list-style:none;} ul li{float:left;position:relative;} ul li a{text-decoration:none; background:#900; height:40px; display:block; color:#fff; font-weight:bold; line-height:40px; text-align:center; margin-right:1px; padding:0px 15px; } ul li a:hover{background:#f90;} ul li ul li{float:none;} ul li ul{position:absolute;top:41px;left:0px; display:none; } </style> <script> function showmenu(li){ var submenu=li.getElementsByTagName("ul")[0]; submenu.style.display="block"; } function hidemenu(op){ var submenu=op.getElementsByTagName("ul")[0]; submenu.style.display="none"; } </script> </head> <body> <p> <ul> <li><a href="#">学校简介</a></li> <li onmouseover="showmenu(this)" onmouseleave="hidemenu(this)"><a href="#">管理机构</a></li> <li onmouseover="showmenu(this)" onmouseleave="hidemenu(this)"><a href="#">学院设置</a> <ul> <li><a href="#">电气学院</a></li> <li><a href="#">材料学院</a></li> <li><a href="#">测绘学院</a></li> <li><a href="#">安全学院</a></li> <li><a href="#">体育学院</a></li> <li><a href="#">化工学院</a></li> </ul> </li> <li onmouseover="showmenu(this)" onmouseleave="hidemenu(this)"><a href="#">科学研究</a> <ul> <li ><a href="#">科研机构</a></li> <li ><a href="#">科研平台</a></li> <li ><a href="#">科研论文</a></li> <li ><a href="#">成果转化</a></li> </ul> </li> <li onmouseover="showmenu(this)" onmouseleave="hidemenu(this)"><a href="#">招生就业</a> <ul> <li ><a href="#">本科生招生</a></li> <li ><a href="#">硕士生招生</a></li> <li ><a href="#">博士生招生</a></li> <li ><a href="#">就业信息</a></li> </ul> </li> <li><a href="#">呼唤英才</a></li> </ul> </p> </body> </html>
Recommandations associées :
js implémente une fonction de recherche similaire aux mots-clés Lenovo (avec code)
js encapsule la fonction _new et comment implémenter le nouveau mot-clé (avec test de code)
Introduction à la syntaxe de base de js : types de données et types de variables
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!