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

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

ОБСУЖДЕНИЕ

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

Вертикальное меню следующее за курсором
Просмотров: 1914  Скачан: 195 раз  Комментариев в теме: 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 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery

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

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

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

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

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

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

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

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

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

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

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

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

Горизонтальное меню на jQuery «Menu Kwicks»Горизонтальное меню на jQuery «Menu Kwic...

Стильное горизонтальное меню с выдвижными иконками

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......

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

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

Admin PanelAdmin Panel

Шаблон для панели администратора созданный на HTML5, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изображе...

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

Обратная связь на PHP и JQuery «LightForm»Обратная связь на PHP и JQuery «LightFor...

Стильная обратная связь ( LightForm) на PHP, Ajax и JQuery. Форма использует FormCheck2 для проверки полей , NiceForms для стилей текстовых полей и.....
  • Текущий 1.38/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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