here's my codepen:
I'm trying to create a navigation menu that slides in when you hover on the arrow and then slides away when your mouse leaves the menu.
I have UIController.showMenu and UIController.closeMenu.
If I call either one of them in the console, they work as expected.
However the event listener for the closeMenu is not working. It just doesn't detect the mouse leaving the menu and doesn't close.
If i add a console.log("Hello") to the function, it will trigger when the page first loads. But won't work when I need it to.
app.js:
var Controller = (function() {
UIController.updateNav;
setInterval(UIController.moveArrowDown, 3000);
//UIController.addBodyMargin();
document.querySelector('#menuArrow').addEventListener("mouseover", UIController.openMenu);
document.querySelector('#sideMenu').addEventListener("onmouseleave", UIController.closeMenu);
});
//-----------------------------------------------------------
var UIController = (function() {
return {
openMenu: (function(){
document.getElementById('sideMenu').style.marginLeft = '0';
document.getElementById('menuArrow').style.marginLeft = '250px';
document.body.style.marginLeft = '25px'
}),
closeMenu: (function(){
document.getElementById('sideMenu').style.marginLeft = '-250px';
document.getElementById('menuArrow').style.marginLeft = '0';
document.body.style.marginLeft = '0';
})
}
})();
document.addEventListener('DOMContentLoaded', (event) => {
Controller();
})
navbar.css:
.sidemenu {
height: 100vh;
width: 250px;
position: fixed;
top: 0;
left: 0;
background-color: red;
z-index: 5001;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: -250px;
transition: .5s;
cursor: pointer;
}
.sidemenu ul {
list-style: none;
padding: 0;
}
.sidemenu a {
text-decoration: none;
font-size: 2rem;
}
.expand-arrow {
z-index: 4999;
position: fixed;
transition: .5s;
bottom: 50%;
}
HTML:
<body>
<div class="sidemenu" id="sideMenu">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Questionnaire</a></li>
</ul>
</div>
<i class="expand-arrow" id="menuArrow">SHOW MENU BUTTON ></i>
<section class="child about-section" id="aboutSection">
<div class="about-section__content">
<div class="about-section__content__info-box">
<h1 class="about-section__content__info-box__header">About Us</h1>
<p class="about-section__content__info-box__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, soluta magni exercitationem consectetur natus assumenda dignissimos quasi porro non doloremque labore odit quae accusantium excepturi, dicta recusandae possimus. Necessitatibus, ipsam.
Esse dolorem porro quo velit odit quam, rerum, non optio, labore aliquam ducimus totam molestias ipsa quasi explicabo voluptates. Quas eius dolor harum optio corrupti quo impedit dolorem sunt porro?
Eaque officia vero, facere possimus exercitationem sint magnam aliquam veniam, ipsam soluta eveniet ex iusto perferendis blanditiis a repellendus assumenda dolores natus dolorum. Cumque vero deserunt fuga autem reprehenderit dignissimos.
</p>
</div>
</div>
</section>
<script src="app.js"></script>
</body>
When using the addEventListener() method, it's "mouseleave" not "onmouseleave"