After successfully implementing a menu display upon clicking an image, my goal now is to hide the menu once a different image (image2) is clicked. If anyone could assist and explain their approach clearly, I would greatly appreciate it! Below is the modified code:
<html>
<head>
<style>
h3 {
font-size: 30px;
}
p {
font-size: 20px;
}
.onclick-menu-content {
position: fixed;
top: -15px;
bottom: -15px;
left: 0px;
right: 0px;
background-color: #000000;
opacity: 0;
}
.onclick-menu-content h3, p, a{
color: #ffffff;
text-align: center;
}
.menu{
position: fixed;
top: 10px;
left: 10px;
}
.menu2{
position: fixed;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div class="main-content">
<img src="menu.png" class="menu" onclick="show(onclick-menu-content)">
<h3 style="color: #0000ff; text-align: center"> This is the main Content </h3>
<div class="onclick-menu-content" >
<img src="menu2.png" class="menu2" onclick="hide(onclick-menu-content)">
<h3>Menu</h3>
<p><a href="">Home</a><br />
<br />
<a href="">Services</a><br />
<br />
<a href="">About Us</a><br />
<br />
<a href="">Contact Us</a></p><br />
</div>
</div>
<script>
function show(id) {
document.getElementById(id).style.display = 'block';
}
function hide(id) {
document.getElementById(id).style.display = 'none';
}
</script>
</body>
</html>
Although I made changes in the code by utilizing JavaScript, this method unfortunately did not yield the desired outcome.