logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Spry
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 07-24-2009, 07:51 AM   #1
Webdesigner2009
 
Join Date: Jul 2009
Posts: 12
Default 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/

Last edited by Webdesigner2009; 07-24-2009 at 08:03 AM..
Webdesigner2009 is offline   Reply With Quote
Old 07-24-2009, 02:13 PM   #2
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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.
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 07-24-2009, 10:17 PM   #3
Webdesigner2009
 
Join Date: Jul 2009
Posts: 12
Default

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 is offline   Reply With Quote
Old 07-24-2009, 11:00 PM   #4
Webdesigner2009
 
Join Date: Jul 2009
Posts: 12
Default

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.

Last edited by Webdesigner2009; 07-24-2009 at 11:14 PM..
Webdesigner2009 is offline   Reply With Quote
Old 07-24-2009, 11:34 PM   #5
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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;
}
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 07-25-2009, 12:11 AM   #6
Webdesigner2009
 
Join Date: Jul 2009
Posts: 12
Default

Now that work how would go about add hover for this too thank for all help been give me.
Webdesigner2009 is offline   Reply With Quote
Old 07-25-2009, 12:30 AM   #7
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

The second part

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

Should manage the hover
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 07-25-2009, 12:40 AM   #8
Webdesigner2009
 
Join Date: Jul 2009
Posts: 12
Default

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.
Webdesigner2009 is offline   Reply With Quote
Old 07-29-2009, 03:14 AM   #9
chrissia7890
 
Join Date: Jul 2009
Posts: 29
Default

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;

Last edited by chrissia7890; 07-29-2009 at 03:21 AM..
chrissia7890 is offline   Reply With Quote
Old 07-29-2009, 06:05 AM   #10
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

add background-image: none; to the ul.MenuBarHorizontal ul a style
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 10:04 PM.


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