Issue
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" class="menu-icon" 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;
}
}
Solution
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.
Answered By - Navid Anjum
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.