ハンバーガーアイコンが角度のメニューからスライドします

Question

私はナビ内のスパンからメニューを作成しようとしていますが、難しかったです。私はGoogleを検索し、私が何をしているのか見つけていないので、誰かが助けてくれることを願っています。基本的には、私はこのコードを持っています：

<div style="background-color: #002F33; min-height:50px;"> 
    <span class="navIcon" style="width: 50px; border-right-style: solid 1px #939393;"><img src="assets/images/icon_hamburger.png"></span> 
    <div> 
     <a href="#Link1">Link1</a> 
     <a href="#Link2">Link2</a> 
     <a href="#Link3">Link3</a>   
    </div> 
    <span style="color: #ffffff; font-size: 22px; padding-left:20px; padding-top: 21px;">Moneyball Tool</span>> 
</div> 

スパンの画像をクリックして下のコンテンツを飛ばしてみるといいと思います。なぜ私はこれに問題があるのか​​分かりませんが、あなたが与えることができる助けを感謝します。

Answer 1

私はあなたのdiv要素のいくつかにIDを追加し、

.menu_items_toggle { 
    opacity: 1 !important; 
    top: 100% !important; 
} 

//make a refernce to the container that holds all your links 
 
var menu_item_container = document.getElementById("menu_items") 
 

 
//This function will show/hide menu options if image is clicked on 
 
function clicker() { 
 
    menu_item_container.classList.toggle('menu_items_toggle'); 
 
    console.log(menu_item_container.classList.contains('menu_items_toggle')) 
 

 

 
} 
 
console.log(document.getElementById("span_img_container")); 
 
document.getElementById("menu_img").addEventListener('click', clicker)

#menu { 
 
    position: relative; 
 
} 
 
#menu_items { 
 
    position: absolute; 
 
    top: 0%; 
 
    opacity: 0; 
 
    transition: all 0.5s; 
 
} 
 
.menu_items_toggle { 
 
    opacity: 1 !important; 
 
    top: 100% !important; 
 
} 
 
img { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div id="menu" style="background-color: #002F33; min-height:50px;"> 
 
    <span id="span_img_container" class="navIcon" style="width: 50px; border-right-style: solid 1px #939393;"><img id="menu_img" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcToFURgZ4pNY28Zsq8ytnVFL7hzYMpGpBSpQWwGqSP6N77YRUXn"></span> 
 
    <div id="menu_items" class=""> 
 
    <a href="#Link1">Link1</a> 
 
    <br> 
 
    <a href="#Link2">Link2</a> 
 
    <br> 
 
    <a href="#Link3">Link3</a> 
 
    <br> 
 
    </div> 
 
    <span style="color: #ffffff; font-size: 22px; padding-left:20px; padding-top: 21px;">Moneyball Tool</span>> 
 
</div>