Navigation

The first thing you need to do navigation is HTML. In this class, and in most sites on the web, we will use an unordered list (<ul>) to hold our navigation. Each <li> will have an <a> with a link to the proper page. We will also wrap all of that in the HTML 5 <nav> element. So all of your navs will basically look like this:

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="sites.html">My Sites</a></li>
        <li><a href="favorites.html">My Favorites</a></li>
    </ul>
</nav>

When you do other sites you will basically just change the text and the links in the href attribute.

Review: Block vs Inline and the Box Model

To understand how we are going to turn this list from a bunch of bullets into something that looks like navigation we need to review the box model and block vs inline.

Block vs Inline

The basic difference to remember is that

  • Block elements are like big blocks that put themselves on their own line and take up the full width of the containing element by default.
  • Inline elements just go with the flow and stack next to each other

Common block and inline elements:

Block Inline
h1..h6
p
ul
ol
li
div
nav
section
article
a
img
b
i
em
strong

You’ll notice that the list elements we want to use are block elements. So we have to figure out a way to get them to appear next to each other. The next part of this article deals with how to do that. It’s all CSS from here.

Navigation CSS

CSS is pretty powerful and one thing it can do is to change an element from block display to inline and vice versa. So we’re going to do that with our li.

We want to make sure it just effects the li elements in our navigation so we will use the nav as part of our selector:

nav li{
   display:inline;
}

This gives us basically what we want. But we need a bit more styling to remove the bullet points and space out the nav items from each other:

nav li{
   display: inline; /*moves list items next to each other*/
   list-style-type: none; /*removes the bullet points*/
   padding-right: 20px; /*spaces the nav items out so not too close to each other*/
}

And there you have a basic navigation. Usually you also want to remove the underline from the links and possible color them to match your design. Here is a simple rule that will do that:

nav li a, nav li a:visited{
    color: #fff;
    text-decoration: none;/* removes the underline */
}

The only complicated part there is we added a “nav li a:visited” selector. We did this because by default a visited link is styled with purple color. We want the links to stay the same whether or not they have been visited.

Additional styles

Sometimes it helps to show that it is navigation if you add some more styling. here are a couple of other things you can do:

This adds a hover style that adds an line under the nav item and changes the color. This way they can see it’s a nav when they hover over it

nav li a:hover{
    color:#ccc;
    border-bottom:1px solid #ccc;
}

This makes the nav look like a nav bar by giving a background color to the ul:

nav ul{
    background-color:#888;
    padding:10px; /*to give some breathing space around the text*/
}

Closing

Have fun and use your creativity to experiment with different color combinations, fonts, sizes etc. But remember that in the end it needs to look and function like navigation or your users will be confused.

There are other ways to style navigation. In the future I’ll show you some more advanced ways of creating a navigation. However the method above is simple and works well on all browsers and so we will learn that first.

Leave a Reply