在Compass＆jQuery中实现下拉菜单

Question

我在使用Compass和jQuery设计网站。使用下拉列表将列表作为水平菜单的最佳方式是什么？这种菜单的一个很好的例子可以参见here。

Answer 1

我创建了一个mixin，它引入了所有suckerfish风格的跨浏览器下拉菜单所需的样式。这里是链接：

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

只需添加一个参考_suckerfish.scss：

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

假设你有存储在一个div称为#navigation无序列表，下面SCSS添加到您的主要样式表：

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

如果您要支持IE6，请确保包含提供sfhover.js文件。之后（确保编译你的项目），你应该有一个有效的下拉菜单。对于4行代码来说不错。您应该在导航声明中向您的下拉列表添加任何样式。您可以使用CSS或SCSS。

欲了解更多信息，请在GitHub库中的自述，肯定给这个读：

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