Раздер Название темы Ответов Последний
Графика для сайта Shareman 3.70 RUS/2010 0 mandelsonsouggisse
Изготовление контента Нужен контент 10 ali7875
DataLife Engine Проблема регистрации. 1 JimaX
DataLife Engine Модальное окно в DataLife Engine 3 lionprizrak
DataLife Engine Настройка robots.txt 8 Prizrak_2012
Стол заказов на cmsko.ru Мини-чат. 2 JimaX
Общение пользователей Статьи 3 nastroenie
Хостинг TneHost - Хстинг провайдер 10 ali7875
DataLife Engine Установка банеров 9 JimaX
DataLife Engine Помогите с установой. dle95 2 nastroenie
Яндекс Apdate
Апдейты Яndex тИЦ
25.09.2013Последний |
02.07.2013
23.05.2013
Апдейты Яndex выдачи
18.10.2013Последний |
17.10.2013
12.10.2013
Апдейты ЯКаталога
23.10.2013Последний |
22.10.2013
21.10.2013

Информация
Главная страница » Для веб-мастера » Скрипты » Меню, которое привязано к курсору мыши
Меню, которое привязано к курсору мыши
» Просмотров: 1398 » Дата: 22-01-2011, 21:51 » Автор: NeoMurderer

Демо: 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">&uarr; Главная</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]




Комментарии: 0
 (голосов: 1)
Уважаемый посетитель, Вы зашли к нам на сайт как незарегистрированный пользователь. Мы рекомендуем Вам бесплатно зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.