Dreamweaver Club Forums

Dreamweaver Club Forums (http://www.dreamweaverclub.com/forum//index.php)
-   Spry (http://www.dreamweaverclub.com/forum//forumdisplay.php?f=189)
-   -   Spry Menu with different backgrounds on different levels? (http://www.dreamweaverclub.com/forum//showthread.php?t=32908)

Webdesigner2009 07-24-2009 08:51 AM

Spry Menu with different backgrounds on different levels?
I made Spry menu bar but I would like have one image cross the top for menu bar and than One image for drop down. But all I can get same image on all menus why can't I do like I want to do and if I can how would I go about doing this please help .

Some think like this menu try for see how top got nice bevel button with gloosy look and than normal red for drop down how do I do this in dreamwever spry menu.


All can get is just one image and hover And here my site to show you what I mean.

DWcourse 07-24-2009 03:13 PM

The "buttons" on Spry menubars are controlled by the link style:

ul.MenuBarHorizontal a

That covers every link in the menu. For a style to apply to only sublinks, you'll need to create a style:

ul.MenuBarHorizontal ul a

AFTER the first style. You'll also need a hover state.

Two tutorials on Spry menus:

Creating and Customizing Horizontal Spry Menu Bars in Dreamweaver CS3

Creating and Customizing Vertical Spry Menu Bars in Dreamweaver CS3

There's lots of individual answers in the comments on those pages.

Webdesigner2009 07-24-2009 11:17 PM

Thank you this help out alot hope can do this know alot php , html and css , I know code spry is done java and read how do java last night so weish me luck .

Webdesigner2009 07-25-2009 12:00 AM

Is there any tutorial on doing just what need it little hard try pick the information just for what I want to do .

All need know how make it so has different level design each part menu in my spry bar.

DWcourse 07-25-2009 12:34 AM

Don't know of a tutorial but based upon what you already have try this:

In the css style page BELOW the style: ul.MenuBarHorizontal a try creating a new style that will apply only to links within submenus (notice the second ul tag that Iíve inserted)

ul.MenuBarHorizontal ul a
background-image: url(../images/new-image.gif);
background-repeat: repeat-x;

ul.MenuBarHorizontal a:hover
background-image: url(../images/new-roll-image.gif);
background-repeat: repeat-x;

Webdesigner2009 07-25-2009 01:11 AM

Now that work how would go about add hover for this too thank for all help been give me.

DWcourse 07-25-2009 01:30 AM

The second part

ul.MenuBarHorizontal a:hover
background-image: url(../images/new-roll-image.gif);
background-repeat: repeat-x;

Should manage the hover

Webdesigner2009 07-25-2009 01:40 AM

Oh ok thank another think been try figure how would make the content of my page do this.

So that the content on the page stretches from one side to the other of the page evenly.

chrissia7890 07-29-2009 04:14 AM

Hi, I tried your method but it only works with different colours on menubar and Submenu bar. how do i fix the menubar with a background pictures and a normal colour back ground on the submenu bar?

below is my CSS.

ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
font-size: 12px;
text-align: center;
background-image: url(../img/header%20button.png);
ul.MenuBarHorizontal ul a
background-repeat: repeat-x;
background-color: #0F0;
ul.MenuBarHorizontal a:hover
background-repeat: repeat-x;
background-color: #0FF;

DWcourse 07-29-2009 07:05 AM

add background-image: none; to the ul.MenuBarHorizontal ul a style

chrissia7890 07-29-2009 09:13 AM

I did what you mentioned and the submenu bar have the back ground that i added but not the horizontal bar. it is the reverse. haha.. any suggestion?

chrissia7890 07-29-2009 11:14 AM

Just to clarify, i need on the picture on horizontal bar. the sub menu bar normal rectangle box without the pciture. Hope you can help me. Thanks in advance.

DWcourse 07-29-2009 04:54 PM

can you upload the page somewhere so we can look at it?

chrissia7890 07-30-2009 02:31 AM

ok. I am looking for something like in this web site www.prostatcorp.com where the main bar is the back ground and the drop down is a normal box. when i put the back ground on ul.MenuBarHorizontal ul a . I have my background on the drop down but the main bar is normal box. it is the reverse.

Thank you for your time.

DWcourse 07-30-2009 02:34 PM

Last try.

ul.MenuBarHorizontal a is the style for ALL menu items, so put your background image there.

ul.MenuBarHorizontal ul a is the style for the drop downs, so put the property background-image: none there to remove the image from the drop downs..

chrissia7890 07-31-2009 02:39 AM

Thank you for your help DWcourse, It works as per what i wanted. :). You have been very helpful and is greatly appreciated, keep it up...

chux 12-06-2012 04:19 PM

Almost got it...
1 Attachment(s)
I have followed all of the instructions outlined in this thread and the only thing I can't figure out is what else to change or add in the css to make my top level buttons use the navbar_down.jpg image for the rollovers. The only top level button that works properly is the button that has a submenu below it. The submenus work perfectly, I just need to get those top level buttons to go back to using the image for the rollover. Any help would be greatly appreciated.

chux 12-07-2012 09:15 PM

I got it
Under the rule:
"ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus"

I created another rule:

"ul.MenuBarHorizontal ul a:hover, ul.MenuBarHorizontal ul a:focus"

With the 2 new rules added from above and the 1 that I added, I was able to get the look I wanted. Thanks to all who wrote in this thread for helping me out!

All times are GMT. The time now is 03:57 PM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com