抽屜式導航菜單常常被應用于一些移動設備的APP或者是網頁中。它可以方便地隱藏導航菜單，以節省屏幕空間，并在需要的時候再展開。在這篇文章中，我們將介紹如何使用CSS實現抽屜式導航菜單。

首先，我們需要使用HTML創建一個基本的菜單結構。我們可以使用一個無序列表來實現這個菜單：

<nav class="drawer-nav">
<ul class="drawer-menu">
<li><a href="#">菜單項 1</a></li>
<li><a href="#">菜單項 2</a>
<ul class="drawer-submenu">
<li><a href="#">子菜單項 1</a></li>
<li><a href="#">子菜單項 2</a></li>
<li><a href="#">子菜單項 3</a></li>
</ul>
</li>
<li><a href="#">菜單項 3</a></li>
<li><a href="#">菜單項 4</a></li>
<li><a href="#">菜單項 5</a></li>
</ul>
</nav>

接下來，我們需要使用CSS來隱藏菜單。我們可以使用transform屬性將菜單向左平移，并將它的寬度設置為0。

.drawer-menu {
transform: translateX(-100%);
width: 0;
overflow: hidden;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
}

當用戶點擊菜單按鈕時，我們需要展開菜單。我們可以使用jQuery來實現這一效果：

$('.drawer-toggle').on('click', function() {
$('.drawer-nav .drawer-menu').toggleClass('open');
});

最后，我們可以使用CSS來設置菜單展開后的樣式：

.drawer-menu.open {
transform: translateX(0);
width: 250px;
}

通過上述的步驟，我們就可以實現一個基本的抽屜式導航菜單。