How To Create a Spry Navigation Menu in Dreamweaver CS3 - Part 2
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.
You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.
May 7th, 2008 at 8:58 am
Hi, My site has a problem with the spry nav. In IE the submenues are popping above the nav bar in FF and others it is popping below and looks normal. How can I get IE to pop the submenues down?
June 9th, 2008 at 1:08 am
hi, Daniel, according to make your menu bar looks modern, I’m wonder how you put background image instead of a plain color on it. thank you.
September 24th, 2008 at 9:57 am
Thanks for the tip ///I spent the better part of a day and was about to give up when I did a search and found your simple and easy to understand tutorial…within minutes I was able to tweak the project and color scheme…Shalom’
October 7th, 2008 at 2:04 pm
How do you apply background images?
October 16th, 2008 at 10:04 am
Hey!
Just a tip. The spry menu doesnt work if it is related to a css file containing “position:relative;” in any way.
January 6th, 2009 at 10:22 am
I created the menu bar just fine and it looks GREAT, BUT! it doesn’t work on Internet Explorer? There is just a blank white area where my menu bar should be. Yet, when I check it, F12, it looks fine. I read the last comment about “position:relative;” how can I tell if I need to change that? Where would it be? Thanks for ANY help…
February 6th, 2009 at 1:34 am
Hi when I set an image as the background for all the buttons for every state in the CSS style the images are alined diferently can you help?
February 11th, 2009 at 8:57 am
I am currently designing my company website and have been searching the net for days regarding the following query:
I have utilised Spry Menu’s and Collapsible Panels on my site (CSS) in order to avoid duplication and aid in navigation of the site.
All my Spry settings are working just fine - What I would like to know is: Can one insert an action in place of a link for the Menu?
My dilemma is that I have a total of 5 pages for the site (each has on average 7 collapsible panels). Each page contains large amounts of information - So, I have incorporated the collapsible panel function to hide information not relative to the viewers requirements (this also allows clients to continue viewing without redirection).
This is easily done by altering the default status of each collapsible page to display the required information (in dreamweaver).
I now have two choices - I change the default status for each panel, and save them all as individual pages (making updates etc difficult) OR I find a way of linking the menu so that when it is clicked, the collapsible panel required (selected in the drop down menu) opens and the others all close.
Is this possible?
I would greatly appreciate any assistance you might be able to provide - references to other related articles would also suffice.
Thanks for the above tutorial btw.
May 13th, 2009 at 4:19 am
Hi
I wanted to know how you made yours more modern?
Thanks
July 9th, 2009 at 2:21 am
I really like this code. My problem is that i have it centered in Firefox and it looks GREAT! In IE it shifted all the way to the left and cant see the whole list. Why is this? What is makeing IE read it so that its shifted to the left rather then centered like firefox.
July 16th, 2009 at 5:31 am
The nav bar is great. I want to make the bar 100% in a fixed width container and give the bar a background color that matches the buttons. So the grey bar extends past the buttons all the way across the div. How should I do that? I made the width 100% and gave the MenuBarHorizontal ul a background and it looks great in IE, but it doesn’t show up in Firefox.
Thanks,
Eric
July 17th, 2009 at 12:02 pm
In IE, the spry menu bar shifts the content below it down when the user rolls over the topmost links. Also, there is an empty white space hanging to the right of the entire bar. How can I fix these?
August 30th, 2009 at 1:05 pm
I re designing my website and created 5 horizontal navs, each within its own cell. i am trying to place a back ground image within each of those cells as each background image is slightly different in tones. How do i do that?
November 9th, 2009 at 7:10 pm
my menu bar cant come out correctly… at my front page i placed a flash object.. the problem is my drop down menu goes behind the flash… how to overcome that…?
November 13th, 2009 at 11:51 pm
I have a problem with positioning of sub menus when browsing with IE (fine with Firefox and Safari). They pop up through the main menu bar.
When they pop they also bring up additional boxes with the word ‘false’ inside. Again this only occurs with IE.
Can you help?
December 11th, 2009 at 4:22 am
wow. lot’s of questions in these comments and seems like no answers!
a common question is about the menu dropping behind of objects. a few people have asked. presuming it is a common occurance ..
can anyone direct me to a fix?
thanks.
January 30th, 2010 at 9:55 pm
Hi, How to change size of individual menu boxes, ie. “Home” 8em, “Travel guide” 12em. etc. Thank you in advance Denis.
February 4th, 2010 at 3:25 pm
Hey guys,
Just wondering if there’s any way to make a spry nav open on click rather than fly over?
Ta
February 16th, 2010 at 3:07 am
To add a background image in the nav bar you need to change the css line that says “color”.
The line for you need to use is:
background-image: url(/images/bkground.jpg);
background-repeat: repeat;
Depending on the color choices you make, you can have two bkground images applied to the css file to give the nav bar depth.
JLS