Recently I embarked on learning HTML and came across a peculiar doubt. My goal is to create a section div on the first page that changes dynamically based on the menu item clicked, rather than redirecting to another HTML page. I've experimented with some JavaScript solutions but unfortunately haven't been successful, even though it seems to have worked for others in similar scenarios.
This is what I have so far:
.sideNav {
position: fixed;
width: 250px;
height: 100vh;
left: 0;
right: 0;
background-color: red;
top: 60px;
}
.contentWrapper {
margin: 60px 0 0 250px;
padding: 0 30px;
left: 0;
top: 0;
background-color: blue;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = utf-8>
<link rel = "stylesheet" href = "./assets/stylesheets/main.css">
<script type="text/javascript">
function toggleMenu(id) {
var menuBox = document.getElementById(id);
if(menuBox.style.display == "block") {
menuBox.style.display = "none";
} else {
menuBox.style.display = "block";
}
}
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".menuAnchor").on("click", function() {
event.preventDefault();
$("#contentWrapper").load("food.html" + " #contentWrapper");
return false;
)};
)};
</script>
<title>The Nest</title>
</head>
<body>
<aside class = "sideNav">
<div>
<a class = "menuAnchor" onclick = "toggleMenu('foodMenu')"> Food</a>
<ul class = "menuBox" id = "foodMenu" style = "display : none">
<li>
<a id = "burguer" href = "#">Burguer</a>
</li>
<li>
<a id = "hotDog" href = "#">Hot Dog</a>
</li>
<li>
<a id = "pizza" href = "#">Pizza</a>
</li>
</ul>
</div>
</aside>
<div id = "contentWrapper">
<section class = "contentWrapper">
d
</section>
</div>
</body>
</html>This is the other HTML file:
<!DOCTYPE html>
<html lang="en">
<body>
<div id = "contentWrapper">
<section class = "contentWrapper">
<h1>Food</h1>
<article id = "burguer">
<h2>Burguer</h2>
<p>
Burguer
</p>
</article>
<article id = "hotDog">
<h2>Hot Dog</h2>
<p>
Hot Dog
</p>
</article>
<article id = "pizza">
<h2>Pizza</h2>
<p>
Pizza
</p>
</article>
</section>
</div>
</body>
</html>I aim to implement functionality where clicking a button triggers a cascade effect in the menu and updates the content of the div section to display information from the second HTML file instead of directing to a separate page.
While certain elements of my scripts seem promising, particularly those related to loading div sections from other pages, I'm facing challenges getting them to work seamlessly together.
I'm uncertain whether my current approach is optimal or if there's a more efficient way to achieve my desired outcome.
Thank you for your assistance and understanding as I navigate through this process.
My objective is to establish a main HTML page with header and menus:
Visual representation of the main HTML layout
Upon selecting one of the menu links, such as 'Food', the content should be dynamically replaced with information from another HTML file, like food items.