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

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

ОБСУЖДЕНИЕ

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

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

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

Вертикальное меню в разноцветном стиле, полностью на css3, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....

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

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

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

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

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

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

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

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......

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

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

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......
Интересные публикации:

Набор градиентных кнопок на css3Набор градиентных кнопок на css3

Неплохой набор кнопок, в нем вы найдёте кнопки разного цвета, (округлённые, прямоугольные, маленькие)....

Sell v1.4.1Sell v1.4.1

Sell - это ещё одна довольно гибкая универсальная тема для создания интернет магазина на WordPress с использованием WooCommerce....

Скроллер картинокСкроллер картинок

Красивый скроллер для вашего сайта, имеет возможность прокручиваться как в левую сторону, так и в правую......

Кнопки для вашего сайта на css3Кнопки для вашего сайта на css3

Неплохие кнопки для вашего сайта на css3, кнопки разного цвета и размера (голубой, розовый, зелёный, оранжевый)....

Красивая форма обратной связи на PHP, CSS, JQueryКрасивая форма обратной связи на PHP, CS...

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилиз...

VLDPersonals v2.7VLDPersonals v2.7

VLDPersonals - это функциональный движок с огромным количеством возможностей, который вмещает в себе социальную сеть и сайт знакомств....

ZeniZeni

Красивый шаблон построенный на html5 для блога или портфолио, на главной странице расположен привлекательный слайдер......
  • Текущий 1.30/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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