[Pro] CSS Menus - Rounded Corners & Shadow

JDW · June 2, 2010, 9:40am

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 " 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

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

chuckamuck · June 2, 2010, 6:29pm

James, how about a link to the site so those interested can see the result of the extra code.

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

Joe2 · June 3, 2010, 3:55pm

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:

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.

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 4, 2010, 1:46am

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???

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

JDW · June 4, 2010, 2:45am

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?

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

waltd · June 4, 2010, 2:51am

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:

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?

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 4, 2010, 4:32am

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?

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

SteveB · June 4, 2010, 8:17am

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:

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.

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

Joe2 · June 4, 2010, 9:08am

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:

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.

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

Steve Ballinger
SBDesign
Design Artwork Illustration & Websites
Providing Graphic Design since 1989 (Yep! I’m now 21!)

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 4, 2010, 9:18am

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.

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

SteveB · June 4, 2010, 9:59am

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:

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

waltd · June 4, 2010, 12:16pm

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

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

Joe2 · June 4, 2010, 1:14pm

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)
> ~~~~



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

JDW · June 4, 2010, 1:45pm

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!

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

Joe2 · June 4, 2010, 2:05pm

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!

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

Bill_McCarroll1 · June 4, 2010, 2:14pm

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???

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

–
Sent from my mobile device

Please note my email address is email@hidden

Bill McCarroll
Website: http://billmccarroll.com
Twitter: http://twitter.com/billmccarroll

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

Joe2 · June 4, 2010, 3:38pm

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???

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
–
Sent from my mobile device

Please note my email address is email@hidden

Bill McCarroll
Website: http://billmccarroll.com
Twitter: http://twitter.com/billmccarroll

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

LauraB · June 5, 2010, 1:57pm

(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.)

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

waltd · June 5, 2010, 2:03pm

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

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

jan_smoot · June 5, 2010, 6:14pm

This code is great, but it only affects the submenus not the main menu. Anyway to round and shadow the main menu? Thanks.

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