My current project involves creating a single page website, but I am looking to give the illusion of a multi-page site by using CSS/jQuery to hide and reveal different sections when specific links in the navigation menu are clicked.
Here is the code snippet that I am currently experimenting with on JSFiddle.
HTML
<header id="top">
<nav>
<ul>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#skills">Skills</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
</header>
<main role="main" id="main">
<section id="about">
</section>
<section id="skills">
</section>
<section id="projects">
</section>
<section id="contact">
</section>
</main>
CSS
.active {
background: $lightest-blue;
color: $blue;
}
.hide-section {
display: none;
}
section {
height: 1em;
background: blue;
}
JavaScript
// Creating variables to reference the Nav links and About section link.
var siteNav = $("#top li").children();
var aboutLink = siteNav[0];
// Creating variables to reference all Sections and the About section.
var siteSections = $("#main").children();
var aboutSection = siteSections[0];
// Hiding all major sections by adding a CSS class.
siteSections.addClass("hide-section");
// When the document is ready, set the user's initial "arrival" at the About section by removing the hidden class from it.
// Also add an active class to the About section link.
$(function() {
$(aboutLink).addClass("active");
$(aboutSection).removeClass("hide-section");
});
// Event listener for clicking on a Nav anchor.
$("#top a").click(function() {
// Remove active class from all links.
siteNav.removeClass("active");
// Add active class to the clicked link.
$(this).addClass("active");
// Identify the corresponding section.
var hrefLink = $(this).attr("href");
// Hide all other sections.
siteSections.addClass("hide-section");
// Reveal the appropriate section.
});