在Compass和jQuery中实现下拉菜单

Question

我正在使用Compass和jQuery设计一个网站.将列表列表设置为带下拉列表的水平菜单的最佳方法是什么？这里可以看到这种菜单的一个很好的例子.

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" */

假设您有一个存储在名为#navigation的div中的无序列表,请将以下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 repo中的README,并且明确地将其读取:

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