Drawing Fieldtrip Logo Dots
by: Fieldtrip

CSS: How to Create a Horizontal Navigation Bar

A CSS tutorial.

The beginnings of your navigation bar.

Want create site? Find Free WordPress Themes and plugins.

Welcome to Part 1 of an epic two part CSS Navigation Bar Tutorial.

Note: I’m going to assume your HTML & CSS knowledge is basic; there will be healthy amount of explaining for what we’re building. If you’re more advanced and/or just want the code, skip to the bottom for the code samples in JSFiddle.

Throughout this series we’ll only use HTML and CSS. By the end of Part 1 you’ll know how to build out a basic nav bar complete with hover states for our nav link items. In Part 2 we’ll expand on our horizontal menu, learning how to create a dropdown nav menu in CSS and HTML.

Let’s hop to it.

So you’ve broken ground on your brand new website, you’ve built a beautiful sitemap and now you’re ready to build out a functional navigation menu. What’s next?

Step 1 – The HTML

<nav>
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Locations</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</nav>

Here we’re just setting up our menu in HTML.

We’re going to use the nav element introduced in HTML5. Why the nav element? For one, I think using this element helps from a developers perspective appear more organized. When scanning through your code, you have no question that this is the navigation for the website. However, it’s front-end purpose is to assist visually impaired users who utilize screen readers. The screen readers identify these elements and allow the user to easily navigate over these to sections that are preferred to be read.

Continuing into the initial setup, we’ve built our navigation items in an unordered list element – which is basically just a list of items, pretty standard in terms of navs go.

If you were to save and run the code about you’d end up with something like the screenshot below. In step 2 we’ll apply our CSS which is where the magic happens.

Horizontal CSS Navigation Menu

Step 2 – Initial CSS

nav {
 background: #444;
 width: 100%;
}
nav ul {
 padding: 0;
 margin: 0;
}
nav ul li {
 display: inline-block;
 list-style-type: none;
 margin: 0;
 padding: 10px 0;
}

I’ll break down each declaration block.

nav – In this case I wanted the whole navigation bar to have a dark background color so I set that to the hex code #444. Additionally, I wanted the navigation bar to stretch the full-width of the page so 100% it is.

nav ul – by default, most of the time UL elements have some padding and margin; I didn’t want either on our unordered list so I set those to 0.

nav ul li – this is where the bulk of our styling will come in to produce our final product. Display inline-block sets our navigation items horizontally. We don’t want bullets or any kind of markers for nav items so we set list-style-type to equal none. Occasionally margins are added by default to LI’s, so just to be safe we set a value of 0. To create the height of our nav, we’re using padding; “10px 0” adds 10 pixels to the top & bottom and 0 pixels to the left and right of each list item. So why not set height with the height property? Padding in this situation is an easy way to keep those list items vertically aligned in the center.

At this point we have a functioning Horizontal Menu, but it’s not too pretty. So our third and final step in this tutorial will be to style up our navigation menu.

Step 3 – Prettify Our Nav Menu with CSS

nav ul li:hover {
 background: #03ADDF;
}

nav ul li a {
 color: #fff;
 text-decoration: none;
 padding: 12px;
}
 nav ul li a:hover {
 color: #fff;
 text-decoration: none;
}

So our goal with this set of blocks is to spread out our navigation items, change our link text and add a hover background color to our nav links.

nav ul li:hover – first thing to note is that we added a :hover selector to our li element. This directs the element to do something when a cursor is hovered over it. In this case, we want our background color to change – so that was set with the hex code #03ADDF.

nav ul li a – now to edit our nav link text. I didn’t want our link underlined so we set text-decoration to none. Adding padding around the link allows for the area around the link text to be clickable – creating more button in our menu. To fill the box, I set the padding to 12px.

nav ul li a:hover – here we utilize another :hover selector, this time on our link text. Just keeping things clean and I set the color to white and removed the text-decoration.

That’s it!

If you followed along this tutorial you should now have yourself a navigation menu that has a dark background stretching 100% across the browser that has a light blue hover state on each navigation list item. Of course, most of the styling I went through today is completely optional. So dig and use the code as needed to fit your design.

See the HTML & CSS in Action

Check out this project on JSFiddle and see the code live.

Check out Part 2!

Did you find apk for android? You can find new Free Android Games and apps.
work with us +