css滑出菜单

CSS是网页设计的基础，使用CSS可以实现各种效果，在这里我们介绍一种基于CSS的滑出菜单效果。

html：
<div class="container"><button class="menu-button">菜单</button><ul class="menu"><li>菜单1</li><li>菜单2</li><li>菜单3</li></ul></div>css:
.container{
position: relative;
}
.menu-button{
position: absolute;
top: 0;
right: 0;
}
.menu{
position: fixed;
top: 0;
right: -100%;
width: 200px;
height: 100%;
background-color: #333;
transition: all 0.5s ease;
}
.menu.active{
right: 0;
}
.menu li{
list-style: none;
margin-top: 20px;
font-size: 20px;
text-align: center;
}

首先我们需要有一个容器，里面有一个按钮和一个菜单，容器的position属性设置为relative，按钮的position属性设置为absolute，使它可以浮动在右上角，菜单的position属性设置为fixed，它可以始终保持在屏幕最右侧。

我们利用CSS中transition属性，将菜单向右移入屏幕，但是初始位置是当前屏幕的右边界，菜单栏并没有显示。只有当我们设置一个类名为active时，菜单才会向右滑入并显示。

如果需要更改菜单的样式，我们可以使用CSS中的list-style属性来控制列表的样式，利用margin-top控制列表项的间距，利用font-size控制列表项的字体大小。

最后，我们可以在JS中添加一个toggle函数，使按钮可以点击时激活或关闭菜单滑出效果。

查看更多关于css滑出菜单的详细内容...