帮我创建一个响应式网站的汉堡菜单。
- HTML部分：
在你的HTML代码中，你需要添加一个导航标签，并在其中添加一个汉堡菜单图标和一个菜单列表
- CSS部分：
您需要添加以下CSS代码以设置您的汉堡菜单样式：
nav { display: flex; justify-content: space-between; align-items: center; }
nav .icon { width: 30px; height: 20px; background: #333; position: relative; transform: rotate(0); transition: .5s ease-in-out; cursor: pointer; }
nav .icon:before, nav .icon:after { content: ""; position: absolute; width: 100%; height: 2px; background-color: #fff; }
nav .icon:before { top: -7px; }
nav .icon:after { top: 7px; }
nav ul { display: flex; flex-direction: column; align-items: center; position: fixed; top: 70px; right: -100%; width: 100%; height: calc(100% - 70px); background: #fff; list-style: none; transition: .5s ease-in-out; }
nav ul li a { display: block; font-size: 20px; font-weight: 600; color: #333; padding: 10px; border-bottom: 1px solid #ccc; width: 100%; text-align: center; }
nav ul li a:hover { color: #fff; background: #333; }
nav ul.active { right: 0; }
nav .icon