Navigation

Learn to use the nav elment.

by Charlie Calvert

Overview

We need a way for the user to set up a menu, table of contents or index to support navigation through the:

In this assignment we will set up navigation for the document and the footer. We will tackle setting up the navigation for the entire site and remote sites in a separate assignment.

Style it

The problem we face now is that the navigation control we have created doesn't look right:

We want it to look like this, with no discs and with the list items arranged horizontally rather than vertically:

To do that, we style the nav tag and its unordered list:

                
    nav {        
        background-color: aliceblue;
        border: 1px green solid;
        padding: 8px;
        margin: -1px 0px 0px 0px;
    }
    
    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        
    }
    
    nav li {
        display: inline;
        padding: 8px;    
    }
                
            

The key declarations here are:

The first declaration gets rid of the discs. The second sets the display of the list to inline. This means that it is no longer a block display. As a result, each list item is not shown on its on line, it is not shown in its own vertical block. Instead, the list items are spread out horizontally.

Notice also the -1px value in the nav margin declaration. This is done to "collapse" the border between the header or footer and their adjacent nav sections. In a real site, we probably would not include these borders, but I have put them in this document to help you see how the header and footer fit with their nav elements. Just look at the source for this page if you have questions about exactly how this works.

Turn it in

Add a styled internal TOC to your main page for your theme. Add a site wide TOC to the home page for your entire site that links to all the major documents you have created. This TOC need not be styled, in other words, it can be a simple unordered list. You can try to do something more elaborate if you want. You don't need to link to each page in a directory, just to the index page for a directory. The assumption is that each default index.html for a directory will link to all the pages in that directory. By all the pages, I mean all the HTML pages, not all the CSS or image files.

Provide a link to your TOC running on your live GitHub pages site.

Push your work.