Демо: cmsko.ru
Установка:
В теге head нужно присоединить к документу таблицу стилей для меню (malihu.cfm.css) и загрузить jquery.min.js (например, непосредственно с сайта Google) и jquery.easing.1.3.js, который добавить возможности для анимации переходов на странице.
<link href="malihu.cfm.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
В теге body вставляем разметку для меню:
<div id="cf_menu">
<div class="container">
<div class="title">НАЖМИ МЕНЯ</div>
<ul>
<li><a href="#home">↑ Главная</a></li>
<li><a href="#about"">Обо мне</a></li>
<li><a href="work">+ Портфолио</a>
<ul>
<li><a href="#recent">Недавние</a></li>
<li><a href="#web">Веб</a></li>
<li><a href="#print"">Печатные</a></li>
</ul>
</li>
<li><a href="#blog">Блог</a></li>
<li><a href="links">+ Интересные ссылки</a>
<ul>
<li><a href="#freebies">Ресурсы</a></li>
<li><a href="#people">Люди</a></li>
</ul>
</li>
<li><a href="#contact">Контакт</a></li>
</ul>
</div>
</div>
Достаточно простое двухуровневое меню, реализованное с помощью вложенных неупорядоченных списков.
Добавляем скрипт в конце документа перед закрывающим тегом body.
<script>
//, следующее за курсором - Конфигурация
$mouseover_title="+ МЕНЮ"; //Заголовок на плашке при наведении указателя мыши
$mouseout_title="НАЖМИ МЕНЯ"; //Заголовок на плашке в отсутствии указателя мыши
$menu_following_speed=2000; //Задержка, с которой меню следует за указателем (в миллисекундах)
$menu_following_easing="easeOutCirc"; //Эффект перехода
$menu_cursor_space=30; //Расстояние между указателем и меню
$menu_show_speed="slow"; //Скорость анимации открытия меню
$menu_show_easing="easeOutExpo"; //Тип перехода при открытии меню
$menu_hide_speed="slow"; //Скорость анимации закрытия меню
$menu_hide_easing="easeInExpo"; //Тип перехода при закрытии меню
</script>
<script src="malihu.jquery.cfm.js"></script>
Данный урок подготовлен командой сайта ruseller.com
Источник урока: manos.malihu.gr/cursor-following-menu
Исходники урока
[attachment=126:demo_848.zip]