Adding Navigation

Making a navigation bar out of an unordered list

One of the first steps we will take is we will make a horizontal navigation bar our of an unordered list.

Listamatic has a lot of great options we can try.

CSS Rollovers with Images

Today we will look at how to create an image-based rollover with CSS. There are 2 approaches we will use:

  1. We will use 2 separate images
  2. We will use a CSS Sprite, wherein the 2 images are joined together

Step One

You will need to download these images.

Step Two

  1. Create a folder called rollover
  2. Inside of that, create a file called index.html using Dreamweaver
  3. Also create 2 additional folders, called docs and images
  4. Create a style sheet, name it styles.css, and save it in the docs folder
  5. Link styles.css to index.html
  6. Drop the images you downloaded into the images folder


Step Three: rollover with 2 separate images

  1. Open index.html and enter the following html:
    <a href="#" id="bloglink1"><span>Bloglink1 </span></a>
  2. Open up styles.css and enter the following css:
    #bloglink1 {
     display: block;
     height: 46px;
     width: 158px;
     background-image: url(../images/butt1.png);
     background-repeat: no-repeat;
     background-position: 0px 0px;
    }

Now you have a block with the image, but no rollover state. Also, the text inside the link is showing.

  1. Let’s add the rollover image:
    #bloglink1:hover {
     background-image: url(../images/butt2.png);
     background-repeat: no-repeat;
     background-position: 0px 0px;
    }
  2. And last but not least, let’s style the span containing the link text to make it disappear:
    #bloglink1 span {
     display: none;
    }

Step Four: Rollovers with CSS Sprites

A sprite contains several states of the same button all in one image. For example, here is the sprite I prepared for you today:

These are used more and more for rollovers because browsers load them faster and there is no flickering issues as there are with some older browsers and the first method we tried.

The image is 158 pixels wide, and each button is 46 pixels tall.You will need to know the coordinates of the upper left hand corner of both images, which I have illustrated below:

  1. Go back to index.html and add the following html:
    <a href="#" id="bloglink2"><span>Bloglink2</span></a>
  2. Now add this to styles.css:
    #bloglink2 {
     display: block;
     height: 46px;
     width: 158px;
     background-image: url(../images/button.png);
     background-repeat:no-repeat;
     background-position: 0px 0px;
    }
  3. We add the rollover state by specifying the coordinates:
    #bloglink2:hover {
     background-image: url(../images/button.png);
     background-repeat: no-repeat;
     background-position: 0px -47px;
    }
  4. Lastly, we get rid of the link text:
    #bloglink2 span {
     display: none;
    }

Articles used to write this lesson:

CSS Image Rollovers

Making CSS Rollover Buttons

Adding a Spry Navigation

Adding Spry elements to your pages couldn’t be easier: just use Dreamweaver to insert and style these lovely AJAX items to spice up your site as needed.

Open Dreamweaver and create a basic HTML page. Save it as index.html in its own folder.
Change your insert panel view to the Spry menu.

Choose “Spry Menu Bar” and decide which orientation you prefer: horizontal or vertical.

Your page will then look like this:

Click on the blue tab above the Spry menu and you will see this property panel:

Use this panel to add and subtract what pages your navigation requires.

Use the CSS panel to modify the style rules for your menu.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s