FreewayTalk
37 replies to this thread. Most Recent
[Pro] CSS Menus - Rounded Corners & Shadow
I have been having an offline dialog with some folks that is too important to not post here. First off, I wish to publicly thank Walter Davis, Fred Kylander, Max Fancourt, and Joe Billings for their contributions. I cannot emphasize the brilliance of these gentlemen when it comes to code.
What you are going to read here works in Firefox (Mozilla browsers), as well as in Safari and Chrome (Webkit browsers). It doesn’t work in IE6, IE7 or IE8. But I am told it might work in IE9, when it comes out. The great news is that your menus will still work in IE, you just won’t get the fancy shadow or curved corners.
My goal was to clean up my CSS Menus a bit, making them more distinguishable (i.e., shadow needed) and more like OS X (i.e., rounded corners at the bottom). Unfortunately, the CSS Menus action does not include this functionality. However, thanks to the efforts of the aforementioned code-wizards, there is a simple solution that involves copying and pasting the following code into the “Before </head>” section of Page Markup:
<style type="text/css">
<!--
.sub {
-webkit-box-shadow: #000000 3px 3px 8px;
-moz-box-shadow: #000000 3px 3px 8px;
box-shadow: #000000 3px 3px 8px;
}
ul.sub, ul.sub li.fwLastChild, 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;
}
-->
</style>
Play around with the numbers in the code above to see how the effect changes.
You will then need to experiment with CSS Menu settings, determining if you want a Border or not, and how colors impact the look of your menus.
If you would like functionality like this to be included in an easy to use GUI form, don’t hesitate to tell SoftPress about it. Even though I got this to work via Page Markup, I’d still like to be able to do it through the CSS Menus action itself. I use Freeway because I don’t like to code for the web! But thanks again to those coders who helped put this together.
Sincerely,
James Wages
James, how about a link to the site so those interested can see the result of the extra code.
Freeway Pro 5.5, i7 Macbook Pro 2.2 ghz 8gb ram, 2.3 ghz Dual Core MacPro 10gb ram
A pretty basic example with a (pro) file for download can be seen here:
http://users.softpress.com/joe/cssMenuShadow/
I changed the CSS slightly from James’ original post, it uses the following:
<style type="text/css">
<!--
.sub {
-webkit-box-shadow: #505050 3px 3px 16px;
-moz-box-shadow: #505050 3px 3px 16px;
box-shadow: #505050 3px 3px 16px;
}
ul.sub, ul.sub li.fwLastChild, 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: #303030;
}
-->
</style>
Joe
On 2 Jun 2010, at 19:29, chuckamuck wrote:
James, how about a link to the site so those interested can see the result of the extra code.
Sorry about my delay in posting back here, Chuck. I am still experimenting, which is why I did not want to post a link to my final site.
Thank you, Joe, for posting an example site and FW document. The key difference between Joe’s code and the code I posted above is one line:
background: #303030;
…where the 303030 is a light gray color.
I didn’t realize until today how important that line is. Without it, the code works, but there is a single pixel gap in the curved corners that allows underlying content to show through. The addition of that “Background” line eliminates that, resulting in a better looking menu.
Right now, I am experimenting with curving the upper right corner of my menus, to make them even more similar to the OS X menu experience. To accomplish that, I have added this block of code to my other code (in HTML Markup)
ul.sub, ul.sub li.fwFirstChild, ul.sub li.fwFirstChild a {
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topright: 7px;
border-top-right-radius: 7px;
}
Unfortunately, there is a problem that results which I cannot explain (hence my post here today)…
When using the above code with deeply nested submenus, the mouseover hover highlight in some of those nested submenus has a curved upper right corner FOR EVERY SINGLE COMMAND in that deeply nested submenu! For the life of me, I don’t understand why.
You can see an example here on my Beta site (keeping in mind this site will be gone in a week or so):
http://www.visionsecurity.jp/beta/
Open that web page, mouseover the 2nd menu from the left to make it drop down, then mouseover the VISION line and you will see the sub-submenu appear. Move your mouseover highlight up and down in that sub-submenu and note that all is well. Then mouseover the topmost entry in that sub-submenu to make the sub-sub-submenu appear. It is in this menu that you will see the problem. Just mouseover all the entries in that menu: 1770S, 1370S/B, 1350S/B, 1440R/B, etc. You will see that the highlight is curved in the upper left for every single ENTRY in that menu. But the question is, WHY???
In addition to knowing how to solve the “Hover” problem mentioned in my previous post, I have one more question for you code experts…
Rounded menu corners and shadow are performed via code added to Page HTML Markup. The problem is, I have 2 instances of CSS Menus on the same page in one of my sites. I want to prevent the HTML markup from changing the styling of the 2nd instance of CSS Menus on that page. How can I do that?
Simply prefix all of your new style rules with the ID of the bar you DO want to have the effect. For example, using Joe’s code and making it work only with the main bar on your site, you would do this:
<style type="text/css">
<!--
#NaviBar .sub {
-webkit-box-shadow: #505050 3px 3px 16px;
-moz-box-shadow: #505050 3px 3px 16px;
box-shadow: #505050 3px 3px 16px;
}
#NaviBar ul.sub, #NaviBar ul.sub li.fwLastChild, #NaviBar 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: #303030;
}
-->
</style>
The “cascade” part of CSS (Cascading Style Sheets) in action!
Walter
On Jun 3, 2010, at 10:45 PM, JDW wrote:
In addition to knowing how to solve the “Hover” problem mentioned in my previous post, I have one more question for you code experts…
Rounded menu corners and shadow are performed via code added to Page HTML Markup. The problem is, I have 2 instances of CSS Menus on the same page in one of my sites. I want to prevent the HTML markup from changing the styling of the 2nd instance of CSS Menus on that page. How can I do that?
Freeway user since 1997
Thank you for the hand-holding, Walter. Your ID tweak to the code works perfectly!
But Walter, I also would appreciate hearing your thoughts on the other problem I reported before. Namely, the problem where the Hover is going crazy on deeply nested submenus. The Hover should not have curved corners when you mouseover every single line in the submenu, but that is what’s happening. Would you know why?
Hi Joe, Great looking menus! Just downloaded the file to see how it all fits together, and the version you uploaded was done in Freeway Pro 5.5.0b5 according to the header when opened in TextWrangler. As the latest version is 5.4.2, it won’t open the file! Can you upload a version done in the current flavour of Freeway, or will we have to wait until Freeway is updated!
Best Wishes, Steve.
On 3 Jun 2010, at 16:55, Joe Billings wrote:
A pretty basic example with a (pro) file for download can be seen here:
http://users.softpress.com/joe/cssMenuShadow/
I changed the CSS slightly from James’ original post, it uses the following:
<style type=”text/css”> </style>
Joe
On 2 Jun 2010, at 19:29, chuckamuck wrote:
James, how about a link to the site so those interested can see the result of the extra code.
Steve Ballinger SBDesign Design Artwork Illustration & Websites Providing Graphic Design since 1989 (Yep! I’m now 21!)
SBDesign
Design • Artwork • Illustration
My bad, try again now.
On 4 Jun 2010, at 09:17, Steve Ballinger wrote:
Hi Joe, Great looking menus! Just downloaded the file to see how it all fits together, and the version you uploaded was done in Freeway Pro 5.5.0b5 according to the header when opened in TextWrangler. As the latest version is 5.4.2, it won’t open the file! Can you upload a version done in the current flavour of Freeway, or will we have to wait until Freeway is updated!
Best Wishes, Steve.
On 3 Jun 2010, at 16:55, Joe Billings wrote:
A pretty basic example with a (pro) file for download can be seen here:
http://users.softpress.com/joe/cssMenuShadow/
I changed the CSS slightly from James’ original post, it uses the following:
<style type=”text/css”> </style>
Joe
On 2 Jun 2010, at 19:29, chuckamuck wrote:
James, how about a link to the site so those interested can see the result of the extra code.
Steve Ballinger SBDesign Design Artwork Illustration & Websites Providing Graphic Design since 1989 (Yep! I’m now 21!)
To better explain the curved Hover problem I have mentioned several times in this thread, I have made a video with voiceover:
http://www.kiramek.com/21test95/CurvedCornerWoe.mov
Thoughts on resolving this would be appreciated.
Hi Joe, Thanks for the updated (downdated?) file. Now on to the interesting bit… Regards Steve.
On 4 Jun 2010, at 10:08, Joe Billings wrote:
My bad, try again now.
On 4 Jun 2010, at 09:17, Steve Ballinger wrote:
Steve Ballinger SBDesign Design Artwork Illustration & Websites Providing Graphic Design since 1989 (been doing it for 34 years now and still so much to learn!)
SBDesign
Design • Artwork • Illustration
James, it looks as though you would get the problem of the curved bottom corners on every sub-sub-menu that was a child of the last element of the first level submenu. Here’s why:
CSS:
ul.sub li.fwLastChild a
HTML:
ul.sub
li
a
li.fwLastChild
a (matches ul.sub li.fwLastChild a)
That’s how it’s supposed to work. Here’s what else is being swept up by the same rule:
HTML:
ul.sub
li
a
li.fwLastChild
ul (a sub-sub-menu)
li
a (also matches ul.sub li.fwLastChild a)
li
a (also matches ul.sub li.fwLastChild a)
li
a (also matches ul.sub li.fwLastChild a)
The reason for this is because the cascade doesn’t particularly care at what level the a is a child of a ul.sub li.fwLastChild — it could be a great-great-great grandchild and it would still match the rule.
You could try using an explicit first-descendant selector instead:
ul.sub li.fwLastChild > a
I am not sure that works in IE6, but then neither do the rounded corners and shadows, so you’re pretty well getting a break there.
This means that your sub-sub- menus will have sharp bottom corners, though. Perhaps Joe has a suggestion of a more universal selector that always gets the last child in any level of submenu.
Walter
Freeway user since 1997
Welcome to the wonderful world of CSS James :)
Yep, that’s the reason Walter. The following selector should work:
ul.sub,
li.fwFirstChild,
li.fwFirstChild > span a,
li.fwFirstChild > a {
...styes...
}
The last two selectors look for spans or anchors immediately following the first item of each block as opposed to all anchors inside of them.
Joe
On 4 Jun 2010, at 13:16, waltd wrote:
Here’s why:
CSS: ul.sub li.fwLastChild a HTML: ul.sub li a li.fwLastChild a (matches ul.sub li.fwLastChild a)That’s how it’s supposed to work. Here’s what else is being swept up by the same rule:
HTML: ul.sub li a li.fwLastChild ul (a sub-sub-menu) li a (also matches ul.sub li.fwLastChild a) li a (also matches ul.sub li.fwLastChild a) li a (also matches ul.sub li.fwLastChild a)
Gentlemen, thank you for the advice. I am at home now so I will work on your suggestions first thing Monday morning. In the meantime, I have one related question…
Click on a menu in OS X right now. Note how that menu only has rounded corners at the bottom left and right. Now mouseover a command that kicks out into a submenu. Note how the submenu is different from its parent insofar as the upper right corner is also rounded, but not the upper left corner. Again, this is different from the parent which does not have rounded corners at the top at all.
How would one go about accomplishing this in CSS? (Meaning, the main menu (“parent” menu or “root” menu — whatever its called) would be the only menu with no rounding at the top, and all “child” submenus underneath, regardless of nested depth, would be the same, with the upper right corner rounded.)
Thank you!
Hi James,
To do this just add another level onto the selector:
ul.sub .sub, /* any list block after the first submenu / ul.sub .sub li.fwFirstChild, / any first list item after the first submenu, and so on */ ul.sub .sub li.fwFirstChild > span a, ul.sub .sub li.fwFirstChild > a { -webkit-border-top-right-radius: 7px; -moz-border-radius-topright: 7px; border-top-right-radius: 7px; }
Joe
On 4 Jun 2010, at 14:45, JDW wrote:
Gentlemen, thank you for the advice. I am at home now so I will work on your suggestions first thing Monday morning. In the meantime, I have one related question…
Click on a menu in OS X right now. Note how that menu only has rounded corners at the bottom left and right. Now mouseover a command that kicks out into a submenu. Note how the submenu is different from its parent insofar as the upper right corner is also rounded, but not the upper left corner. Again, this is different from the parent which does not have rounded corners at the top at all.
How would one go about accomplishing this in CSS? (Meaning, the main menu (“parent” menu or “root” menu — whatever its called) would be the only menu with no rounding at the top, and all “child” submenus underneath, regardless of nested depth, would be the same, with the upper right corner rounded.)
Thank you!
On 6/3/10, JDW <email@hidden> wrote:
Sorry about my delay in posting back here, Chuck. I am still experimenting, which is why I did not want to post a link to my final site.
Thank you, Joe, for posting an example site and FW document. The key difference between Joe’s code and the code I posted above is one line:
background: #303030;…where the 303030 is a light gray color.
I didn’t realize until today how important that line is. Without it, the code works, but there is a single pixel gap in the curved corners that allows underlying content to show through. The addition of that “Background” line eliminates that, resulting in a better looking menu.
Right now, I am experimenting with curving the upper right corner of my menus, to make them even more similar to the OS X menu experience. To accomplish that, I have added this block of code to my other code (in HTML Markup)
ul.sub, ul.sub li.fwFirstChild, ul.sub li.fwFirstChild a { -webkit-border-top-right-radius: 7px; -moz-border-radius-topright: 7px; border-top-right-radius: 7px; }Unfortunately, there is a problem that results which I cannot explain (hence my post here today)…
When using the above code with deeply nested submenus, the mouseover hover highlight in some of those nested submenus has a curved upper right corner FOR EVERY SINGLE COMMAND in that deeply nested submenu! For the life of me, I don’t understand why.
You can see an example here on my Beta site (keeping in mind this site will be gone in a week or so):
http://www.visionsecurity.jp/beta/
Open that web page, mouseover the 2nd menu from the left to make it drop down, then mouseover the VISION line and you will see the sub-submenu appear. Move your mouseover highlight up and down in that sub-submenu and note that all is well. Then mouseover the topmost entry in that sub-submenu to make the sub-sub-submenu appear. It is in this menu that you will see the problem. Just mouseover all the entries in that menu: 1770S, 1370S/B, 1350S/B, 1440R/B, etc. You will see that the highlight is curved in the upper left for every single ENTRY in that menu. But the question is, WHY???
Sent from my mobile device
Please note my email address is email@hidden
Bill McCarroll Website: http://billmccarroll.com Twitter: http://twitter.com/billmccarroll
Bill McCarroll
Freeway 5.5 Pro
Hi Bill,
Did you send this message in the hope to get your mailing list email address changed? If so you’ll need to log into the website and change it there: http://www.freewaytalk.net
Joe
On 4 Jun 2010, at 15:14, Bill McCarroll wrote:
On 6/3/10, JDW <email@hidden> wrote:
Sorry about my delay in posting back here, Chuck. I am still experimenting, which is why I did not want to post a link to my final site.
Thank you, Joe, for posting an example site and FW document. The key difference between Joe’s code and the code I posted above is one line:
background: #303030;…where the 303030 is a light gray color.
I didn’t realize until today how important that line is. Without it, the code works, but there is a single pixel gap in the curved corners that allows underlying content to show through. The addition of that “Background” line eliminates that, resulting in a better looking menu.
Right now, I am experimenting with curving the upper right corner of my menus, to make them even more similar to the OS X menu experience. To accomplish that, I have added this block of code to my other code (in HTML Markup)
ul.sub, ul.sub li.fwFirstChild, ul.sub li.fwFirstChild a { -webkit-border-top-right-radius: 7px; -moz-border-radius-topright: 7px; border-top-right-radius: 7px; }Unfortunately, there is a problem that results which I cannot explain (hence my post here today)…
When using the above code with deeply nested submenus, the mouseover hover highlight in some of those nested submenus has a curved upper right corner FOR EVERY SINGLE COMMAND in that deeply nested submenu! For the life of me, I don’t understand why.
You can see an example here on my Beta site (keeping in mind this site will be gone in a week or so):
http://www.visionsecurity.jp/beta/
Open that web page, mouseover the 2nd menu from the left to make it drop down, then mouseover the VISION line and you will see the sub-submenu appear. Move your mouseover highlight up and down in that sub-submenu and note that all is well. Then mouseover the topmost entry in that sub-submenu to make the sub-sub-submenu appear. It is in this menu that you will see the problem. Just mouseover all the entries in that menu: 1770S, 1370S/B, 1350S/B, 1440R/B, etc. You will see that the highlight is curved in the upper left for every single ENTRY in that menu. But the question is, WHY???
— Sent from my mobile device
Please note my email address is email@hidden
Bill McCarroll Website: http://billmccarroll.com Twitter: http://twitter.com/billmccarroll
(I don’t have anything to add, but it’s an interesting post and in order to send me an e-mail for replies so I can continue to follow it, I apparently have to say something. Sorry.)
There’s also RSS, which you get by clicking on the feed icon in the browser’s location bar. Each thread on Freewaytalk has its own feed, updated whenever a new message is posted to that discussion.
Walter
On Jun 5, 2010, at 9:57 AM, LauraB wrote:
(I don’t have anything to add, but it’s an interesting post and in order to send me an e-mail for replies so I can continue to follow it, I apparently have to say something. Sorry.)
Freeway user since 1997
This code is great, but it only affects the submenus not the main menu. Anyway to round and shadow the main menu? Thanks.
If you Control-click (or right-click) on the main menu, you should see an option called Inspect Element in the contextual menu. In the dialog that opens, you should be able to see the style rules currently applied to that element (and to navigate through the tree of elements that makes up the menu). Once you find the right tag name and classnames applied to it, you should be able to modify these style rules (or make new ones) to do just that.
If you don’t see this option in your contextual menu, then you might not have enabled the Developer menu in Safari or installed Firebug in Firefox. (Both do roughly the same things.) For Safari, hunt around the preferences. For Firefox, go to http://getfirebug.com
Walter
Freeway user since 1997
Walt,
“Once you find the right tag name and classnames applied to it, you should be able to modify these style rules (or make new ones) to do just that.”
Not sure what I’m looking for or what to do with it when I find it! Can you clarify?
I am working from Joe’s download above. Thanks Jan
In the code you got from Joe, there’s a part that looks like this:
ul.sub li.fwLastChild > a
This is the CSS selector, which is the part of a rule outside of the curly braces which tells the CSS system what elements to select and apply the contents of the curly braces (the rules) to.
What you will need to do is find out what classname or ID is applied to the main element that creates your menu bar. You will discover this using the tools I listed earlier. As you move from element to element in the Web Inspector (Safari) or the Firebug HTML tab (Firefox), the corresponding element will be highlighted on screen, so you can see what’s what.
Let’s say your main menu was similar to James’, then your main menu ID would be fwNav1. So if you wanted to create the curved ends, you would simply make a new CSS style that looked like this:
#fwNav1 {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
The # sign (octothorp) means that this is an ID selector. If we were
using one of the classnames applied to that element, like Centered,
then you would write the selector as .Centered instead. (But that
would probably apply to more things than you intended, as IDs are
absolutely page-unique, and classnames may be re-used over the page,
and applied to lots of different elements on the same page, so
possibly not only the ones you intend.
You’d need to experiment with this selector, though, because of the problems noted earlier about the contents of the list not being “clipped” by curved borders on the parent element. You would probably have to do some more Control-clicking to discover the exact combination of elements to add to your selector in order to get everything lined up so you have curved ends on your menu.
Walter
On Jun 5, 2010, at 7:19 PM, jan smoot wrote:
Walt,
“Once you find the right tag name and classnames applied to it, you should be able to modify these style rules (or make new ones) to do just that.”
Not sure what I’m looking for or what to do with it when I find it! Can you clarify?
I am working from Joe’s download above. Thanks Jan
Freeway user since 1997
Okay. This is sorta greekish to me, but I put this code in the page markup with Joe’s CSS code. It doesn’t render the main menu any differently - no corners. When I inspect the menu in Safari, I see CSS, such as, -webkit-border-bottom-left-radius: 7px 7px; which I can click on and off, but there seem to be no visual effect.
Then, I added the shadow CSS code to #fwNav1 which renders nicely. -webkit-box-shadow: #505050 3px 3px 16px; -moz-box-shadow: #505050 3px 3px 16px; box-shadow: #505050 3px 3px 16px;
I then went back and tried just rounding the lower left and lower right corners. Again, the CSS code seemed to have no visual effect.
These attributes seem so basically desirable to the CSS menu - couldn’t they be added to the CSS menu action?
Thanks again. Jan
Can you post a link to the test page?
Walter
Freeway user since 1997
Jan, I just viewed your URL. I see shadow and rounded bottom corners in Safari 4 Mac. Clearly, you must be viewing it in an incompatible browser.
He’s talking about also rounding the main menu itself.
Jan, try adding the following to your CSS. Do this in a separate selector, leave everything you already have in place.
#fwNav1 li.fwFirstChild, #fwNav1 li.fwFirstChild a {
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomleft: 7px;
border-bottom-left-radius: 7px;
}
#fwNav1 li.fwLastChild, #fwNav1 li.fwLastChild a {
-webkit-border-bottom-right-radius: 7px;
-moz-border-radius-bottomright: 7px;
border-bottom-right-radius: 7px;
}
The issue is that the UL cannot seem to “clip” the LI and A tags nested inside it to round these corners.
Walter
Freeway user since 1997
Curious. I am using Safari 4.0.4 on a MacBook with Snow Leopard. I see shadow, but no rounded corners. I see same with Firefox 3.6.3.
Hummm.
Walt,
Okay. That did it for me. I actually want all four corners rounded, so I modified to:
#fwNav1 li.fwFirstChild, #fwNav1 li.fwFirstChild a {
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomleft: 7px;
border-bottom-left-radius: 7px;
-webkit-border-top-left-radius: 7px;
-moz-border-radius-topleft: 7px;
border-top-left-radius: 7px;
} #fwNav1 li.fwLastChild, #fwNav1 li.fwLastChild a { -webkit-border-bottom-right-radius: 7px; -moz-border-radius-bottomright: 7px; border-bottom-right-radius: 7px; -webkit-border-top-right-radius: 7px; -moz-border-radius-topright: 7px; border-top-right-radius: 7px; }
Thanks a lot!!! From all of us. Wish you sat at the next desk.
Jan
Hi viewing on Safari it is rounding more than the corners?… is it rounding the key lines too?
Okay, Joe. Thanks to Walter Davis fixing your post, I am now able to see your complete code listing. :-) And after I deleted out your code-notes, your code finally started working for me!
The following code is almost perfect now. It gives me curved bottom left/right corners on all menus (not the menuBAR, of course), and curved upper right corners on all my submenus (I define “submenus” as menus that kick off from the main menu which you pull down from the menubar.) Moreover I used a semi-transparent menu background, which allows a slight bit of the menu shadows to come through. All of these tweaks makes my site menus look very close to how menus look in OS X.
<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: rgba(130,135,141,0.97);
}
-->
</style>
<style type="text/css">
<!--
#fwNav1 ul.sub .sub,
#fwNav1 ul.sub .sub li.fwFirstChild,
#fwNav1 ul.sub .sub li.fwFirstChild > span a,
#fwNav1 ul.sub .sub li.fwFirstChild > a {
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topright: 7px;
border-top-right-radius: 7px;
}
-->
</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]-->
Also note the last section of the code above that eliminates headaches in IE. Without that, the menus would go 100% transparent!
But alas, this code is not perfect. There is one problem: the very bottom entry of every menu is not transparent at all. It’s very odd. All the rest of the menu, including the very top, is transparent, in accordance with my RGBA command.
You can see how it all looks here:
http://visionsecurity.jp/beta/
(Play around with the 2nd menu from the left.)
I would appreciate hearing your thoughts on the transparency problem.
Thanks,
James W.
Hi James,
Remove this from your “#fwNav1 ul.sub, #fwNav1 ul.sub li.fwLastChild, #fwNav1 ul.sub li.fwLastChild a” selector:
background: rgba(130, 135, 141, 0.964844);
And add the following to your style block:
#fwNav1 .fwNavItem .sub .fwNavItem a {
background: rgba(130, 135, 141, 0.964844);
}
What was happening previously was the background color was being applied to all anchors and all last children, so in effect it was being added twice to your last children because they are both anchors and last children.
Hope this helps,
Joe
On 7 Jun 2010, at 09:17, JDW wrote:
Okay, Joe. Thanks to Walter Davis fixing your post, I am now able to see your complete code listing. :-) And after I deleted out your code-notes, your code finally started working for me!
The following code is almost perfect now. It gives me curved bottom left/right corners on all menus (not the menuBAR, of course), and curved upper right corners on all my submenus (I define “submenus” as menus that kick off from the main menu which you pull down from the menubar.) Moreover I used a semi-transparent menu background, which allows a slight bit of the menu shadows to come through. All of these tweaks makes my site menus look very close to how menus look in OS X.
<style type="text/css"> </style> <style type="text/css"> </style> <!--[if IE]> > <style type="text/css"> > </style> <![endif]-->Also note the last section of the code above that eliminates headaches in IE. Without that, the menus would go 100% transparent!
But alas, this code is not perfect. There is one problem: the very bottom entry of every menu is not transparent at all. It’s very odd. All the rest of the menu, including the very top, is transparent, in accordance with my RGBA command.
You can see how it all looks here:
http://visionsecurity.jp/beta/
(Play around with the 2nd menu from the left.)
I would appreciate hearing your thoughts on the transparency problem.
Thanks,
James W.
Thank you, Joe. Your tweak solves the non-trasparent bottoms problem very nicely. However, it does create a tiny visual anomaly though. There is now a very tiny 1px gap (100% transparent) in the area of the curved corners (between the menu’s 1px border and the menu itself):
visionsecurity.jp/beta/
Also, why did you use “0.964844” instead of the “0.97” I was using?
Thanks,
James Wages
On 7 Jun 2010, at 10:13, JDW wrote:
Thank you, Joe. Your tweak solves the non-trasparent bottoms problem very nicely. However, it does create a tiny visual anomaly though. There is now a very tiny 1px gap (100% transparent) in the area of the curved corners (between the menu’s 1px border and the menu itself):
visionsecurity.jp/beta/
This seems to work:
ul.sub, 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;
}
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;
}
I guess what was happening was because the anchor is inside the list item making it smaller. When they have the same corner radius applied the smaller items corners are more curved causing a gap.
Also, why did you use “0.964844” instead of the “0.97” I was using?
Sorry, I just copy and pasted directly from Safari’s Inspector.
Joe
You’re welcome!
Walter
On Jun 7, 2010, at 12:51 AM, jan smoot wrote:
Walt,
Okay. That did it for me. I actually want all four corners rounded, so I modified to:
fwNav1 li.fwFirstChild, #fwNav1 li.fwFirstChild a {
-webkit-border-bottom-left-radius: 7px; -moz-border-radius-bottomleft: 7px; border-bottom-left-radius: 7px; -webkit-border-top-left-radius: 7px; -moz-border-radius-topleft: 7px; border-top-left-radius: 7px;} #fwNav1 li.fwLastChild, #fwNav1 li.fwLastChild a { -webkit-border-bottom-right-radius: 7px; -moz-border-radius-bottomright: 7px; border-bottom-right-radius: 7px; -webkit-border-top-right-radius: 7px; -moz-border-radius-topright: 7px; border-top-right-radius: 7px; }
Thanks a lot!!! From all of us. Wish you sat at the next desk.
Jan
Freeway user since 1997
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:
1) 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.
2) 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.
I just don’t get it. I’ve watched the video ‘Moment’ about how to create a Blog Template… http://www.softpress.com/support/tutorials/HQ/13/ OK, some dummy text is displayed when any Actions > Blogger Actions boxes are placed on the page. But that does not describe how I get the REAL text into that box? Can someone please tell me?
Thanks, Adrian http://www.clubtype.co.uk
