Introduction

It is crucial to grasp website navigation by a user.

Here are a few suggestions in terms of setting up your navigation:

• Don’t reinvent the wheel. Users generally expect the navigation to be at the top of the screen on desktop and a hamburger menu on mobile. The only real exception is a dashboard, where the navigation is usually on the left side.
• Add a class to the menu item of the page the user is on. So, if they’re on the About page, somehow highlight ‘About’ in the navigation. In that way, they know on which page they are. On each page, you’ll need to change the item to which the class is applied.
• The navigation should be consistent across pages, so always have the navigation there for users to move between pages.

Nav Element

You should hopefully be familiar with semantics and want to choose the most semantic option you can. The primary way to navigate the website should be in a <nav> element so that it’s easy for assistive technology to know which is the primary way of moving about the website.

Nav with a UL

It is debatable, but the most common way of creating navigation is using an unordered list (<ul>).

	<nav>
	  <ul>
	    <li><a href="index.html">Home</a></li>
	    <li><a href="about.html">About</a></li>
	    <li><a href="contact.html" class="current">Contact</a></li>
	  </ul>
	</nav>

We have also added typical styling in the CSS:

• By default, the browser indents the <ul>, so we remove that by setting the padding to 0px.
• Next, to display the list items in a horizontal line, we use display: inline.
• If we want to add padding to each navigation item, it’s best to do this on the anchor tag. The reason is that you don’t end up with a situation where the user thinks they should be able to click a link, but the link is applied only to the text.
• Lastly, we style the current class to bold so that it’s easy to spot.

Nav without a UL

You can also write the navigation without a ul. CSS Tricks has a good article about this.

To write the navigation without an ul, you can simply add the anchor tags inside the <nav> element.

	<nav>
	  <a href="index.html">Home</a>
	  <a href="about.html">About</a>
	  <a href="contact.html">Contact</a>
	</nav>

CSS-only Hamburger Menu

Usually, you need JavaScript to create a hamburger menu. But it is possible to make a hamburger menu using just CSS. You need to use what is commonly called the ‘checkbox hack’.

The basis of the method is to have a checkbox which can get checked and unchecked. We can add CSS, which applies if the element gets checked and unchecked.

Below is a tutorial video explaining how to create a hamburger menu using only CSS. Please structure your HTML elements as is done in the tutorial to ensure that the hamburger menu is effective.

Activities

💻 WATCH

This tutorial video on building a responsive navigation. (11m 42s)

Lesson Task

Brief

There are practice questions in the master branch of this repo.

Attempt the answers before checking them against the answers in the answers branch of the repo.