Adding buttons to click around your page
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
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
Great, now let’s have a quick talk about ownership…
Take me to the next chapter!