使用jQuery实现伸缩式导航菜单,自定义样式效果
时间: 2024-06-14 12:03:30 浏览: 6
以下是使用jQuery实现伸缩式导航菜单的示例代码,同时也包含了自定义样式效果:
HTML代码:
```html
<div id="menu">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
</ul>
</div>
<button id="toggle-menu">菜单</button>
```
CSS代码:
```css
#menu {
display: none;
position: absolute;
top: 30px;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
z-index: 9999;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
margin: 0;
padding: 0;}
#menu ul li a {
display: block;
padding: 5px;
color: #333;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #f5f5f5;
}
#toggle-menu {
padding: 5px 10px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
```
JavaScript代码:
```javascript
$(document).ready(function() {
$("#toggle-menu").click(function() {
$("#menu").slideToggle("slow");
});
});
```
在上述代码中,我们使用了jQuery的slideToggle()方法来实现菜单的伸缩效果,同时使用了CSS来定义菜单的样式。点击按钮后,菜单会以动画的形式展开或收起。