L'exemple de cet article décrit comment implémenter un effet de menu de porte coulissante simple et pratique à l'aide de JS CSS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un menu de navigation pour porte coulissante JavaScript CSS simple et pratique Lors de l'écriture, j'ai essayé d'utiliser le moins de code possible pour écrire du code avec une bonne compatibilité. J'espère que tout le monde pourra aimer cette porte coulissante, et j'espère aussi que les experts qui étudient. JS peut me rejoindre. Apprendre les uns des autres et s'améliorer ensemble.
La capture d'écran de l'effet en cours d'exécution est la suivante :
L'adresse de la démo en ligne est la suivante :
http://demo.jb51.net/js/2015/js-css-simple-useful-menu-codes/
Le code spécifique est le suivant :
<html> <head> <title>简易实用,滑动门</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <style type="text/css"> *{margin:0;padding:0;} a:link,a:visited{text-decoration:none;} a:hover{text-decoration:none;} ul{list-style:none;} .subMenu{background:#333;float:left;padding-top:2px;width:100%;} .subMenu li{float:left;} .subMenu li a{display:block;float:left;color:#fff;height:25px;line-height:25px;padding:0 5px;margin-left:2px;} .subMenu .thisStyle a {background:#fff;color:#000;} .subContent{clear:both;border:2px solid #000;border-top:none;background:#fff;} .subContent ul{display:none;padding:15px;line-height:180%;} </style> </head> <body> <ul class="subMenu"> <li class="thisStyle"><a href="javascript:void(0)">目录</a></li> <li><a href="javascript:void(0)">列表</a></li> <li><a href="javascript:void(0)">产品</a></li> <li><a href="javascript:void(0)">新网</a></li> </ul> <div class="subContent"> <ul style="display:block;"> <li><a href="#">111111</a></li> <li><a href="#">111111</a></li> <li><a href="#">111111</a></li> <li><a href="#">111111</a></li> </ul> <ul> <li><a href="#">222222</a></li> <li><a href="#">222222</a></li> <li><a href="#">222222</a></li> <li><a href="#">222222</a></li> </ul> <ul> <li><a href="#">333333</a></li> <li><a href="#">333333</a></li> <li><a href="#">333333</a></li> <li><a href="#">333333</a></li> </ul> <ul> <li><a href="#">444444</a></li> <li><a href="#">444444</a></li> <li><a href="#">444444</a></li> <li><a href="#">444444</a></li> </ul> </div> <script> function $_class(name){ var elements = document.getElementsByTagName("*"); for(s=0;s<elements.length;s++){ if(elements[s].className==name){ return elements[s]; } } } //tab effects var tabList = $_class("subMenu").getElementsByTagName("li") tabCon = $_class("subContent").getElementsByTagName("ul"); for(i=0;i<tabList.length;i++){ (function(){ var t = i; tabList[t].onmouseover = function(){ for(o=0;o<tabCon.length;o++){ tabCon[o].style.display = "none"; tabList[o].className = ""; if(t==o){ this.className = "thisStyle"; tabCon[o].style.display = "block"; } } } })() } </script> </bdoy> </html>
J'espère que cet article sera utile à la programmation JavaScript de chacun.