Drop Shadow for Adobe Dreamweaver CS3 Spry Menubar

Hello Experts:

I need help from someone that would be willing to break things down for me on a very basic level.  I have set up a spry menubar using Dreamweaver CS3 on my website, sleepamazing.com, and would like to know if there is any way to create a more professional look to the menu by say, creating a tab like effect when the mouse hovers over a menu item that would display a submenu with a 3D drop shadow around it.

The effect I am looking to acheive can be seen at target.com.

Thanks a million to all.
LVL 17
OmniUnlimitedAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

EMB01Commented:
You can custom program this via the assets folder.  I can help you if you send me the CSS files for the menu.  If you don't know which files they are, just look at the page with the menu on it.  In the header of that page it should have:

<LINK REL=StyleSheet HREF="spry-stylesheet" TYPE="text/css">

Otherwise, you can use a pre-built CSS menu and we can even customize that.  A target.com-ish menu can be found here:

http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

All you have to do is change the image to something that more closely resembles the target.com menu.  You would have to design this yourself probably; or you could screen-capture target.com and do some photo editing.  Here's the property that contains the image:

background: transparent url(media/color_tabs_right.gif) no-repeat right top;

Let me know if you need any help.
0
LZ1Commented:
I'm not sure about Spry, but what your looking for is very easy to do with OpenCube menus.
http://www.opencube.com/sampleit_im.asp?samples/qm2/sample18/sample.html 
0
OmniUnlimitedAuthor Commented:
Thanks guys, for your responses.

EMB01: I am attaching the CSS file for the Spry menu to this response.  I checked out the dynamic drive menus that you sent me to, and I note a couple of significant differences between them and the target.com menus.  At target.com, when you hover over the menu items (say "Women" for example), it appears that a 3D tab appears with the menu item in the tab area and the submenu attached in a seamless box below.  The effect from the dynamic drive menus do not seem to emulate this effect.  I have read some articles stating that the drop shadow can be made using png images, but I was wondering if the same effect might be possible with gifs, and how I would go about doing this.

LZ1:  Thank you for the reference to the OpenCube menus.  This is an area that I know nothing about, and the menus look almost exactly like the ones I would like to have on my website, but as EMB01's examples from the dynamic drive site, these submenus also lack the 3D, drop shadow effect of target.com.  Can OpenCube be modified to accept drop shadows?  If so, how would they be implemented?

Thanks again for the assist.
SpryMenuBarHorizontal.css
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

LZ1Commented:
I know they can.  You just have to design it in their interface
http://www.opencube.com/qmv7/run001.html 
 
0
OmniUnlimitedAuthor Commented:
LZ1: Wow, that is nice, but it still is not quite what I am looking for.  Did you notice on target.com that the dropshadow actually included the tab over the menu item as well as the submenu?
0
LZ1Commented:
I'm not entirely sure what you mean.  The tab starts with the main menu item then the submenu is contained within the box with the shadow.
0
OmniUnlimitedAuthor Commented:
I'm sorry.  I may not be very good at explaining this.  If you look on target.com and hover over, say "Women", you will see that the menu bar with the word "Women" gets overlaid with a tabbed submenu structure.  There is a 3D dropshadow effect showing up around the word "Women" (which also changes color) above, and to the right and left of the word.  The dropshadow then continues on to the right, following the border around the rectangular submenu below until it connects up with the dropshadow to the left of the word "Women".  The submenu and tab also have rounded corners.  I would think that this must be some sort of image, but how do I incorporate expandability to the submenu without having to design a new image every time I update the submenus?

These target submenus are very impressive to me.
0
LZ1Commented:
There is no shadow around the actual word "Women", it's just the container that's being projected behind it.  
The link I gave you can do all of that.  Unfortunately I don't have the time to duplicate the exact effect.  You can try it out and see for yourself.  It's a very easy to user and user-friendly interface.  
 
0
OmniUnlimitedAuthor Commented:
OK LZ1, I will download it and give it a try.  I am going to leave this question open in case anyone else has any other ideas, and also to provide me a channel through which I can get back to you in case I run into problems with its implementation.  If it works, then I will close the question and award points.  If it is as easy as you say, maybe I can get back to you today.
0
OmniUnlimitedAuthor Commented:
Sorry LZ1, I tried customizing a menu and it tells me that the dropshadow add-on is not compatible with the rounded corners add-on.
0
EMB01Commented:
I'm not sure about the drop-shadow.  This menu is getting warmer.  Maybe we can add drop-shadows to it.  What do you think?

http://www.calmdesign.co.uk/test/round-cornered-horizontal-dropdown-menu.php

There should be one "top" round-cornered submenu image and one "bottom" one.  We can probably add drop shadows to them using a transparent .GIF or even .PNG.  

IE9 is supposed to make drop shadows and rounded corners really easy.  Check this out:
http://www.aidangarnish.net/post/CSS3-rounded-corners-and-drop-shadow-fun!.aspx
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
LZ1Commented:
I ended up seeing that after the fact.  I do apologize.  I thought for sure both functions would be supported.
I know your going to need Javascript or a Javascript library like Jquery or something.
I did find this: http://www.ajaxupdates.com/round-corners-with-drop-shadow/ 
0
OmniUnlimitedAuthor Commented:
Thanks guys, I really appreciate all the input.

Unfortunately, I am getting an ugly gut feeling that my solution is not readily at hand.  I was hoping that someone through this forum might come up with the perfect solution, but as this forum works, my question has already run itself down the queue and will probably not be seen by most.

EMB01: Thanks for the calmdesign example.  I looked at the code and it does use graphics to set up rounded corners, which is good, but seems to be limited to the amount of knowledge I already possess about rounded corners.  I'm afraid that setting up rounded corners across what must be two different sized div's (as I am assuming is the case with the target tabbed submenus) along with dropshadows is a little beyond my experience.

I'm afraid I have to reject the IE9 suggestion as my site must be very cross-browser compatible.

LZ1:  No problem.  I too am disappointed.  The opencube example was the closest I have seen to getting the effect that I want.  I would have loved to have seen it work.

Thanks for the article from ajaxupdates.  I would like, however, to try and avoid javascript rounded corners, if possible.  I have tried that before (if you visit my site you will note the home page has several examples of rounded corners) and was very disappointed by its effects and performance.

I don't know if I should close out this question as a "No Solution" situation.  Do you gentlemen have any more ideas?
0
LZ1Commented:
I understand your frustration.  I would hit the "Get Attention" button at the top to see if any other experts can offer help.  
0
OmniUnlimitedAuthor Commented:
Thanks LZ1, I went ahead and did as you suggested.
0
EMB01Commented:
I'm thinking you can just add the drop shadows to the sub menu graphics.  I would give that a shot if I were you.  After you make the graphics with the added dropshadows, just modify the CSS to support the new graphic's size (it'll probably only be a few pixels bigger since you added the dropshadows).
0
OmniUnlimitedAuthor Commented:
Are you talking about the existing Spry, or some other menu?
0
EMB01Commented:
0
OmniUnlimitedAuthor Commented:
Hmm.  OK, I'm going to have to take a closer look at that one.  Thanks!
0
LZ1Commented:
Any updates?
0
OmniUnlimitedAuthor Commented:
Experts, my sincerest apologies for not getting back to you sooner.  I had to leave town suddenly due to a family emergency.

Well, after going over all that you gentlemen have given me, I opted for the CSS solution.

EMB01: The calmdesign menu was a little confusing to me, and was causing me quite a bit of heartache in trying to achieve the effect I desired.  In googling "CSS drop down menu", I came across the menus at http://www.lwis.net/free-css-drop-down-menu/, which seemed to be much clearer in the design and programming than the calmdesign menu.

After studying the designs, and understanding just how CSS dropdown menus work, I was able to come up with my own design based off the examples at www.lwis.net.

LZ1:  I appreciate all your help and input, however as I stated earlier, I am opting for a design that will steer away from javascript and javascript effects.

Because neither of you gentlemen actually came up with the solution to my original problem, I think it only fair that I split up the points on this one.

EMB01:  I am awarding you the most points, because it was you who suggested a CSS solution in the first place.

If any are interested in seeing the adaptation of target's menu system to my website, you can check it out at http://sleepamazing.com/.
0
OmniUnlimitedAuthor Commented:
Thanks to all for your assistance.
0
EMB01Commented:
You're menu implementation looks pretty good.  That resouce http://www.lwis.net/free-css-drop-down-menu/ looks like a good one.

The only thing is the white around the grey-to-white fade.  There's probably nothing you can do about that, unless you could try using another image type that would allow a grey-to-transparent fade.  You can only see it when the menus goes over the red, obviously.

Hope your family's well.

Thanks.
0
OmniUnlimitedAuthor Commented:
EMB01, you have a great eye!  Thank you for pointing that out.

Thank goodness for this forum at experts-exchange, I was able to find experts in the Photoshop area that helped me to acheive precisely the effect I wanted.

You can see the final results at http://sleepamazing.com.

Once again, thanks for all the help.
0
EMB01Commented:
Wow, that looks really good.  Nice job.
0
OmniUnlimitedAuthor Commented:
Thanks EMB01, you are the greatest!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.