Menu Bar

Menu Bar

Adding a menu bar to your page

Navigation HTML

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

<nav class="menuBar">

</nav>

Create the layout container for your menu bar

Navigation Links

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

Navigation Styles

In your CSS, create a new rule:

.menuBar {
    background: #FF0000;
}

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

Navigation Button Styles

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

Navigation Button Hover

.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

Menu Bar: Complete!

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

Take me to the next chapter!