✖️に変わるハンバーガーメニューができません

クリックしたら✖️になるハンバーガーメニューを作成したいのですが、✖️にならず”く”の字になってしまいます。.top_moveと.bottom_moveのところに top:10px;
bottom:10px;と試しに入力しても反応しませんでした。何が原因でしょうか？自分でも調べましたが、解決できないためどなたか教えていただけると助かります。

html

            <nav id="hamburger_menu">
                <ul>
                <li><a href="#concept">Concept</a></li>
                <li><a href="#service">Service</a></li>
                <li><a href="#works">Works</a></li>
                <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
            <!-- ハンバーガーメニューのアイコン -->
            <div id="hamburger">
                <span class="inner_line" id="line_top"></span>
                <span class="inner_line" id="line_middle"></span>
                <span class="inner_line" id="line_bottom"></span>
            </div>

  /*ハンバーガーメニュー*/  css     
    #hamburger_menu{
        position:absolute;
        top:0;
        right:-100%;
        width:100%;
        height:100vh;
        background-color:#282F35;
        transition:.7s;
       
    
        & ul{
            margin:(50vh auto 0);
            transform:translateY(-50%);
            text-align: center;
            & li{
                & a{
                    color:#fff;
                    display:block;
                    padding:10px;
                    font-style: italic;
                    translate:.5s;
                    &:hover{
                        opacity:30%;
                    }
                }
    #hamburger{
        display:block;
        position:absolute;
        width:30px;
        height:22px;
        top:30px;
        right:30px;
        transition: 1s;

        & .inner_line{
            display:block;
            position:absolute;
            width:30px;
            height:3px;
            background-color:#fff;
            transition:1s;
        }
        & #line_top{
            top:0;
        }
        & #line_middle{
            top:10px;
        }
        & #line_bottom{
            bottom:0;
        }
    }
       
      &  .top_move {
        transform: rotate(-45deg);
      }
      & .middle_move {
        opacity: 0;
      }
      & .bottom_move {
        transform: rotate(45deg);
      }
      & .in{
        transform:translateX(-100%);
    }

/ハンバーガーメニュー/ js
function hamburger() {
document.getElementById('line_top').classList.toggle('top_move');
document.getElementById('line_middle').classList.toggle('middle_move');
document.getElementById('line_bottom').classList.toggle('bottom_move');
document.getElementById('hamburger_menu').classList.toggle('in');
}
document.getElementById('hamburger').addEventListener('click' , function () {
hamburger();
} );
/リンクをクリックでハンバーガーメニュー消える/
$("#hamburger_menu a").on("click", function() {
$("#hamburger_menu").slideToggle();
$(".header_inner").removeClass("in");
});

itagagaki

2021/09/19 05:13

そもそも、これで、くの字でも出来てます？？

行動規範の内容に同意します

回答1件

ベストアンサー

SCSSだと思いますが、}の対応がおかしいのか、コンパイルできないので、
<div id="hamburger">の部分だけ取り出して確認してみました。

transform-origin で回転の中心を調整すればいいでしょう。

html
1<!-- ハンバーガーメニューのアイコン -->
2<div id="hamburger">
3  <span class="inner_line" id="line_top"></span>
4  <span class="inner_line" id="line_middle"></span>
5  <span class="inner_line" id="line_bottom"></span>
6</div>

scss
1#hamburger{
2  display:block;
3  position:absolute;
4  width:30px;
5  height:22px;
6  top:30px;
7  right:30px;
8  transition: 1s;
9
10  & .inner_line{
11    display:block;
12    position:absolute;
13    width:30px;
14    height:3px;
15    background-color: #aaa;
16    transition:1s;
17    transform-origin: 28px; //これの数値を調整
18  }
19  & #line_top{
20    top:0;
21  }
22  & #line_middle{
23    top:10px;
24  }
25  & #line_bottom{
26    bottom:0;
27  }
28  &  .top_move {
29    transform: rotate(-45deg);
30  }
31  & .middle_move {
32    opacity: 0;
33  }
34  & .bottom_move {
35    transform: rotate(45deg);
36  }
37}