If you'd like to follow along, you can click here to download the 'Before' sample.
First thing I'm going to do is create three different pages, Page1.html, Page2.html and Page3.html so that I have something to navigate to.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Page 1</title>
</head>
<body>
<p>Page 1 </p>
</body>
</html>
Let's create our <ul> (or unordered list):
<ul class="navigation">
<li> <a href="index.html">Home</a></li>
<li> <a href="Page1.html">Page 1</a></li>
<li> <a href="Page2.html">Page 2</a></li>
<li> <a href="Page3.html">Page 3</a></li>
</ul>
and add some CSS:
ul.navigation{ list-style-type:none; padding-left:0; margin-left:0; border-bottom: 1px dashed #000000;}
What the above CSS will do is eliminate the bullet points from our list and will get rid of any spaces and margins, as a bonus it will add a nice border to the bottom.
However, if you were to take a peek right now, you'd notice that it doesn't look like it's a navigation bar. What will form it into horizontal looking navigation bar is: display:inline; i.e. it won't have a starting new line.
Let's add the following CSS:
.navigation li
{ display: inline;
}
Now, we're almost there, but let's remove the ugly looking links:
.navigation a
{
background-color:#bcbaba;
color: #085068;
display: inline-block; border-bottom: none;
padding: 5px 15px 5px 15px;
text-decoration: none;
}
That's pretty much it. If you'd like to download finished 'After' sample then click here.
