qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Вертикальное многоуровневое меню

Вертикальное меню следующее за курсором
Просмотров: 1999  Скачан: 205 раз  Комментариев в теме: 0

Многоуровневое вертикальное меню, роботает оно довольно интересным образом, меню привязываеться к указателю мыши и следует за ним куда бы вы не навели курсор. При нажатии на кнопку (меню), открываються пункты, при повторном нажатию на пункт, открываються подпункты.

Шаг 1 - создание разметки

 

HTML

<div id="cf_menu">
    <div class="container">
        <div class="title">НАЖМИ МЕНЯ</div>
        <ul>
            <li><a href="#">↑ Главная</a></li>
            <li><a href="#">Обо мне</a></li>
            <li><a href="work">+ Портфолио</a>
                <ul>
                    <li><a href="#">Недавние</a></li>
                    <li><a href="#">Веб</a></li>
                    <li><a href="#">Печатные</a></li>
                </ul>
            </li>
            <li><a href="#">Блог</a></li>
            <li><a href="links">+ Интересные ссылки</a>
                <ul>
                    <li><a href="#">Ресурсы</a></li>
                    <li><a href="#">Люди</a></li>
                </ul>
            </li>
            <li><a href="#">Контакт</a></li>
        </ul>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" >

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-2.0.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
$mouseover_title="+ МЕНЮ";             //Заголовок при наведении указателя мыши
$mouseout_title="НАЖМИ МЕНЯ";          //Заголовок в отсутствии указателя мыши
$menu_following_speed=2000;            //Задержка, с которой меню следует за указателем (в миллисекундах)
$menu_following_easing="easeOutCirc";  //эффект easing
$menu_cursor_space=30;                 //Расстояние между указателем и меню
$menu_show_speed="slow";               //Скорость анимации открытия меню
$menu_show_easing="easeOutExpo";       //Тип перехода при открытии меню
$menu_hide_speed="slow";               //Скорость анимации закрытия меню
$menu_hide_easing="easeInExpo";        //Тип перехода при закрытии меню
</script>
Материалы по теме:

Прозрачный аккордеон с помощью css и jqueryПрозрачный аккордеон с помощью css и jqu...

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

Многоуровневое меню, работает оно довольно интересным образом, меню привязывается к......

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

Вертикальное разноцветное меню АккордеонВертикальное разноцветное меню Аккордеон

Красивое разноцветное меню (Аккордеон.

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery
Интересные публикации:

Социальное меню с подписью на css3Социальное меню с подписью на css3

Стильное социальное меню на css3, при наведении на иконку, она плавно прокручивается, одновременно с анимацией иконки, плавно появляется подпись....

GridoGrido

Много функциональный шаблон Grido, шаблон обладает огромным набором возможностей его настройки....

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на css

Выпадающее меню в темном стиле, реализованное полностью на css...

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

Фиксированная контактная форма на css и JQueryФиксированная контактная форма на css и ...

Большинство контактных форм встречаемых на разных ресурсах, выглядят не очень то и захватывающе, по сути везде используются статичные формы, поэтому.....

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

Картинки расположены в ряд по сетке с наложенным на них затемнением, при наведении курсора на картинку, затемнение......

PHP скрипт комментариевСкрипт комментариев

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....
  • Текущий 1.33/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.3/5( Голосов 9 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить