CSS是網(wǎng)頁設(shè)計的基礎(chǔ)，使用CSS可以實現(xiàn)各種效果，在這里我們介紹一種基于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屬性設(shè)置為relative，按鈕的position屬性設(shè)置為absolute，使它可以浮動在右上角，菜單的position屬性設(shè)置為fixed，它可以始終保持在屏幕最右側(cè)。

我們利用CSS中transition屬性，將菜單向右移入屏幕，但是初始位置是當(dāng)前屏幕的右邊界，菜單欄并沒有顯示。只有當(dāng)我們設(shè)置一個類名為active時，菜單才會向右滑入并顯示。

如果需要更改菜單的樣式，我們可以使用CSS中的list-style屬性來控制列表的樣式，利用margin-top控制列表項的間距，利用font-size控制列表項的字體大小。

最后，我們可以在JS中添加一個toggle函數(shù)，使按鈕可以點擊時激活或關(guān)閉菜單滑出效果。