This post is more than three years old so may contain incorrect information, or opinions I no longer hold.

Making A Website - 03 Menus

27 Jan 2020 | ~6 minute read

From the previous post, we now have a pretty good looking webpage, but it's now time to turn it into a website. In this post we're going to add additional pages, as well as a menu.

We're also going to start structuring our code a little better, by adding comments. These will allow us to add useful bits of information that help explain what the code does, but they aren't visible on the page.

The Menu

The first thing we need to do is to add the code to our index.html file that will display the website menu. For this we're going to use the unordered list tag, <ul>. We will then add some CSS formatting to menu so it looks like an actual menu, instead of an unordered list!

Just below the opening <body> tag, add the following code:

<!-- *** NAVIGATION SECTION *** -->
  <ul class="nav">
    <li class="nav"><a href="index.html" class="active">Home</a></li>
    <li class="nav"><a href="about.html">About</a></li>
    <li class="nav"><a href="contact.html">Contact</a></li>
  </ul>
<!-- *** END NAVIGATION *** -->

Notice how we have given the unordered list items a class of nav? This is so we can add specific CSS to this particular unordered list, without affecting all other unordered lists across our website. We're going to add 2 additional pages - an About page and a Contact page.

If you refresh the homepage now, it should look something like this:

Looks just like a standard unordered list at the top of the page - pretty rubbish menu, right?

Adding CSS

That's it for the HTML for now, we will add some more additions later, but for now let's make this unordered list look like an actual menu.

To format the unordered nav list so it looks like a proper menu, add the following CSS to your style.css file:

/* Format Nav Bar */
ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--main);
}
li.nav {
  float: left;
}
li.nav a {
  display: block;
  color: var(--bg);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
ul.nav li.nav a:hover:not(.active){
  background-color: var(--accent);
}
.active {
    background-color: var(--accent);
}

That's 28 lines of CSS that we just added; let's take a minute to talk through what all this CSS is actually doing.

We now have something that actually looks like a menu:

Look at that beautiful menu!

That's it for the CSS changes - we now need to make the additional pages that will be added to our website.

Adding Pages

This part is really simple. All you need to do is copy and paste your index.html page and rename it to template.html. Then, delete the page's contents. Finally, add comments below the banner image and your template should look something like this:

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<link rel="shortcut icon" href="images/favicon.png" />
<title>mylightwebsite.kevq.uk</title>
</head>
<body>
<!-- *** NAVIGATION SECTION *** -->
<ul class="nav">
  <li class="nav"><a href="index.html" class="active">Home</a></li>
  <li class="nav"><a href="about.html">About</a></li>
  <li class="nav"><a href="contact.html">Contact</a></li>
</ul>
<!-- *** END NAVIGATION *** -->
<img class="home-banner" src="images/home-banner.png"></img>
<!-- *** START PAGE CONTENT *** -->
<p>Start adding your content here!</p>
<!-- *** END PAGE CONTENT *** -->
</body>
</html>

Now you have your basic template file, save it then make 2 more copies of it. Rename those files to about.html and contact.html. You then need to edit the highlighted lines below within each file:

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<link rel="shortcut icon" href="images/favicon.png" />
<title>mylightwebsite.kevq.uk</title>
</head>
<body>
<!-- *** NAVIGATION SECTION *** -->
<ul class="nav">
  <li class="nav"><a href="index.html" class="active">Home</a></li>
  <li class="nav"><a href="about.html">About</a></li>
  <li class="nav"><a href="contact.html">Contact</a></li>
</ul>
<!-- *** END NAVIGATION *** -->
<img class="home-banner" src="images/home-banner.png"></img>
<!-- *** START PAGE CONTENT *** -->
<p>Start adding your content here!</p>
<!-- *** END PAGE CONTENT *** -->
</body>
</html>

Here's an explanation of why you're editing these particular lines for each of your new pages:

Once you're done adding the additional pages, save them to the same location as your index.html in NeoCities, or whatever your hosting provider is.

You should now be able to navigate around your site and when you do, the correct menu items will be highlighted in blue for whatever page you're visiting.

If in the future you want want to add even more pages, just re-use your template file. You will also need to add an additional line to the nav list for any new pages. The new line will also need to be added to every existing page on your site.

Conclusion

As always, you can see the results in a wizard-like format on mylightwebsite.kevq.uk. Step 3 has been published, so you can see our new menu in action.

There are also links to all of the post in this series, as well as the source code for each step, on the downloads page.

Reply by email

← The one before
Why Lobste.rs Is Better Than Hacker News

Up next →
Making A Website 04 - Responsiveness

Want more?

So you've read this post and you're still not satisfied? Ok then, here's some other stuff for you to do: