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

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

ОБСУЖДЕНИЕ

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

Горизонтальное анимированое меню с помощью JQuery
Просмотров: 906  Скачан: 168 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

Многоуровневое горизонтальное меню на css3Многоуровневое горизонтальное меню ...

Отличное горизонтальное выпадающее многоуровневое меню на css3....

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

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

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

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

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

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

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

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

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

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

ZeniZeni

Красивый шаблон построенный на html5 для блога или портфолио, на главной странице расположен привлекательный слайдер......

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

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

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

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

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

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

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro - jQu...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

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

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

Cumico v1.4Cumico v1.4

Универсальная премиум тема для WordPress с адаптивной вёрсткой и стильным дизайном. Возможность подключить Woocommerce это идеальное решение для......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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