HTML/CSS Designing a responsive website. An onclick attribute won't function-CodePudding

I'm trying to create a responsive design for a practice website. The situation is that the below menu-icon image is only displayed while width is less than 701 px. So it does that fine. But the problem is that, when menu-icon image is displayed, screen width less than 701 px, I click on the image and nothing happens. The onclick attribute "togglemenu()" does not seem to function. Can someone help please? This is a live site:

https://moortje.github.io/HTML-CSS-Project-Bro-Code/

The menuList and menu-icon in question are at the very bottom.

Here is an HTML snippet.

<ul id="menuList">
    <li><a href="">CSI</a></li>
    <li><a href="">CHP</a></li>
    <li><a href="">HCSS</a></li>
    <li><a href="">JS</a></li>
</ul>
       
<img src="moortje2.png"  onclick="togglemenu()">
    
<script type="text/javascript">
        
    var menuList = document.getElementById("menuList");
       
    menuList.style.maxHeight = "0px";
      
    function togglemenu(){
        
        if (menuList.style.maxHeight == "0px") {
            menuList.style.maxHeight = "130px";
        }

        else{
            menuList.style.maxHeight = "0px";
            }
    }
        
</script>

Here is a CSS snippet.

.menu-icon{
            width: 25px;
            cursor: pointer;
            display: none ;
           }

@media only screen and (max-width: 700px){
        .menu-icon{
            display: block;
        }
    
        #menuList{
            overflow: hidden;
            transition: 0.5s;
        }
}

CodePudding user response：

The problem is that you are setting max-height and max-width

Changing those properties doesn’t change the size of the element, only what its max bounds are.

Use width and height instead.

CodePudding user response：

Well I went through the code and find out that togglemenu function is working properly and its even opening the menu. But you have given position absolute to ul tag and when you click on toggle image. It opens menu but at the top of page.

So click on image and scroll up to top and you will going to see your menu. You just have to adjust its position to open it below toggle menu button/image.

CodePudding user response：

It's appear at the top of the page because of position: absolute