Piece of Cake JavaScript Functions: Single-Page Application NavBar

Part Blog / Part Review, I plan to breakdown the Javascript functions I use on my portfolio site. While they might be a little bit more complex than the absolute beginner level, you'll see it's not really that more difficult. And if you can follow along and do it yourself? Well, it's a piece of cake after all!

With any menu, you have a list of the different places visitors can go. Even if you don't code, all of us have experience with hyperlinks (<-- this here is a fake one, but you know the drill: you see something in blue, and you know that when you click it you should be taken to another page).

HTML implementation as follows:

<a href="website URL">whatever caption text</a>

And for a complete example:

<p>Don't go to my old site, check out the new one <a href="www.jondao.com">here</a></p>

Multi-Page Application

Even if you don't code, if you've ever had a blog, you're familiar with this. When you're creating a blog post, it's making an entry as its own separate page. If you ever wrote a blog post that linked an old post, you're linking back to a separate page.

It's perfectly fine to do, especially when the pages have a lot of stuff going on. The thing to note is that the redirect will be slightly slower. After all, the browser has to load a brand new page.

So what happens if you're trying to redirect to a page that isn't all that complex?

Single-Page Application

Until I develop my site further, my menu sections are basically simple blocks of text. I don't really need to dedicate that information to its own separate page (yet).

Let's keep things optimized for snappiness. Instead of taking users to an entirely different page, I'll have everything already loaded on the site but hidden. Then, when the menu button is clicked, that section's information will show.

Here's the HTML Menu

<ul class="menu">
     <li><a href="javascript:void(0);" onclick="displaySection('writing')">Writing</a></li>
     <li><a href="javascript:void(0);" onclick="displaySection('music')">Music</a></li>
     <li><a href="javascript:void(0);" onclick="displaySection('projects')">Projects</a></li>
     <li><a href="javascript:void(0);" onclick="displaySection('about')">About</a></li>
</ul>

For now, don't mind what follows the href. Remember, we're not actually going to be taking users to a different page. The more important aspect is we have a function that will trigger when it's clicked (e.g. onclick="displaySection('writing')")

I won't list the HTML for all of the sections, but let's use the writing one. The structure is basically the same.

<div id="writing" style="display:none;">
     <h3>Written Works</h3><br>
     <p>So, I could dig and pull from a decade back a list of articles I've written that were published. But, they'd all be e-learning, language, or fitness focused. And for the future, that's not the kind of writing I want to do!</p><br>
     <p>Currently on the docket is submitting to this year's <a href="https://theghoststory.com/tgs-fiction-award" target="_blank">Ghost Story Supernatural Fiction Award</a>, where I'm likely to become a two-time reject. Then, I'll participate in the <a href="https://nanowrimo.org/" target="_blank">2023 NaNoWriMo</a>, where I hope to be a two-time completionist!</p>  
</div>

It's a heading block with two paragraphs. You'll see a few standard hyperlinks in there as well. <br> is how you do a hard line break. All of that is wrapped in a div that has an id and class. Then, we have the style set to display:none so it's hidden by default.

Now, we need to address the functionality in JavaScript.

function displaySection(sectionId) {
     const selectedSection = document.getElementById(sectionId);
     selectedSection.style.display = 'block';
};

Remember, our sections are hidden by default. We already have it set in the HTML (onclick) that this function will activate when clicked. It takes the corresponding id, and changes its display to 'block' (e.g. appear).

Ta-da! And now it's loaded.

Is there more to Single-Page Applications (SPA) than that? Sure. But this is a core chunk of it here:

• Make hidden div containers of content with appropriate ids.

• Address those ids in JavaScript and write the function to make them appear.