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.

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 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


All times are GMT. The time now is 05:02 PM.

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