Rumah >hujung hadapan web >tutorial js >Kod jQuery untuk melaksanakan menu_jquery tiga peringkat
Minggu lepas saya mengambil alih kerja pembinaan tapak web baharu, yang memerlukan kod jquery untuk melaksanakan menu tiga peringkat Sebenarnya, ia tidak sukar sama sekali Editor akan berkongsi kod dengan anda untuk rujukan anda.
Saya akan menunjukkan kepada anda pemaparan terlebih dahulu. Jika anda berasa selesa, sila rujuk kod pelaksanaan.
Kod 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>
kod 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>
kod 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; }
Kandungan di atas ialah kod jQuery untuk melaksanakan menu tiga peringkat yang diperkenalkan oleh editor saya harap ia akan membantu anda!