Off the Ridge Code Newsletter

Search

All posts in "CSS3"

How to create Navigation Bar with CSS3

Published April 22, 2014 in CSS3 - 0Comments

Navigation bar is really just a set of links or put it differently it’s a list of links that can be implemented using html list <ul> without any numbers or bullets. i.e. list-style-type:none, no padding or margins and in order to prevent any new lines set the display to inline-block.

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.