I’m using the CSS menu action, works great so far. I’m not using it for any child menu’s underneath and am trying to get a rollover effect similar to Apple’s top navigation bar.
Essentially I want to adjust the parent height so the hover background image fills up my entire menu bar (height wise, width is fine already) rather than just the CSS part and matches my background I have behind the menu already. My background menu height is 35px.
How would I target the div (say “menu”) and adjust the height of the menu to make it work? I also have other lists on the site, so it’d have to target the specific instead of the broader.
There’s currently no way to do this without adding a bit of CSS into
the Styles and Colors palette.
Here are the steps for adding top and bottom padding:
Assuming you already have your menu set up, open the Styles and
Color palette
Click the “Ay” icon, then the Cog wheel at the top right (called
Action menus by Apple) and select New Style
In the Tag field type “li a” without quotes, this will target any
link within a list so if you have other lists on your pages containing
links then these will be affected. You can be more specific by typing
“#fwNav1 li a”, if you have more than one menu on the page you will
need to find the number of the menu (#fwNav2, #fwNav3 and so on…).
Remove the text from the Name field
In the Paragraph section add Space Before and Space After. Add 10px
(or whichever value you want as long as it’s above the default 3px)
and click OK.
Preview your page and you will see the extra space.
I hope this helps out in the short term.
Joe
On 11 Mar 2008, at 22:33, Mitchell wrote:
I’m using the CSS menu action, works great so far. I’m not using it
for any child menu’s underneath and am trying to get a rollover
effect similar to Apple’s top navigation bar.
Essentially I want to adjust the parent height so the hover
background image fills up my entire menu bar (height wise, width is
fine already) rather than just the CSS part and matches my
background I have behind the menu already. My background menu
height is 35px.
How would I target the div (say “menu”) and adjust the height of the
menu to make it work? I also have other lists on the site, so it’d
have to target the specific instead of the broader.
When I tried this out, it increased the vertical spacing of the
submenu items, but didn’t change the height of the background colour
bars at all.
I’d also like to know how to do what the original questioner asked;
i.e. to increase the height of the main menu bar to provide more
‘space’ above and below the link text, preferably without affecting
the normal height or spacing of the submenu bars.
Steve.
On 12/3/2008, at 9:03 PM, Joe Billings wrote:
There’s currently no way to do this without adding a bit of CSS into
the Styles and Colors palette.
Here are the steps for adding top and bottom padding:
Assuming you already have your menu set up, open the Styles and
Color palette
Click the “Ay” icon, then the Cog wheel at the top right (called
Action menus by Apple) and select New Style
In the Tag field type “li a” without quotes, this will target any
link within a list so if you have other lists on your pages containing
links then these will be affected. You can be more specific by typing
“#fwNav1 li a”, if you have more than one menu on the page you will
need to find the number of the menu (#fwNav2, #fwNav3 and so on…).
Remove the text from the Name field
In the Paragraph section add Space Before and Space After. Add 10px
(or whichever value you want as long as it’s above the default 3px)
and click OK.
Preview your page and you will see the extra space.
I hope this helps out in the short term.
Joe
On 11 Mar 2008, at 22:33, Mitchell wrote:
I’m using the CSS menu action, works great so far. I’m not using it
for any child menu’s underneath and am trying to get a rollover
effect similar to Apple’s top navigation bar.
Essentially I want to adjust the parent height so the hover
background image fills up my entire menu bar (height wise, width is
fine already) rather than just the CSS part and matches my
background I have behind the menu already. My background menu
height is 35px.
How would I target the div (say “menu”) and adjust the height of the
menu to make it work? I also have other lists on the site, so it’d
have to target the specific instead of the broader.
The solution increased the spacing vertically, but when I apply a background image to the hover it doesn’t “fill into the extra space.” It just fills around the text. I tried adjusting the hover tag and that didn’t help.
Maybe I’ll revert back and see if I can come up with something.
Ok, the only way to do this at the moment is to override the CSS Menus
output. To do this you need to paste the following code into the
Page>HTML Markup dialog. Select “Before ” from the “Insert”
drop down, the slash before the HEAD is important, selecting "Before
" will not work.
Paste this into the field:
<style type="text/css">
#fwNav1 li a { padding:10px }
</style>
Replace 10px for the amount of padding that you want to use, feel free
to experiment here. Remember to change #fwNav1 for the number of the
menu you are wanting to change.
HTH,
Joe
On 12 Mar 2008, at 13:58, Mitchell wrote:
Thanks Joe.
The solution increased the spacing vertically, but when I apply a
background image to the hover it doesn’t “fill into the extra
space.” It just fills around the text. I tried adjusting the hover
tag and that didn’t help.
Maybe I’ll revert back and see if I can come up with something.
The solution increased the spacing vertically, but when I apply a background image to the hover it doesn’t “fill into the extra space.” It just fills around the text. I tried adjusting the hover tag and that didn’t help.
Maybe I’ll revert back and see if I can come up with something.
Mitchell,
If you don’t want or need the extra space created by the CS Menu action, create a style that targets the menu as Joe suggested except put “ul” in the tag field, without quotes. Once that is done, click on the Extended button for that style and add padding with 0 as the value. This will remove the extra spacing above and below the menu choices.
The suggestion below works well to increase the height of the menu
bar, but it also increases the height of the submenu items by the same
amount. My desire would be to do the first without the second. Is this
possible? There is also a small problem with this method in that the
arrows no longer properly align with the link text.
I think this would be a good “feature request” for the Softpress
Towers programmers. It seems like something that a lot of people would
like to do (to allow for custom graphics in the menu bar).
Steve.
On 13/3/2008, at 1:41 AM, Joe Billings wrote:
Ok, the only way to do this at the moment is to override the CSS Menus
output. To do this you need to paste the following code into the
Page>HTML Markup dialog. Select “Before ” from the “Insert”
drop down, the slash before the HEAD is important, selecting "Before
" will not work.
Paste this into the field:
#fwNav1 li a { padding:10px }
Replace 10px for the amount of padding that you want to use, feel free
to experiment here. Remember to change #fwNav1 for the number of the
menu you are wanting to change.
Steve Cooper, email@hidden
Mac Assist, Geelong Australia
Web: www.macassist.net.au
The suggestion below works well to increase the height of the menu
bar, but it also increases the height of the submenu items by the same
amount. My desire would be to do the first without the second. Is this
possible? There is also a small problem with this method in that the
arrows no longer properly align with the link text.
I think this would be a good “feature request” for the Softpress Towers Programmers…
I think we need a CSS Menu Pro action. This would give access to all the parameters useful for css menus, including center or right alignment, customizable borders for text and not just the outside borders, adjustable padding, etc. Some of this can be done by creating separate styles, but certain things are stubborn such as alignment. It would be nice to have it all under one action settings window though.
Of course…we are still in beta so who knows what will ship.