Implementing a dropdown menu in Compass & jQuery

Question

I'm styling a website using Compass and jQuery. What is the best way for styling a list of lists as a horizontal menu with dropdown? A good example of such a menu can be seen here.

Answer 1

I've created a mixin that pulls in all the styles needed for suckerfish style cross-browser dropdown menus. Here is the link:

https://github.com/adambom/sucker-compass

Just add a reference to _suckerfish.scss:

@import "partials/suckerfish"  
 /* You can put this in any directory. 
    It doesn't have to be partials" */

Assuming you have an unordered list stored in a div called #navigation, add the following scss to your main stylesheet:

#navigation {
    /* The parameters determine the width of
       the top, and lower level navigation elements, respectively */
    @include suckerfish(10em, 12em);
}

If you want to support IE6, make sure to include the provide sfhover.js file. After that (make sure to compile your project), you should have a working dropdown menu. Not bad for 4 lines of code. You should add any styles to your dropdown within the navigation declaration. You can use CSS or SCSS.

For more info, check out the README in the github repo, and definitely give this a read:

http://htmldog.com/articles/suckerfish/dropdowns/