главная

Теги:


Меню, которое привязано к курсору мыши

В данном уроке демонстрируется интересная идея навигации по сайту. Замысел скрипта заключается в том, чтобы создать плавающее меню, которое следует за указателем мыши и разворачивается при наведении указателя на него. Цель - сделать так, чтобы меню занимало как можно меньше, но в то же время было всегда под рукой, чтобы пользователь мог задействовать его в любой удобный момент. В результате получилась достаточно простая разметка двухуровневого меню, внешний вид которого легко изменить с помощью CSS. Дополнительной опцией является анимированное перемещение по ссылке на странице.

Как его использовать

В теге head нужно присоединить к документу таблицу стилей для меню (malihu.cfm.css) и загрузить jquery.min.js (например, непосредственно с сайта Google) и jquery.easing.1.3.js, который добавить возможности для анимации переходов на странице.



В теге body вставляем разметку для меню:

 

 

Достаточно простое двухуровневое меню, реализованное с помощью вложенных неупорядоченных списков. Добавляем скрипт в конце документа перед закрывающим тегом body.

 

 


	

Изменяя значения переменных можно быстро настроить работы скрипта.

Полный код скрипта находится в исходниках. Сложного в нем нет ничего, поэтому код можно легко модифицировать так, как потребуется по замыслу проекта.

Урок Создан:2011-02-04 Просмотров:4490

Добавить комментарий:


Copyright© 2009 Hosted by Zhost