点击响应式菜单设计

Question

我希望制作一个响应式菜单，其中有一个菜单按钮用于小屏幕，点击菜单显示向下滑动，菜单按钮将更改为X

如下图所示

我正在尝试做同样的事情，但得到了代码集http://codepen.io/anon/pen/jbaXEq

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

任何帮助或指针使其看起来更专业。

更新：

到目前为止，我已经完成了http://codepen.io/anon/pen/EVbGbR?editors=110

Answer 1

我已更新您的codepen：

http://codepen.io/anon/pen/NGwegr

只需使用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");
    }
);