Add this mixin to your compass projects to easily add the styles to create a mult-level dropdown menu in the style of suckerfish
Title: SASS (SCSS) Suckerfish Dropdown Mixin
Author: Adam Savitzky Email: [email protected]
SCSS port of CSS at http://htmldog.com/articles/suckerfish/dropdowns/ Built with compass http://www.compass-style.org Generates the styles for suckerfish dropdowns
Pass in the parameters $topLevelWidth and $lowerLevelWidth. The former controls the width of the first level, i.e. the visible level. The lower level is the width of the sub-levels, which get exposed on hover.
Call this mixin with @import suckerfish(topLevelWidth, lowerLevelWidth), then style it as needed.
If you need more levels, then you will need to customize it.
To override any of these styles, place your code after the @import directive.
For IE 6 compatibility, you must add javascript that attaches .sfhover class to mouseover. A sample function is included as sfhover.js.
This will handle up to three levels of dropdowns.
Be sure to minify before deploying to production.
How to install (It's EZ):
<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
<!-- etc. -->