Front-end Web Design 5: CSS Navigation Bar

Planning
Step 1
What we will be building

This lesson will be a tutorial on building a cool navigation bar. Note that there are many ways to make navigation bars and I strongly encourage you to make your own.

For now, follow along with the instructions because we are going to look at some nitty-gritty details that come up when designing something complicated

Here is how it will look when we are done:

Step 2
Create a list of page links

Our navigation bar (navbar) will just be a super fancy list of links at the top of your page.

The HTML for this will be simple. Simply create an unordered list and include links to all of your pages.

Include this list in a div whose class is equal to "navbar"

Temp1468343895 Temp1459473166
Step 3
Create a selector for the unordered list element in the "navbar" class

We're going to change our list style quite a bit. For now let's just give our list a background color. I made mine blend in with my header

Temp1459473419 Temp1459473433
Step 4
Set list-style-type to none

list-style-type effects the little dots next to your list items. Set it to none to get rid of them

Temp1459473605
Step 5
Set the positioning to absolute

Let's get the navbar in the right place, set it to be positioned absolutely and make sure it stretches across the entire screen

Temp1459473870

Well this set mine in totally the wrong spot.. Let's fix this in the next step

Temp1459473886
Step 6
Set the left and top properties to get your navbar in the right spot

Because I have a header taking up space, I needed to anchor the top of my navbar to 22 pixels.

Mess with the exact spacing that you need, your numbers may be different than mine

Temp1459474037

It should look something like this:

Temp1459474053
Step 7
Create a selector for links in list items in the "navbar" class

We're done with the ul selector. Create a new selector for links which are inside list items

We dont want to select just the list items we want the links

Temp1459474335
Step 8
Give them a background color

I set my background color to #53674c

It should look like this:

Temp1459474622

If it looks like it does below it is because you gave the list items a background color, not the links of the list items a background color

Temp1459474645
Step 9
Change the font how you like and set the text-decoration to none

Setting text-decoration to none gets rid of the underline

You'll also want to go ahead and center the text with text-align

Remember you can't use custom fonts unless you included them in your <head> (See lesson 4 if you want to change your font and don't remember how)

Temp1459475073 Temp1459474899
Step 10
Set the float property to left

This will make your list items line up horizontally instead of stacking vertically

Temp1459474974
Step 11
Space out your buttons however you like

This is how I set up my buttons, but you don't have to do it like I did

Temp1459475324 Temp1459475344
Check Your Work
Step 12
You now have a working navbar

Put your navbar div inside all of your html pages and ensure you have something that works like the example below.

After this we will add some nice effects

Step 13
Soften the top-left and top-right corners of the buttons with border-radius

We could write
border-top-left-radius: 6px
border-top-right-radius: 6px

But we could also use some short hand like this:

Temp1459476292

Here I am using short hand. Each corner radius value is separated by spaces and are ordered in a clockwise direction, starting from top-left

Information
Step 14
NOTE: Short hand also works with padding and margins

margin and padding top, right, bottom, and left can be written short hand.

This CSS does exactly what I already had. Just in short hand

Temp1459476577
Step 15
Pseudo classes

Now let's make some simple animations for our navbar using the pseudo-class :hover

By making a new selector for links in list items in the navbar class then appending :hover to the end of it, we can change or add properties for the selected element that are applied when the user hovers the mouse pointer over that element

Temp1459476811

Like this:

Temp1459476827
Step 16
Go ahead and change the pseudo-class from :hover to :active

The :active pseudo-class refers to when the user clicks on the element.

Now our buttons will flash white when the user clicks them.

Temp1459476912
Step 17
Make another selector for :hover

We're going to make the tabs "pop-up" when you hover over them. Start with a :hover pseudo-class for the links

Temp1459477074
Planning
Step 18
Making a new class

I want some way to indicate to the user which page they have selected. We can do this by setting the button's background color to the color of the <body>

Unfortunately there is no pseudo-class for currently selected links. So instead we'll have to make our own class

Temp1459532357
Step 19
Make a class called "selected" for navbar list item links

We have a four level deep nested selector group. The way to read this code is to say that:

"The links with the class "selected", which are nested under list items, which are a nested in a "navbar" class"

Then we are setting the background color of these to the color of your page's <body>

Temp1459532606
Step 20
Set the class of the link to your home page to "selected" in the html file of your homepage

On each page you should have the same navigation bar, you'll need to give the correct link the "selected" class on each of your pages.

For example, on your home page the link that leads to your homepage is "selected". And on my location page, the link leading to my location page will be "selected"

Temp1468343984
Planning
Step 21
This is the effect I am looking to create

It may look like all we need to do is add some bottom padding to the element on :hover

If we do that, watch what happens:

Planning
Step 22
The plan to correct this

We need the block to move up the same amount as we added to the bottom padding.

So what if we started with a top margin of 4px (1)
Then we added 4px of bottom padding on :hover (2)
Then we get rid of the 4px top margin (3)

This way the bottom of the button would stay in the same place and the top would rise up in place of the old margin

Temp1459482726
Challenge
Step 23
Complete the navbar

I've told you the plan to complete the navbar above, it's up to you to implement it yourself.

If you don't want to have the same navbar as me, still complete this challenge and then move on to the next step

Here is the video again of what this should look like if you've done it correctly:
(Your links and margins/width/padding may be different)

Step 24
Once you have completed the challenge...

You may want a different style of navigation bar than the one I showed you how to make. In fact you are encouraged to make yours unique!

There are many different ways a navigation bar could look. It could be a sidebar, or contain drop-down menus, etc.

Now is a good time to take a look at your website so far and decide if there are any changes you can think to make now that you've learned a few more CSS techniques.

In the next lesson, we will be learning to use some JavaScript to add some interactivity to our webpage.

We'll start by making an interactive image gallery

Front-end Web Design 5: CSS Navigation Bar Info

Account

MVCode Clubs

Created By

Newprofile jamie

Course:

Front-end web design

Access Level

premium

For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach