Menu Bar

Adding buttons to click around your page

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

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

<nav class="menuBar">

</nav>

Create the layout container for your menu bar

Add your page links, between the nav tags:

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

Add some links to your menu bar

In your CSS, create a new rule:

.menuBar {
    background: #FF0000;
}

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

In your CSS, create two new rules:

.menuBar {
    background: #FF0000;
}

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

Style your links to look like buttons

.menuBar {
    background: #FF0000;
}

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

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

Style your links when the mouse is over them

Thumbs Up!

Great, now let’s have a quick talk about ownership…

Take me to the next chapter!

Loading...