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

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

ОБСУЖДЕНИЕ

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

Вертикальное меню следующее за курсором
Просмотров: 1826  Скачан: 180 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

Вертикальное меню с прокруткой на JQueryВертикальное меню с прокруткой на JQuery

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

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

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

Фиксированое меню (вертикальное и горизонтальное)Фиксированое меню (вертикальное и горизо...

Неплохое фиксированное меню для вашего сайта, меню может быть горизонтальным и вертикальным......

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

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

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

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......

Кнопки с градиентом на css3Кнопки с градиентом на css3

Кнопки с градиентом, такие кнопки можно встретить довольно часто......

Горизонтальное мульти менюГоризонтальное мульти меню

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

Шаблон Dual FlowШаблон Dual Flow

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть галерея, выпадающее меню, форма обратной связи с Google Maps......

Web HostingWeb Hosting

Современный html шаблон хостинг провайдера с готовым набором нужных страниц, имеется таблица тарифных планов, контактная форма....

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

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

VIP кнопка на css3VIP кнопка на css3

Красивая анимационная кнопка с эффектом блеска, при наведении курсора на кнопку, происходит красивая анимация на фоне кнопки....
  • Текущий 1.43/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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