Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

6. Building an Interactive Navigation Me... > Time for action – customizing Superf...

Time for action – customizing Superfish menus

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.

  1. 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.css file:
    /**** Level 1 ****/
    .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....

    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.


You are currently reading a PREVIEW of this book.


Get instant access to over $1 million worth of books and videos.


Start a Free 10-Day Trial

  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint