In Part 1 of this series on Creating a Spry Navigation Bar Menu in Dreamweaver CS3 I outlined the easy process involved in creating the horizontal or vertical navigation bar. In this article I will show you how you can change the default style of the menu with just a few changes to the Cascading Style Sheet that is associated with the navigation menu.

Step 1. Open the Cascading Style Sheet (CSS).
Remember in the previous article that when you insert a SPRY Menu Bar that there was a directory that was automatically created called SpryAssets? Good. Well inside that folder you will see a file called SpryMenuBarHorizontal.css, lets begin by opening that file. From the Files Panel on the right hand side open the CSS File.

Step 2. Spry Menu Design Information
Ok now that we have the file Open, the first part of the CSS File we will look at is the Design Information Section. Now this starts on Line 77 and you should see the commenting that describes this.

Let’s now look at ul.MenuBarHorizontal a on Line 89. If you take a look at the HTML File that you created in Part 1 you will notice that the Unordered List that was created was given a class MenuBarHorizontal. Now if we look at line 89 then you will notice that we are about to change things assocaiated to link elements of that list. Let’s just change the background color for now. You could just as easily add a background image if you would like using the background css element.

In my example I have changed the background color from the default grey to #2C64B4. And I have also changed the text color to White.

The next thing I will change is the Hover State of the Menu Items. If you take a look at Line 108. This is where you can change the Hover State. All I did was change the background color to #FF9900.

Another really cool CSS trick here is how we can change the position of the Submenu’s. If you take a look at Line 69 of the CSS File you will notice that the Sub menu’s are given an absolute position and a negative top margin of -5%. This causes those elements to be a touch higher than their parents. I like them all in line so I changed this from -5% to 0. But depending on the look you want then you can change it to whatever you would like.

So as you can see you have complete control over the design and layout of the menu and Dreamweaver CS3 handles most of the back end work for you. All you need to do is style it and make it look as fancy as you want.

Here is my finished menu. I have applied a background image instead of a plain color to make it a bit more modern looking.

Get More Web Design Tips and Tricks by Signing Up for my WEB SITE DESIGN TIPS E-NEWSLETTER.

Social Media:

| del.icio.us | Digg it | Furl | reddit | StumbleUpon | Yahoo MyWeb

You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.