I am a big supporter of CSS3 and also a loyal fan of Genesis, so I tried to play a bit.
On 23 February, Nick La of WebDesignerWall posted an awesome tutorial about a Mac-like multi-level dropdown menu. This is just my “humble contribution” to the Genesis community so all credits are due to him.
I used the original Genesis css for the subnavbar with Superfish expanding it a little. It renders perfect in Firefox 3.6.3, Opera 10.51,Chrome 5.0.342.9 Beta, Safari 4.0.5 and IE 7.
On IE8 I am yet not able to understand why the border-bottom of the last child is not visible. Some of you will surely find the solution.
(note: this is a CSS3 menu, IE goes a bit in the background …)
For convenience the demo page is in simple html and with no javascript.
Kudos to Joeke-Remkus deVries twitter: @defries for helping me on resolving an issue I’ve encountered during recoding process.
Also you may check Birow (demo site) my last free child theme for Genesis.
Demo
Demo page
Download
Subnav_Style (447)
Some extracts:
#subnav { clear: both; width: 960px; height: 45px; margin: 0; padding: 0; background: #7d7d7d url(images/gradient.png) repeat-x 0 -110px; line-height: 100%; border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4); box-shadow: 0 1px 3px rgba(0,0,0,0.4); } #subnav LI A:hover, #subnav LI A:active, #subnav .current_page_item A { background: #666 url(images/gradient.png) repeat-x 0 -40px; color: #444; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.4); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.4); box-shadow: 0 1px 1px rgba(0,0,0,0.4); text-shadow: 0 1px 0 rgba(255,255,255,1); border-top: 0px none #BBB; } #subnav LI LI:first-child>A { -moz-border-radius: 6px 6px 0 0; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; border-radius: 6px 6px 0 0; border-top: 1px solid #777; margin-top: -3px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4); -moz-box-shadow: 0 1px 6px rgba(0,0,0,0.4); box-shadow: 0 1px 3px rgba(0,0,0,0.4); } #subnav LI LI:last-child>A { -moz-border-radius: 0 0 6px 6px; -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; border-radius: 0 0 6px 6px; border-bottom: 1px solid #858585; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4); box-shadow: 0 1px 3px rgba(0,0,0,0.4); } #subnav LI LI:only-child>A { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border-bottom: 1px solid #858585; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
So this adds rounded corners and shadows to the current menus?
It also styles the list so that only the first and last elements of the submenus have rounded corners.
I like it..is it cross browser compatible?
Hello Herman, it renders perfect in Firefox 3.6.3, Opera 10.51,Chrome 5.0.342.9 Beta, Safari 4.0.5 (all CSS3 ready browsers). In IE7 it degrades nicely, while in IE8 the bottom-border of the last-child doesn’t show. I’m working on it. As for IE6 or lower I couldn’t care less.
RTL, mother of all troubles: i embedded your menus, and (surprise) IE8 choke on sub-menus:
sub-menus from RTL appeared width*2 too left from where it should’ve.
I couldn’t solve it. Here’s the offending snip.
#header .widget-area .widget_nav_menu LI UL UL {
direction: ltr;
margin: -34px 0 0 179px;
/* rtl?? margin: -34px 180px 0; */
}
RTL mode Worked perfectly on FF & Chrome, though, so i desperately gave my users menu that opens counter-intuitively, but they will understand.
thanks!
n.b. oh sht this discussion is 1 year old.