在 Compass 和 jQuery 中实现下拉菜单

Posted 2023-03-06

【中文标题】在 Compass 和 jQuery 中实现下拉菜单

【英文标题】：Implementing a dropdown menu in Compass & jQuery

【发布时间】：2011-07-07 08:31:11

【问题描述】：

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

【参考方案1】：

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

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 存储库中的 README，并一定要阅读：

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