Navigation Links
Here is some HTML code for a webpage that contains navigation links:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Links Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>Website title</h1>
<nav>
<ul>
<li><a href="#!">Link A</a></li>
<li><a href="#!">Link B</a></li>
<li><a href="#!">Link C</a></li>
<li><a href="#!">Link D</a></li>
</ul>
</nav>
</header>
<main>
<h1>Main content title</h1>
<p>Main content</p>
</main>
</body>
</html>
Some elements you may not have seen yet are <header>, <nav>, and <main>. These elements have no default styles other than display: block;. Their significance is purely semantic and for organizational purposes but they may be later on selected by CSS for styling.
The <header> element represents introductory content for any of the following elements: <main>, <article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure>, <td>.
When used as the descendant of <body>, the <header> element represents introductory content for the whole webpage and this may typically include: the website title, the website banner, and a set of navigation links.
The navigation links are represented by the <nav> element. In this example, the <nav> element is used in the header of the whole webpage, representing links to other webpages in the website. Another <nav> element could have been placed near the top of the <main> element to represent links to sections within the main content of the webpage.
The main content of the webpage is represented by the <main> element, it's content is what is peculiar to this webpage and does not get repeated across the other webpages.
Without any CSS code, the HTML code produces a webpage that looks like this:
Website title
Main content title
Main content
The following style makes the list into a mobile-friendly vertical navigation menu with hover effects.
body { margin: 0; }
body>header { text-align: center; }
body>header>nav>ul {
margin: 0;
padding: 0;
background-color: DimGray;
list-style-type: none;
}
body>header>nav>ul>li:hover { background-color: MidnightBlue; }
body>header>nav>ul>li:active { background-color: Blue; }
body>header>nav>ul>li>a {
display: block;
padding: 1em;
color: White;
text-decoration: none;
}
body>main { padding: 1em; }
Website title
Main content title
Main content
By adding the line:
body>header>nav>ul>li { display: inline-block; }Website title
Main content title
Main content
The list items will no longer stack line-by-line and instead will flow horizontally, creating a horizontal navigation menu. Both types of menus will automatically increase in height as more links are added.
Some new syntax you should be aware of here is the > combinator used within the selector of a CSS rule. The selector body>header points to the <header> element that is a child of the <body> element, meaning that the <header> element's nearest ancestor is the <body> element. This is different from body header which selects any <header> element that is a descendant of the <body> element but not necessarily a child of it.
A selector like body>header>nav>ul selects any <ul> element whose parent is a <nav> element whose parent is a <header> element whose parent is the <body> element.
To achieve the hover effects, the :hover and :active pseudo-classes are specified in the CSS selector. Their styles only apply when the selected element is in a certain state. The style for the :hover pseudo-class will apply when the user hovers over the element with a cursor. The style for the :active pseudo-class will apply when the user clicks on the element.
Notice how the <a> elements have their display changed to block so that they occupy the entire list item width; this relieves the user from having to click directly on the text of the link to activate it. Padding is used to give space between each navigation link, but padding is given to the links instead of to the list items that contain the links, otherwise the small space that would account for list item padding would not be clickable to activate a link.