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

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

5 голосов
/ 02 марта 2011

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

1 Ответ

6 голосов
/ 15 марта 2011

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

...