抽屉式菜单是现代网站设计中常见的一种菜单导航方式，使用CSS的display和position属性可以实现这种效果。

首先我们需要一个触发抽屉式菜单显示的按钮，使用HTML的button标签创建按钮：

<button >菜单</button>

接下来，我们需要一个抽屉式菜单的容器，该容器的初始状态应该是隐藏的。我们使用HTML的div标签创建容器：

<div ><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类名。

到此为止，我们就成功实现了一个简单的抽屉式菜单效果。