首页jquery滑动横向二级菜单代码实例

jquery滑动横向二级菜单代码实例

时间: 2024-02-01 15:03:19 浏览: 152

以下是一个使用jQuery实现滑动横向二级菜单的代码实例： ```html <!DOCTYPE html> <html> <head> <title>jQuery滑动横向二级菜单</title> <style> .menu { width: 200px; background-color: #f1f1f1; padding: 10px; } .menu ul { list-style-type: none; padding: 0; margin: 0; } .menu ul li { position: relative; padding: 10px; cursor: pointer; } .menu ul li ul { display: none; position: absolute; top: 0; left: 100%; background-color: #fff; padding: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .menu ul li:hover ul { display: block; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('.menu ul li').hover(function() { $(this).children('ul').stop().slideDown(); }, function() { $(this).children('ul').stop().slideUp(); }); }); </script> </head> <body> <div class="menu"> <ul> <li>菜单1 <ul> <li>子菜单1</li> <li>子菜单2</li> <li>子菜单3</li> </ul> </li> <li>菜单2 <ul> <li>子菜单4</li> <li>子菜单5</li> <li>子菜单6</li> </ul> </li> <li>菜单3 <ul> <li>子菜单7</li> <li>子菜单8</li> <li>子菜单9</li> </ul> </li> </ul> </div> </body> </html> ``` 这段代码创建了一个横向滑动的二级菜单。当鼠标悬停在菜单项上时，子菜单会以滑动的方式展开，鼠标离开时子菜单会收起。你可以根据需要修改菜单的样式和内容。

阅读全文