mercredi 20 mai 2015

JavaScript function does not fire

I am working on building a mobile page that uses JavaScript to make the top menu drop down and close as well, but it is not working. Here's the JS

<script>
window.onload = function () { 
var elem = document.getElementById('navBarMobile');
var burger = document.getElementById('hamburgerMobile');
var cross = document.getElementById('crossMobile');
}

function menuExpand() {

    elem.style.transition = "height 1s linear 0s";
    elem.style.height = "292px";

    burger.style.transition = "opacity 0.5s linear 0s";
    burger.style.opacity = "0";
    burger.style.zIndex = "0";

    cross.style.transition = "opacity 0.5s linear 0.5s"
    cross.style.opacity = "1";
    cross.style.zIndex = "1";
}

function menuClose() {

    elem.style.transition = "height 1s linear 0s";
    elem.style.height = "87px";

    burger.style.transition = "opacity 0.5s linear 0.5s";
    burger.style.opacity = "1";
    burger.style.zIndex = "1";

    cross.style.transition = "opacity 0.5s linear 0s";
    cross.style.opacity = "0";
    burger.style.zIndex = "0";
}
</script>

And the html

<div id="hamburgerMobile" onclick="menuExpand();"></div>
<div id="crossMobile" onclick="menuClose();"></div>

Before, I had the declaration statements seen at the top in their designated spots inside of the function, but each function was firing only once.




Aucun commentaire:

Enregistrer un commentaire