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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

Это отличная фото-галерея с довольно сильным функционалом....

Softdate Pro v1.3Softdate Pro v1.3

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

3D Контактная форма на css33D Контактная форма на css3

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

Kenburner слайдерKenburner слайдер v1.1

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

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi-Item...

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

Оригинальные кнопки с помощью css3Оригинальные кнопки с помощью css3

Оригинальные кнопки на css3, при наведении курсора на кнопку, она изменяет свой вид (растягивается, округляется, перекручивается)....

GridoGrido

Много функциональный шаблон Grido, шаблон обладает огромным набором возможностей его настройки....
  • Текущий 1.43/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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