以下是使用jQuery实现带动画效果的经典二级导航菜单的示例代码:
HTML代码:
<nav><ul class="main-menu">
<li><a href="#">菜单1</a>
<ul class="sub-menu">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单2</a>
<ul class="sub-menu">
<li><a href="#">子菜单4</a></li>
<li><a href="#">子菜单5</a></li>
<li><a href="#">子菜单6</a></li>
</ul>
</li>
<li><a href="#">菜单3</a></li>
</ul>
</nav>
CSS代码:
.nav {position: relative;
}
.main-menu li {
display: inline-block;
position: relative;
}
.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #ffffff;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.sub-menu li {
display: block;
}
```
JavaScript代码:
```javascript
$(document).ready(function() {
$(".main-menu li").hover(
function() {
$(this).find('.sub-menu').slideDown(200);
},
function() {
$(this).find('.sub-menu').slideUp(200);
}
);
});
这段代码首先使用jQuery选择器找到.main-menu li元素,然后使用hover()方法为每个菜单项添加鼠标悬停事件。
当鼠标悬停在菜单项上时,通过slideDown()方法展开对应的子菜单;当鼠标离开菜单项时,通过slideUp()方法收起对应的子菜单。
请注意,这只是一个基本示例,你可以根据需要自定义样式和动画效果。