クリックするとハンバーガーメニューが表示されない

nth-chid（1）、2、3を使用してSVG rectをターゲットにし、クリック時にトリガーしようとしています。私がここで間違っていることを知らないでください。どんな助けもありがとう！ここでクリックするとハンバーガーメニューが表示されない

(function() { 
 
    var burger; 
 

 
    buger = document.getElementById('burger'); 
 

 
    burger.addEventListener('click', function() { 
 
    console.log('you cliked the burger'); 
 
    return burger.classList.toggle('st0-active'); 
 
    }); 
 

 
}).call(this);

body { 
 
    max-width: 900px; 
 
    margin: 0 auto; 
 
} 
 

 
.st0-active:nth-child(1) { 
 
    -webkit-transform: rotate(27deg) translate(23px, -51px); 
 
      transform: rotate(27deg) translate(23px, -51px); 
 
    fill: #000; 
 
} 
 
.st0-active:nth-child(2) { 
 
    fill: #000; 
 
} 
 
.st0-active:nth-child(3) { 
 
    -webkit-transform: rotate(-21deg) translate(-48px, 15px); 
 
      transform: rotate(-21deg) translate(-48px, 15px); 
 
    fill: #000; 
 
}

<body> 
 
<svg class="mo-icon__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="burger"> 
 
<g id="icon_x5F_hamburger"> 
 
\t <rect x="0.11206" y="46.3329" class="st0" width="200" height="8"/> 
 
\t <rect x="0.11206" y="96.22083" class="st0" width="200" height="8"/> 
 
\t <rect x="0.11206" y="146.10876" class="st0" width="200" height="8"/> 
 
</g> 
 
</svg> 
 
    
 
</body>

は、私はCSSトランスフォームを使用し、n番目の子を使用して矩形をターゲットとしていた理由はここにリンクされている私の設計された最終目標

の写真です私が現在取り組んでいるcodepenに

出典

2017-10-03 ThomasBrushel

'buger' =>' burger' – zynkn

そのシンボルは何ですか？テキストで置き換えてください – JeanValjean

@ JeanValjeanハンバーガーメニューのように、そのシンボルはハンバーガーです。 –

(function() { 
 
    var burger; 
 

 
    burger = document.getElementById('burger'); 
 

 
    burger.addEventListener('click', function() { 
 
    console.log('you cliked the burger'); 
 
    return burger.classList.toggle('st0-active'); 
 
    }); 
 

 
}).call(this);

body { 
 
    max-width: 900px; 
 
    margin: 0 auto; 
 
} 
 
#burger > g > rect{ 
 
    transition: transform 1s; 
 
} 
 

 
.st0-active > g > rect:nth-child(1) { 
 
    -webkit-transform: rotate(27deg) translate(23px, -51px); 
 
     transform: rotate(27deg) translate(23px, -51px); 
 
    fill: #000; 
 
} 
 
.st0-active > g > rect:nth-child(2) { 
 
    fill: #000; 
 
} 
 
.st0-active > g > rect:nth-child(3) { 
 
    -webkit-transform: rotate(-21deg) translate(-48px, 15px); 
 
     transform: rotate(-21deg) translate(-48px, 15px); 
 
    fill: #000; 
 
}

<body> 
 
<svg class="mo-icon__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="burger"> 
 
<g id="icon_x5F_hamburger"> 
 
\t <rect x="0.11206" y="46.3329" class="st0" width="200" height="8"/> 
 
\t <rect x="0.11206" y="96.22083" class="st0" width="200" height="8"/> 
 
\t <rect x="0.11206" y="146.10876" class="st0" width="200" height="8"/> 
 
</g> 
 
</svg> 
 
    
 
</body>

このコードを追加してください。

#burger{ 
    transition: transform 1s; 
}

さらに

CSS3遷移所定の期間にわたって、あなたが（一つの値から別のものに）スムーズにプロパティ値を変更することを可能にします。

出典

2017-10-03 16:17:22 zynkn

コードのみの回答は投稿しないでください。彼らは役に立たない。 –

ありがとうございました！しかし、私が達成しようとしているのは、ハンバーガーメニューをこのような矢印に変えることです。 - > – ThomasBrushel

@ThomasBrushelが1分待ってください。 – zynkn

クリックするとハンバーガーメニューが表示されない

答えて

関連する問題