Summary:

Navigation using List tags in CSS

    ●   Create navigation with Rollover Effects using ONLY code and NO images.


Learn About:

Null Links CSS Navigation LinksHover Links

  •   This tutorial is part of the Art Genre, What in the World? and the Home Sweet Home Portfolio Projects.

This tutorial is first in a series:

1 - Navigation using List Tags     2 - Drop Shadow Rollover     3 - Gradient Rollovers  4 - 101_links_Dw.htm  



Step #1: Open your Page in Dreamweaver ~

Click inside the nav div …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… and type your links:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #2: Make the Links Active ~

Highlight one of text links …

… and open the Properties menu by going to: Window > Properties or hitting the keybord shortcut: Cmd(⌘)+F3, and put # sign under Link.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Now the text is a link …

null link

Do this to each link.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

These links are just placeholders - they don't go anywhere yet.


Step #3: The Unordered List Tag ~

Highlight all the Links …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… and go to: Format > List > Unordered List

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Now your links have a bullet point.

bullet points


Step #4: Create a New CSS Rule ~

Create a new CSS rule …

new rule

… and erase what's there and replace it with #nav ul

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Hit OK.


Step #5: Get rid of the bullets in #nav ul ~

Next, click List …

click list

… and set type to none.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Hit OK and save your work.


Step #6: Check the Results of your changes to #nav ul ~

List type = None removes the bullets.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #7: text-align: Center in #nav ul ~

Double-Click on #nav ul and open it

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Click on Block and set Text-align: center

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Hit OK and save your work.


Step #8: Check the Results of your changes to #nav ul ~

Now your text is centered.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #9: ANOTHER New Tag #nav ul li ~

Make another New CSS Rule

new rule 100

Call it #nav ul li

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Don't forget the #

nav li

Click Block and select Display = inline

block inline

Click Ok and notice the links are now lined up …

inline


Step #10: New Tag called #nav ul li a ~

You probably don't want underlines in your links.

Make another new rule called #nav ul li a

nav a

Click Type and select Decoration = none

type none

Press OK and watch the underlines disappear.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #11: Padding #nav ul li a ~

Open up the Properties menu (if necessary) …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Select #nav ul li a:hover and click Add Property …

add property

Set padding to .1em 1em


Padding refers to the space between the content and the edge:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

These settings are only examples. Do your own thing. Try something new!.



Step #12: #nav ul li a:hover ~

Create one more new rule called #nav ul li a:hover

nav a hover

Under Background, choose another color from your Kuler Color selection by copying the HEX number from your Swatches in Illustrator that you were supposed to create during this tutorial - (If you don't have your swatch colors yet - get them now) …

… and type the hex number from your color scheme in the background.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #13: Save and View your Work … ~

Hit small to view your work.

preview


Last Step: Save and Upload your site ~

If you have a web server, save your pages, upload them and attach the link.

upload-site-dw.png

Continue with the nav text shadows on your buttons tutorial only if you are ready …


Other Resources: http://css.maxdesign.com.au/listutorial/horizontal01.htm