kit

Создание выпадающего Twitter меню на jQuery

Twitter делает хорошие вещи на JavaScript. Ценно то, что программисты этой компании не делают какого-то мудренного JavaScript кода. Их реализации, как всегда, удобны и легки.

Одной из таких функциональностей является выпадающее меню “Login” в домашней странице.

Попробуем сделать что-то подобное на jQuery.

HTML

CSS

CSS кода достаточно много, но его большинство относится к визуальному стилю, а не к дизайну, ради JavaScript.

Отметим, что применяется и относительное и абсолютное позиционирование. Внешний DIV может быть позиционирован абсолютно.

Также обратите внимание, что ничего не сделано относительно закругленных углов в IE — рекомендуем DD_Roundies хак.

jQuery

Мы прокомментировали код для иллюстрации того, что делает каждый блок . В двух словах:

  • Созданы переменые, следящие за состоянием меню (закрыто, открыто). Отключена функциональность раскрытия сразу двух меню.
  • Мы прошлись по всему списку меню и добавили соответствующик события к элементам, чтоыб показать и скрыть меню.
  • Добавлено событие в body, чтобы закрыть меню, если пользователь щелкнул не в зону меню.

Вот и все!

Пример


Оставить комментарий