La semaine dernière, j'ai repris un nouveau travail de construction de site Web, qui nécessitait du code jquery pour implémenter un menu à trois niveaux. En fait, ce n'est pas difficile du tout. L'éditeur partagera le code avec vous pour votre référence.
Je vais d'abord vous montrer les rendus. Si vous vous sentez bien, veuillez vous référer au code d'implémentation.
Code HTML :
<body> <div class="navMenu"> <ul> <li><a href="#">首页</a> <ul> <li><a href="#">JavaScript+</a> <ul> <li><a href="#">三角函数</a></li> <li><a href="#">矩形</a></li> </ul> </li> <li><a href="#">语文</a> <ul> <li><a href="#">唐诗</a></li> <li><a href="#">宋词</a></li> </ul> </li> <li><a href="#">英语</a></li> </ul> </li> <li><a href="#">课程大厅</a></li> <li><a href="#">学习中心+</a> <ul> <li><a href="#">JavaScript+</a> <ul> <li><a href="#">三角函数</a></li> <li><a href="#">矩形</a></li> </ul> </li> <li><a href="#">语文</a> <ul> <li><a href="#">三角函数</a></li> <li><a href="#">矩形</a></li> </ul> </li> <li><a href="#">英语</a></li> </ul> </li> <li><a href="#">帮助</a></li> </ul> </div> </body>
Code js :
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script type="text/javascript"> $(function(){ $("li").has("ul").mouseover(function(){ $(this).children("ul").css("display","block"); $(this).css("backgroundColor","#0066FF"); }).mouseout(function () { $(this).children("ul").css("display","none"); $(this).css("backgroundColor","#eee"); }) }) </script>
code css :
*{ padding:0; margin:0; } /*一级菜单*/ .navMenu { width:570px; margin:0 auto; } .navMenu ul li{ float: left; position: relative; } li{ list-style: none; background-color: #eee; width: 140px; height: 40px; text-align: center; margin-right: 2px; margin-bottom: 2px; } ul li a{ line-height: 40px; text-align: center; font-size: 20px; color: #000; text-decoration: none; display: block; padding:0 10px; } /*二级菜单*/ .navMenu ul li ul { display: none; position:absolute; left: 0; top:0; margin-top:42px; } .navMenu ul li ul li{ float:none; } /*三级菜单*/ .navMenu ul li ul li ul{ display: none; left:140px; top:-42px; }
Le contenu ci-dessus est le code jQuery pour implémenter un menu à trois niveaux introduit par l'éditeur. J'espère qu'il vous sera utile !