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
February 25th, 2010 at 4:48 am
Hello,
I created a template for my index page (template.dwt.php) and then added a spry menu horizontal bar with links to rest of the web pages like about.php, contact.php etc. Then I created a new page index.php from the template.dwt.php template page but now when I click on Home or About or Contact links on the spry menu bar, it’s not working and the only page I see is the home page or index.php (no to and fro links between web pages or menus).
So would you help me in:- How to add as well as edit spry menu bar from my template page so that it is accessible in all web pages with properly working links.
THANK YOU FOR THE HELP.
July 19th, 2010 at 1:06 am
Hi, i want my menu bar to be able to expand and remain in the center of the screen when there is a larger window. How can i do this. Also is it difficult to create a background image like yours? Thanks for all the help, really appreciate it!!
August 22nd, 2010 at 8:36 am
The navigation bar is showing a white box with “false” in it? But also shows below the white box the other correct boxes? What did I do wrong?
November 12th, 2010 at 6:45 pm
I am building a website and I wanted to use a non web font for the nav bar. So I built the button in photoshop. I can get the button inserted into the spry menu bar the problem is when it drops down so does the image, For the drop down text i was going to use a standard text. also can you use five seperate images for the spry menu. How can i get this to work with the image staying on top. I would really appreciate the help.
Thanks
November 12th, 2010 at 9:46 pm
Hi
I am in the middle of creating my website and have used the spry menubar and the collapsible panel but have run into problems. When I transferred the website to another computer and they were using IE6 it doesnt show the spry menubar or collapsible panel. Can you tell me why this is.
December 1st, 2010 at 3:21 am
My spry bar is showing the menu as accordian style instead of a horizontal spry bar. I can’t figure out how to fix it.
Thank you for your help!
January 9th, 2011 at 8:08 pm
Here is your ANSWER!!
I saw some of you are having the problem of the menu dropping down behind other items on the page (other Div items) which causes the drop down to go away because it is giving more importance to the items below it.
SOLUTION:
You need to find the menu items, whether it’s in a CSS file or within the actual index file and look for the z-index and make sure that the horizontal (or vertical) menu bar items are set to the highest numbers and you can even set your other div items (non-menu) to negative numbers such as -5, etc.
Hope this helps.