Реализация выпадающего меню в Compass & jQuery

Question

Я оформляю сайт, используя Compass и jQuery. Каков наилучший способ оформления списка списков в виде горизонтального меню с выпадающим списком? Хороший пример такого меню можно увидеть здесь.

Answer 1

Я создал миксин, который использует все стили, необходимые для выпадающего меню в стиле кроссплатформенного 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.

Для получения дополнительной информации, ознакомьтесь с README в репозитории github и обязательно прочитайте это:

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