지난주에 3단계 메뉴를 구현하기 위해 jquery 코드가 필요한 새로운 웹사이트 구축 작업을 맡았습니다. 사실 편집자가 참고용으로 코드를 공유해 드릴 것입니다.
먼저 렌더링을 보여드리겠습니다. 괜찮으시다면 구현 코드를 참고해주세요.
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>
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>
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; }
위 내용은 에디터가 소개한 3단계 메뉴를 구현하기 위한 jQuery 코드입니다. 도움이 되셨으면 좋겠습니다!