I am trying to use JavaScript so when you click on the menubars icon, the whole menu appears when opening the website on a phone using Google. (when device width is larger than 470px, menubars have a display: none)

This is the necessary html:

 <div id="menu">
        <i  aria-hidden="true" style='font-size:36px; color: white' id="menubars"></i>
        <nav>
            <a href="#home">Home</a>
            <a href="projects.html">Projects</a>
            <a href="contact.html">Contact</a>
        </nav>
 </div>

This is the css:

@media only screen and (max-width: 470px) {

    body{
        background-image: none;
    }



    #menu {
        position: absolute;
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        z-index: 3;
        padding-bottom: 30px;
        padding-right: 5px;
        width: 75%;
        background-color: black;
        transform: translate(-195px, 0);
    }

    #menubars {
        display: initial;
    }

and this is the JS:

const menubars =document.getElementById("menubars");
const menu = document.getElementById("menu");


menubars.addEventListener("touch", function() {
    menu.style.borderRight = "white thin";
    menu.style.transform = "translate(195px)";
});

I know the script is linked correctly because I can see the event listener when clicking inspect element.

website opened with devtools

The website is :

https://maria-shn.github.io/Portfolio

I am new to JS and I know there is probably a better way to achieve my goal but I would like to understand why it is not working.

CodePudding user response：

1. AFAIK there is no touch event, there are touchstart, touchend, touchmove and touchcancel. If you put a breakpoint inside your event handler, you can see it is never triggered. (maybe try first with click event, since this is hidden on desktop anyway...)

2. The border-right value is missing what kind of line you want to present (solid, dashed, etc.) (explanation)

3. Not sure if this is what you intended, but translate(195px) will translate both the X and Y positions, you can use translateX() (or Y) to move just one

CodePudding user response：

I think you should change touch -> click . event