Customizing a Superfish menu mostly involves writing your own CSS to style the menu the way you'd like. Here's how we'll create a custom look for the menu:
If you'll remember some web basics, you'll remember that CSS stands for Cascading Style Sheets. The cascading features are what we'll focus on here. Any styles we write for the top level of our menu are going to cascade down to the other levels of the menu. We have to remember that and handle all the cases where we'd rather stop a style from cascading downward.
- Let's get started by styling the top level of our menu. Since I'm using new CSS3 features, we're going to have to be prepared to write a bit of extra code so that each browser can handle our code gracefully. Here's the CSS we'll create for the top level of the menu. Place this code inside your
styles.cssfile:/**** Level 1 ****/ .sf-menu, .sf-menu * { list-style: none; margin: 0; padding: 0; } .sf-menu { background: #f6f6f6; /* Old browsers */ background: -moz-linear-gradient(top, rgba(0,0,0,1) 1%, rgba(56,56,56,1) 16%, rgba(255,255,255,1) 17%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(0,0,0,1)), color-stop(16%,rgba(56,56,56,1)), color-stop(17%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,1) 1%,rgba(56,56,56,1) 16%,rgba(255,255,255,1) 17%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,1) 1%,rgba(56,56,56,1) 16%,rgba(255,255,255,1) 17%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,1) 1%,rgba(56,56,56,1) 16%,rgba(255,255,255,1) 17%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, rgba(0,0,0,1) 1%,rgba(56,56,56,1) 16%,rgba(255,255,255,1) 17%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* W3C */ float: left; font-family: georgia, times, 'times new roman', serif; font-size: 16px; line-height: 14px; margin: 28px 0 14px 0; padding: 0 14px; } .sf-menu li { border-left: 1px solid transparent; border-right: 1px solid transparent; float: left; position: relative; } .sf-menu li.sfHover, .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li.sfHover, .sf-menu li:hover { background: #DF6EA5; border-color: #a22361; -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.2); box-shadow: 3px 3px 3px rgba(0,0,0,0.2); } .sf-menu a { border-left: 1px solid transparent; border-right: 1px solid transparent; color: #444; display: block; padding: 28px 14px; position: relative; width: 98px; text-decoration: none; } .sf-menu li.sfHover a, .sf-menu li:hover a { background: #DF6EA5; border-color: #fff; color: #fff; outline: 0; } .sf-menu a, .sf-menu a:visited { color: #444; }Phew! That seems like a lot of code, but much of it is the repeated gradient and shadow declarations we have to use for each different type of browser. Keep your fingers crossed that this requirement goes away soon and the browser vendors eventually reach agreement on how gradients and drop shadows should be created with CSS.
- Next, let's take a look at how we'll style the next level of our menus. Add the following CSS to your
styles.cssfile to style the second level:/***** Level 2 ****/ .sf-menu ul { background: rgb(223,110,165); /* Old browsers */ background: -moz-linear-gradient(top, rgba(223,110,165,1) 0%, rgba(211,54,130,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(223,110,165,1)), color-stop(100%,rgba(211,54,130,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(223,110,165,1) 0%,rgba(211,54,130,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(223,110,165,1) 0%,rgba(211,54,130,1) 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, rgba(223,110,165,1) 0%,rgba(211,54,130,1) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df6ea5', endColorstr='#d33682',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, rgba(223,110,165,1) 0%,rgba(211,54,130,1) 100%); /* W3C */ -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; border: 1px solid #a22361; border-top: 0 none; margin: 0; padding: 0; position: absolute; top: -999em; left: 0; width: 128px; -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.2); box-shadow: 3px 3px 3px rgba(0,0,0,0.2); font-size: 14px; } .sf-menu ul li { border-left: 1px solid #fff; border-right: 1px solid #fff; display: block; float: none; } .sf-menu ul li:last-child { border-bottom: 1px solid #fff; -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; } .sf-menu ul li:last-child 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; } .sf-menu li.sfHover li.sfHover, .sf-menu li:hover li:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .sf-menu li.sfHover li.sfHover { border-right-color: #cb2d79 } .sf-menu li li a { border: 0 none; padding: 14px; } .sf-menu li li:first-child a { padding-top: 0; } .sf-menu li li.sfHover a, .sf-menu li li:hover a { background: transparent; border: 0 none; color: #f8ddea; outline: 0; } .sf-menu li li a:hover { color: #f8ddea; } .sf-menu li.sfHover li a, .sf-menu li:hover li a { background: transparent; } .sf-menu li.sfHover li.sfHover a { background: #cb2d79; } .sf-menu li.sfHover ul, .sf-menu li:hover ul { left: -1px; top: 70px; /* match top ul list item height */ z-index: 99; } .sf-menu li li.sfHover, .sf-menu li li:hover { background: transparent; border-color: #fff; }Once again, this seems like a lot of CSS, but we still have that problem of having to write our declarations for each individual browser. The second level of menu items is also complicated by the need to override or undo any styles we applied to the top level of the menu that we don't want to apply here. For example, we applied a
floatproperty to all items at the top level of our menu, but we had to undo that for the second level of the menu.I'm sure you're starting to see why most of the support issues for the Superfish plugin are CSS related, rather than JavaScript related. There's a lot to keep track of here.
- Finally, we still have a third level of menu to style. Just like the second level, we need to undo any cascading styles that we don't want to apply. Add the following styles to your
styles.cssfile:/**** Level 3 ****/ ul.sf-menu li.sfHover li ul, ul.sf-menu li:hover li ul { background: #cb2d79; top: -999em; -webkit-border-radius: 7px; -webkit-border-top-left-radius: 0; -moz-border-radius: 7px; -moz-border-radius-topleft: 0; border-radius: 7px; border-top-left-radius: 0; } ul.sf-menu li.sfHover li ul li, ul.sf-menu li:hover li ul li { background: transparent; border: 0 none; } ul.sf-menu li li.sfHover ul, ul.sf-menu li li:hover ul { left: 9em; /* match ul width */ top: 0; } .sf-menu li.sfHover li.sfHover li a, .sf-menu li:hover li:hover li a { background: transparent; } .sf-menu li li li:first-child a { padding-top: 14px; } .sf-menu li li li a:hover { background: transparent; color: #fff; } /*** ARROWS ***/ .sf-sub-indicator { display: none; }
And take a deep breath, because we've finally reached the end of the CSS to create a custom style for the menu. Don't worry, this was a particularly complex design using lots of new CSS3 styles. If you pick something a bit simpler, it could be a lot less code that you'll have to create to get the style working.
The bonus of this CSS is that it will work even without enabling JavaScript. The Superfish plugin just enhances the menu and makes it more usable.
What just happened?
We wrote custom CSS to style our menu to match a design that we created. In order to get hover states working correctly, we had to remember to style both the :hover pseudoclass and the .sfHover class. We also had to dig into the cascading feature of CSS and decide which styles should cascade down through all levels of the menu and which should not. And finally, we had to keep in mind that newer CSS3 properties have to be declared in different ways for different browsers—for now, at least. All of this adds up to a drop-down menu requiring more custom CSS than you might expect at first. Just be patient and keep the cascade in mind as you work down through the levels of the menu.
Custom animation
Now that we've got the CSS for our custom style written, let's take a look at customizing the animation that shows the submenus. A sliding animation would be better suited to my menu style. The default animation is to fade the submenus in, but I'd rather override this default behavior and replace it with a sliding animation.