Menu Bar

The menu bar goes between the header and the content area. It will be a plain box containing some links.

Adding a menu bar to your page

Navigation HTML

Add the nav on the line after your closing </header> tag:

<nav class="main-menu">

</nav>

Create the layout container for your menu bar

Navigation Links

Add your page links, between the nav tags:

<a href="index.html">Home</a>
<a href="pictures.html">Pictures</a>
<a href="videos.html">Videos</a>

Add some links to your menu bar

Navigation Styles

In your CSS, create a new rule:

.main-menu {
    background: #FF0000;
}

Add a background to your nav, so you can see it

Navigation Button Styles

In your CSS, create two new rules:

.main-menu a {
    background-color: #00FF00;
    border-color: #00DD00;
    font-weight: bold;
    display: inline-block;
    padding: 5px 10px;
}

.main-menu a:hover {
    background-color: #00DD00;
    color: #FFFFFF;
}

Style your links to look like buttons

Adding Pages

Duplicate index.html to make pictures and videos pages

Loading...