在 Compass & 中实现下拉菜单jQuery

发布于 2024-10-19 19:40:01 字数 271 浏览 1 评论 0原文

我正在使用 Compass 和 jQuery。将列表列表样式设置为带下拉菜单的水平菜单的最佳方法是什么？此处可以看到此类菜单的一个很好的示例。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

稳稳的幸福 2024-10-26 19:40:01

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

https://github.com/adaambom/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 存储库中的自述文件，并务必阅读以下内容：

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

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/

回复收藏 0 原文

~没有更多了~