CODEWITHSUNDEEP
javascripthtmlcssangularjs
Mark
Mark

Reputation: 1872

Hamburger Icon slide out menu in Angular

I am trying to create a slide out menu from a span in my nav and am having difficulty. Hope someone can help as I have searched Google and not finding what I am after. Basically, I have this code:

<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>

I simply want to get the menu when the span image is clicked to flyout over the content below. Not sure why I am having trouble with this, but appreciate any help you can give.

Upvotes: 1

Views: 354

Answers (1)

repzero
repzero

Reputation: 8402

I added ids to some of your divs and use javascript to toggle a css class created below

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

Snippet below

//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>

Upvotes: 2

Related Questions