Is there a way to implement a navigation menu that allows seamless webpage transitions without having to refresh the entire site? For instance, when a user clicks on "Info," the Info page should appear while the homepage or Contact page disappears.
<nav id="menu">
<ul>
<li><a href="javascript:appear('Home');">Home</a></li>
<li><a href="javascript:appear('Info');">Info</a></li>
<li><a href="javascript:appear('Contact');">Contact</a></li>
</ul>
</nav>
I've been working on setting up a header for this feature, but I seem to be facing some challenges in getting it to work properly. This is my current code snippet:
<script type="text/javascript">
function appear {
var item = document.getElementById;
if (item) {
if(item.className == "Show") {
item.className = "Hide"
}
else {
item.className = "Show"
}
</script>
In order to make 'Show' and 'Hide' functionality possible, I have defined them within a CSS file as shown below:
#Home.Hide, #Info.Hide, #Contact.Hide {
display: none;
}
#Home.Show, #Info.Show, #Contact.Show {
display: block;
}