PDA

View Full Version : Spry Menu with different backgrounds on different levels?


Webdesigner2009
07-24-2009, 07:51 AM
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.

http://www.simmiles.com/oceaniapacific/QFA/

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

DWcourse
07-24-2009, 02: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 (http://dwcourse.com/dreamweaver/spry-menu-bars.php)

Creating and Customizing Vertical Spry Menu Bars in Dreamweaver CS3 (http://dwcourse.com/dreamweaver/more-spry-menu-bars.php)

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

Webdesigner2009
07-24-2009, 10: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-24-2009, 11:00 PM
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-24-2009, 11:34 PM
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, 12: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, 12: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, 12: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, 03: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, 06:05 AM
add background-image: none; to the ul.MenuBarHorizontal ul a style

chrissia7890
07-29-2009, 08: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, 10: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, 03:54 PM
can you upload the page somewhere so we can look at it?

chrissia7890
07-30-2009, 01:31 AM
ok. I am looking for something like in this web site www.prostatcorp.com (http://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, 01: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, 01: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, 03:19 PM
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, 08:15 PM
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!