抽屜式菜單是現代網站設計中常見的一種菜單導航方式，使用CSS的display和position屬性可以實現這種效果。

首先我們需要一個觸發抽屜式菜單顯示的按鈕，使用HTML的button標簽創建按鈕：

<button class="drawer-button">菜單</button>

接下來，我們需要一個抽屜式菜單的容器，該容器的初始狀態應該是隱藏的。我們使用HTML的div標簽創建容器：

<div class="drawer-menu">
<a href="#">菜單項1</a>
<a href="#">菜單項2</a>
<a href="#">菜單項3</a>
</div>

接著，我們使用CSS設置抽屜式菜單容器的初始狀態和顯示狀態：

.drawer-menu {
position: fixed;
top: 0;
left: -200px;
width: 200px;
height: 100vh;
background-color: #333;
z-index: 999;
transition: left 0.3s ease-in-out;
}
.drawer-menu.show {
left: 0;
}

上面的CSS代碼中，我們設置了抽屜式菜單容器的位置、大小、背景顏色和層級，以及過渡動畫。當抽屜式菜單容器添加了show類名時，會通過CSS動畫從左側滑動顯示出來。

最后，我們需要使用JavaScript為按鈕添加點擊事件，當按鈕被點擊時，為抽屜式菜單容器添加show類名并顯示出來：

const button = document.querySelector('.drawer-button');
const drawer = document.querySelector('.drawer-menu');
button.addEventListener('click', function() {
drawer.classList.toggle('show');
});

上面的JavaScript代碼中，我們使用DOM API獲取了按鈕和抽屜式菜單容器，為按鈕添加了點擊事件，并使用classList.toggle()方法為抽屜式菜單容器添加或刪除show類名。

到此為止，我們就成功實現了一個簡單的抽屜式菜單效果。