I'm facing challenges in making my menu content appear when a user clicks or hovers over the hamburger menu. My app is built using Angular, and I've written some inline JavaScript and CSS to achieve this, but the results are not as expected. Here's a screenshot showing the issue:
My code can be found below:
<!doctype html>
<html ng-app="mbapp">
<head>
<meta charset="utf-8">
<title>Cloud + Enterprise // Moneyball Tools</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<!-- run `gulp inject` to automatically populate bower styles dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<!-- css files will be automatically inserted here -->
<!-- endinject -->
<!-- endbuild -->
<base href="/">
<link href="app/styles/mbapp.css" rel="stylesheet" />
<style type="text/css">
li > .sideCont > a {
text-decoration: none;
}
li > .sideCont > li a: hover {
text-decoration: none;
color: inherit;
}
.menu_items_toggle {
opacity: 1 !important;
top: 100% !important;
}
#menu {
position: relative;
}
#menu_items {
position: absolute;
top: 0%;
opacity: 0;
transition: all 0.5s;
}
.menu_items_toggle {
opacity: 1 !important;
top: 100% !important;
}
</style>
</head>
<body style="background-color: #f5faff;">
<div class="container-fluid" style="font-family: Segoe UI; padding: 0;">
<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="assets/images/icon_hamburger.png"></span>
<div id="menu_items">
<a href="https://www.moneyball.ms/">Moneyball Website</a>
<br>
<a href="https://www.tools.moneyball.ms/">Moneyball Tool</a>
<br>
<a href="https://msit.microsoftstream.com/channel/8a4a7740-855b-4c52-912c-c97fb714a0a6">Moneyball Stream Channel</a>
<br>
</div>
<span style="color: #ffffff; font-size: 22px; padding-left:20px; padding-top: 21px;">Moneyball Tool</span>>
</div>
<div class="col-md-2 tabNav">
<ul class="tabTitle">
<p>Project tools</p>
<li class="tabCont"><a href="#/home">Welcome</a></li>
<li class="tabCont"><a href="#">Experiments</a></li>
<li class="tabCont"><a href="#">Interview Notes</a></li>
</ul>
<ul class="tabTitle">
<p>Hypothesis worksheets</p>
<li class="tabCont"><a href="/#/steps">Problem phase</a></li>
<li class="tabCont"><a href="/#/solutionHyp">Solution phase</a></li>
<li class="tabCont"><a href="#">Service phase</a></li>
<li class="tabCont"><a href="#">Growth phase</a></li>
</ul>
</div>
<div ui-view>
</div>
</div>
<script type="text/javascript">
//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)
</script>
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- run `gulp inject` to automatically populate bower script dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<!-- js files will be automatically insert here -->
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
</body>
</html>