Okay folks, I’ve tweaked the code as best a “brain-dead-to-code” man can. Here are two sets of Page Markup code for you:
Opaque Menus
<style type="text/css">
<!--
#fwNav1 .sub {
-webkit-box-shadow: #333333 3px 4px 12px;
-moz-box-shadow: #333333 3px 4px 12px;
box-shadow: #333333 3px 4px 12px;
}
#fwNav1 ul.sub,
#fwNav1 ul.sub li.fwLastChild,
#fwNav1 ul.sub li.fwLastChild a
{
-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
background: #82878D;
}
-->
</style>
<style type="text/css">
<!--
#fwNav1 ul.sub .sub,
#fwNav1 ul.sub .sub li.fwFirstChild > a,
#fwNav1 ul.sub .sub li.fwFirstChild,
#fwNav1 ul.sub .sub li.fwFirstChild > span a
{
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topright: 7px;
border-top-right-radius: 7px;
}
-->
</style>
Semi-Transparent Menus
<style type="text/css">
<!--
#fwNav1 .sub {
-webkit-box-shadow: #333333 3px 4px 12px;
-moz-box-shadow: #333333 3px 4px 12px;
box-shadow: #333333 3px 4px 12px;
}
#fwNav1 ul.sub,
#fwNav1 ul.sub li.fwLastChild
{
-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
}
#fwNav1 ul.sub li.fwLastChild a
{
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
#fwNav1 .fwNavItem .sub .fwNavItem a {
background: rgba(130, 135, 141, 0.97);
}
-->
</style>
<style type="text/css">
<!--
#fwNav1 ul.sub .sub,
#fwNav1 ul.sub .sub li.fwFirstChild > a,
#fwNav1 ul.sub .sub li.fwFirstChild
{
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topright: 7px;
border-top-right-radius: 7px;
}
#fwNav1 ul.sub .sub li.fwFirstChild > span a
{
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
}
-->
</style>
<!--[if IE]>
<style type="text/css">
<!--
#fwNav1 ul.sub, #fwNav1 ul.sub li.fwLastChild, #fwNav1 ul.sub li.fwLastChild a {
background: #82878D;
}
-->
</style>
<![endif]-->
NOTES:
-
If using Opaque Menus, set your menu “Background” color in the CSS Menus action. In my case, the color chosen in the CSS Menus action was 82878D, which is why you see that in my code above.
-
If using Semi-Transparent, you need to be sure to set “Background” in the CSS Menu action to “None.”
Despite all the tweaks that Walter and Joe so kindly offered here, I was still not completely satisfied with the curved corner areas when the menus were semi-transparent. The reason is, despite all the heavy duty code to refine the curves, you can still see some artifacts in those curves, which is influenced by underlying content. Having good vision myself, I consider this quite unsightly and unacceptable on my site.
So after all this effort, I ultimately when back to solid menu colors (the first code block above), and it works very nicely for me.
Of course, your mileage will vary as you experiment with different colors and shades of color, with and without a menu border But if you go with the same gray tones and thin border as I used, you’ll probably come to the same conclusions as I did.
To conclude I would also like to mention Fred Kylander. This kind soul has a good “Code Head” on his shoulders and he has offered me a significant amount of advice off-list. In his most recent correspondence, he alerted me to the fact that OS X menus use padding, which is something the code blocks above do not include. Here are Fred’s words exactly…
Look at how Apple handles the top right hand corner
curving problem: they use top and bottom padding on the
parent ul to make sure the corner curve isn't covered by
the li element's (or a element's as the case may be)
background colour change. Simple, elegant and smart
way to solve the problem. Might be worth considering -
if nothing else then to save you from having to write
really long style blocks, one block for each menu
level...
And Fred gives some specifics here…
To implement it you'd need to add something like the
following for your ul styles (and note that it should
**only** be applied to submenu ul styles, not li styles
or a styles or span styles).
#fwNavItem1 ul {padding-top:5px; padding-bottom:5px;}
#fwNavItem2 ul {padding-top:5px; padding-bottom:5px;}
etc...
The padding should propagate to all ul elements within
#fwNavItem1, #fwNavItem2 and so on. If it doesn't, you'd
have to get more specific with the styling, something in
the order of:
#fwNavItem1 ul.sub,
#fwNavItem1 ul.sub ul,
#fwNavItem1 ul.sub ul ul,
#fwNavItem1 ul.sub ul ul ul {padding-top:5px; padding-bottom:5px;}
This is untested though -with regards to your specific
menu construction- so even if it is sound as CSS goes,
there's no guarantee it'll work off the bat in your menu.
The padding value is of course just an example. In the
Mac OS X menu it appears to be set to just cover the
corner curvature, which if you have a 9px curve would
require around 4.5px padding but since decimal pixel
values don't really work well in CSS we set it to the
nearest whole value that is greater than the decimal
value (5px). So you'll need to experiment with the
padding value to get it exactly right, if you indeed use it
at all.
I experimented a bit with Fred’s suggestions but couldn’t get it to work well. Then again, I am brain-dead-to-code. Perhaps some of you will fair better than I.
Best wishes.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options