Javascript 点击式响应菜单设计

我正在寻找一个响应菜单，它将有一个用于小屏幕的菜单按钮，单击菜单显示向下滑动，菜单按钮将更改为

X

如下图所示

我也在试着做同样的事情，但还是上了代码笔

不知道如何在切换时将菜单按钮更改为X并恢复正常。按钮也未与徽标对齐

任何帮助或指示，使其看起来专业

更新：

---

到目前为止我已经完成了

我已经更新了您的代码笔：

只需使用css将按钮转换为

X

并返回：

.menu-btn-w {
   width: 40px;
   height: 40px;
   position: relative;
   float: right;
   left: 0;
   bottom: 0;
}

/* these styles are used for the mb lines, when your button has the class transform-mb*/
.menu-btn-w.transform-mb .mb-1 {
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(4deg);
   transform: rotate(45deg);
}
.menu-btn-w.transform-mb .mb-2 {
   display: none; /* hide the second line with css */
}
.menu-btn-w.transform-mb .mb-3 {
   margin-top: -10px;  /* pull the third line up to make a correct X */
   -ms-transform: rotate(-45deg); 
   -webkit-transform: rotate(-4deg);
   transform: rotate(-45deg);
}

现在，在单击时切换该类

transform mb

：

$('.menu-btn-w').click(
    function() {
      $('.mobile-menu-w').toggle();
      $(this).toggleClass("transform-mb");
    }
);

---

你不能使用任何外部CSS，比如bootstrap吗？尝试将浮动添加到logo我做的很好，我会尝试处理另一半。只有一个问题，为什么菜单按钮没有与logo对齐，我希望它与页面右侧对齐，并如图所示对齐使logo

float:left

，显示在更新后的代码笔中：（一个div默认为一个break）我修复了由于浮动而导致的问题，只需要在单击时修复菜单位置