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

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

ОБСУЖДЕНИЕ

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

Горизонтальное анимированое меню с помощью JQuery
Просмотров: 1057  Скачан: 208 раз  Комментариев в теме: 0

Красивое горизонтальное анимированое меню на JQuery, с довольно красивой анимацией работающей в связке изображения и текст, такое меню отлично подойдёт к современному дизайну сайта, думаю многим оно будет по душе. Имеется 8 примеров с разными эффектами, которыми вы можете воспользоваться.

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

 

HTML

<div class="container">
    <ul id="sti-menu" class="sti-menu">
        <li data-hovercolor="#37c5e9">
            <a href="#">
                <h2 data-type="mText" class="sti-item">Advanced Patient Care</h2>
                <h3 data-type="sText" class="sti-item">Personalized to your needs</h3>
                <span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
            </a>
        </li>
        <li data-hovercolor="#ff395e">
            <a href="#">
                <h2 data-type="mText" class="sti-item">Alternative Medicine</h2>
                <h3 data-type="sText" class="sti-item">Holistic approaches</h3>
                <span data-type="icon" class="sti-icon sti-icon-alternative sti-item"></span>
            </a>
        </li>
        <li data-hovercolor="#57e676">
            <a href="#">
                <h2 data-type="mText" class="sti-item">Modern Info Center</h2>
                <h3 data-type="sText" class="sti-item">Educating you</h3>
                <span data-type="icon" class="sti-icon sti-icon-info sti-item"></span>
            </a>
        </li>
        <li data-hovercolor="#d869b2">
            <a href="#">
                <h2 data-type="mText" class="sti-item">Future Family Planning</h2>
                <h3 data-type="sText" class="sti-item">For a healthier future</h3>
                <span data-type="icon" class="sti-icon sti-icon-family sti-item"></span>
            </a>
        </li>
        <li data-hovercolor="#ffdd3f">
            <a href="#">
                <h2 data-type="mText" class="sti-item">Advanced Technology</h2>
                <h3 data-type="sText" class="sti-item">From the latest research</h3>
                <span data-type="icon" class="sti-icon sti-icon-technology sti-item"></span>
            </a>
        </li>
    </ul>
</div>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.iconmenu.js"></script>
<script type="text/javascript">
$(function() {
    $('#sti-menu').iconmenu({
        animMouseenter: {
            'mText' : {speed : 400, easing : 'easeOutExpo', delay : 140, dir : -1},
            'sText' : {speed : 400, easing : 'easeOutExpo', delay : 280, dir : -1},
            'icon'  : {speed : 400, easing : 'easeOutExpo', delay : 0, dir : -1}
        },
        animMouseleave: {
            'mText' : {speed : 400, easing : 'easeInExpo', delay : 140, dir : -1},
            'sText' : {speed : 400, easing : 'easeInExpo', delay : 0, dir : -1},
            'icon'  : {speed : 400, easing : 'easeInExpo', delay : 280, dir : -1}
        }
    });
});
</script>
Материалы по теме:

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

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

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

Горизонтальное меню в темном стиле с выпадающими пунктами....

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

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

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

Фиксированная панель с навигацией на css3Фиксированная панель с навигацией н...

Панель фиксируется внизу страницы и имеет не большую навигацию, что очень удобно если вам нужно вывести какие то важные ссылки или информацию....

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

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

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бум...

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

Форма регистрации html с валидациейФорма регистрации html с валидацией

Форма регистрации на сайте это неотъемлемая его часть, но ведь не менее важен и дизайна формы, в данном примере......

CharismaCharisma

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

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

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

Социальные иконки на css3Социальные иконки на css3

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

Web HostingWeb Hosting

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

Галерея на jQueryГалерея на jQuery

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

Full галерея на jQueryFull галерея на jQuery

Отличная галерея созданная с помощью Jquery и является одной с лучших полно-экранных галерей. В галерее красиво происходит переход с......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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