Javascript 如何制作垂直菜单图标线

我需要帮助制作一个菜单图标，它不是三条水平线，而是三条垂直线，单击后会变成X。。。就像在这个网站上

到目前为止，我最好的尝试让我走了这么远。。。

我需要一些帮助使动画工作，使线垂直

我的HTML:

<div class="hamburger" id="menu-button">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="menu-button_lable">Menu</span>
</div>

#menu-button {
  position: fixed;
  top: 50%;
  left: 0;
  width              : 60px;
  height             : 45px;
  -webkit-transform  : rotate(0deg);
  -moz-transform     : rotate(0deg);
  -o-transform       : rotate(0deg);
  transform          : rotate(0deg);
  -webkit-transition : .5s ease-in-out;
  -moz-transition    : .5s ease-in-out;
  -o-transition      : .5s ease-in-out;
  transition         : .5s ease-in-out;
  cursor             : pointer;
  .line {
    display: block;
    position: absolute;
    height: 2px;
    width: 25px;
    background: #d3531a;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    &:nth-child(1) {
      top                      : 12px;
      -webkit-transform-origin : left center;
      -moz-transform-origin    : left center;
      -o-transform-origin      : left center;
      transform-origin         : left center;
    }
    &:nth-child(2) {
      top                      : 18px;
      -webkit-transform-origin : left center;
      -moz-transform-origin    : left center;
      -o-transform-origin      : left center;
      transform-origin         : left center;
    }
    &:nth-child(3) {
      top                      : 24px;
      -webkit-transform-origin : left center;
      -moz-transform-origin    : left center;
      -o-transform-origin      : left center;
      transform-origin         : left center;
    }
  }
  .menu-button_lable {
    font-size: .7857142857rem;
    letter-spacing: .06em;
    line-height: 1.3;
    display: inline-block;
    vertical-align: middle;
    margin-left: 2.2rem;
    margin-top: 0.75rem;
    font-weight: 500;
    position: relative;
  }
  &.open span {
    &:nth-child(1) {
      -webkit-transform : rotate(45deg);
      -moz-transform    : rotate(45deg);
      -o-transform      : rotate(45deg);
      transform         : rotate(45deg);
      top               : 6px;
      left              : 8px;
    }
    &:nth-child(2) {
      width   : 0;
      opacity : 0;
    }
    &:nth-child(3) {
      -webkit-transform : rotate(-45deg);
      -moz-transform    : rotate(-45deg);
      -o-transform      : rotate(-45deg);
      transform         : rotate(-45deg);
      top               : 24px;
      left              : 8px;
    }
  }
}

$(document).ready(function(){
    $('#nmenu-button').click(function(){
        $(this).toggleClass('is-active');
    });
});

和我的JS:

<div class="hamburger" id="menu-button">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
    <span class="menu-button_lable">Menu</span>
</div>

#menu-button {
  position: fixed;
  top: 50%;
  left: 0;
  width              : 60px;
  height             : 45px;
  -webkit-transform  : rotate(0deg);
  -moz-transform     : rotate(0deg);
  -o-transform       : rotate(0deg);
  transform          : rotate(0deg);
  -webkit-transition : .5s ease-in-out;
  -moz-transition    : .5s ease-in-out;
  -o-transition      : .5s ease-in-out;
  transition         : .5s ease-in-out;
  cursor             : pointer;
  .line {
    display: block;
    position: absolute;
    height: 2px;
    width: 25px;
    background: #d3531a;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    &:nth-child(1) {
      top                      : 12px;
      -webkit-transform-origin : left center;
      -moz-transform-origin    : left center;
      -o-transform-origin      : left center;
      transform-origin         : left center;
    }
    &:nth-child(2) {
      top                      : 18px;
      -webkit-transform-origin : left center;
      -moz-transform-origin    : left center;
      -o-transform-origin      : left center;
      transform-origin         : left center;
    }
    &:nth-child(3) {
      top                      : 24px;
      -webkit-transform-origin : left center;
      -moz-transform-origin    : left center;
      -o-transform-origin      : left center;
      transform-origin         : left center;
    }
  }
  .menu-button_lable {
    font-size: .7857142857rem;
    letter-spacing: .06em;
    line-height: 1.3;
    display: inline-block;
    vertical-align: middle;
    margin-left: 2.2rem;
    margin-top: 0.75rem;
    font-weight: 500;
    position: relative;
  }
  &.open span {
    &:nth-child(1) {
      -webkit-transform : rotate(45deg);
      -moz-transform    : rotate(45deg);
      -o-transform      : rotate(45deg);
      transform         : rotate(45deg);
      top               : 6px;
      left              : 8px;
    }
    &:nth-child(2) {
      width   : 0;
      opacity : 0;
    }
    &:nth-child(3) {
      -webkit-transform : rotate(-45deg);
      -moz-transform    : rotate(-45deg);
      -o-transform      : rotate(-45deg);
      transform         : rotate(-45deg);
      top               : 24px;
      left              : 8px;
    }
  }
}

$(document).ready(function(){
    $('#nmenu-button').click(function(){
        $(this).toggleClass('is-active');
    });
});

---

它只是一个纯css汉堡菜单图标，不需要点击事件触发，简单的悬停即可。为了形成“X”，我降低了.strip.two的不透明度。旋转并平移.strip.one和.strip.three以获得“X”。如果需要，您可以添加click事件，在该事件中，您只需根据需要添加和删除类

.menuIcon{
显示：内联块；
宽度：2米；
身高：2.2米；
}
.脱衣舞{
宽度：3倍；
高度：2米；
显示：内联块；
背景：黑色；
}
.menuIcon:悬停{
光标：指针；
}
梅纽康：悬停，脱衣，二号{
不透明度：0；
}
.strip.one、.strip.two、.strip.three{转换原点：50%50%；转换：所有100ms缓进缓出；}
.menuIcon:悬停，脱衣，一号{
变换：旋转（45度）translateY（-0.5em）；
}
梅纽康：悬停，三号{
变换：旋转（45度）translateY（-0.5em）；
}

---

试试这个代码

$（文档）.ready（函数（）{
$（“.hamburger”）。单击（函数（e）{
$（“.hamburger”）.toggleClass（“处于活动状态”）；
});
});
#菜单按钮{
位置：固定；
最高：50%；
左：0；
宽度：60px；
高度：45px；
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
-webkit转换：.5s轻松输入输出；
-moz转换：.5s易进易出；
-o型过渡：.5s易进易出；
过渡：.5s易进易出；
光标：指针；
}
#菜单按钮。行{
显示：块；
位置：绝对位置；
高度：2倍；
宽度：25px；
背景：#d3531a；
不透明度：1；
左：0；
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
-webkit转换：.25s易入易出；
-moz转换：.25s易入易出；
-o型过渡：.25秒缓进缓出；
转换：.25秒轻松输入输出；
}
#菜单按钮。行：第n个子项（1）{
顶部：12px；
-webkit变换原点：左中心；
-moz变换原点：左中心；
-o变换原点：左中心；
变换原点：左中心；
}
#菜单按钮。行：第n个子项（2）{
顶部：18px；
-webkit变换原点：左中心；
-moz变换原点：左中心；
-o变换原点：左中心；
变换原点：左中心；
}
#菜单按钮。行：第n个子项（3）{
顶部：24px；
-webkit变换原点：左中心；
-moz变换原点：左中心；
-o变换原点：左中心；
变换原点：左中心；
}
.菜单按钮标签{
字体大小：.7857142857rem；
字母间距：.06em；
线高：1.3；
显示：内联块；
垂直对齐：中间对齐；
左边距：2.2rem；
保证金上限：0.75雷姆；
字号：500；
位置：相对位置；
}
#菜单按钮。打开span{}
#menu-button.is-active范围：第n个子项（1）{
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
顶部：6px；
左：8px；
}
#menu-button.is-active范围：第n个子项（2）{
宽度：0；
不透明度：0；
}
#menu-button.is-active范围：第n个子项（3）{
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-o变换：旋转（-45度）；
变换：旋转（-45度）；
顶部：24px；
左：8px；
}
.线路{
位置：相对位置；
显示：内联块；
垂直对齐：中间对齐；
宽度：1px；
高度：20px；
-webkit剪辑路径：多边形（0,100%0,100%100,0,100%）；
剪辑路径：多边形（0,100%0,100%100,0,100%）；
背景：红色；
}
.汉堡包{
光标：指针；
}
.菜单按钮标签{
颜色：红色；
左侧填充：10px；
}

菜单
这是立式汉堡的风格


。汉堡包{
宽度：14px；
高度：18px；
显示：内联块；
垂直对齐：中间对齐；
文本对齐：居中；
位置：相对位置；
}
.线路{
显示：内联块；
宽度：2倍；
身高：100%；
背景色：#000；
垂直对齐：中间对齐；
文本对齐：居中；
}
.行：：之前，
.行：：之后{
内容：“；
位置：绝对位置；
排名：0；
底部：0；
背景色：#000；
宽度：2倍；
}
.行：：之后{
右：0；
}
.行：：之前{
左：0；
}

请参见下文。
为每行添加额外的CSS，以便在激活时正确定位


$（文档）。在（“单击”、“#菜单按钮”上，函数（）{
$（this.toggleClass（'is-active'）；
});
#菜单按钮{
光标：指针；
位置：相对位置；
页边顶部：1rem；
}
.线路{
显示：块；
位置：绝对位置；
高度：2倍；
宽度：25px；
背景：#d3531a；
不透明度：1；
变换：旋转（90度）；
转换：.25秒轻松输入输出；
}
.汉堡包系列：第n个孩子（1）{
排名：0；
左：0；
}
/*增加*/
.hamburger.is-active.行：第n个孩子（1）{
变换：旋转（45度）；
变换原点：左上；
顶部：-9px；
左：9px；
}
.汉堡包系列：第n个孩子（2）{
排名：0；
左：10px；
}
/*增加*/
.hamburger.is-active.行：第n个孩子（2）{
不透明度：0；
}
.汉堡包系列：第n个孩子（3）{