[Pro] CSS Menus - Rounded Corners & Shadow

JDW · June 7, 2010, 8:17am

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.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Joe2 · June 7, 2010, 8:54am

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>


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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

JDW · June 7, 2010, 9:13am

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Joe2 · June 7, 2010, 10:06am

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options