在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/