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

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

ОБСУЖДЕНИЕ

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

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

Выпадающее меню на css3Выпадающее меню на css3

Красивое выпадающее меню с применением иконического шрифта, меню полностью на css3......

Раскрывающиеся горизонтальное меню на css и JQueryРаскрывающиеся горизонтальное меню ...

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

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

Горизонтальное меню на css3 с замечательным эффектом....

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Bo...

Меню в виде куба с красивым эффектом трансформации....

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

Красивое горизонтальное меню, используется изображения и анимация текста....

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

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

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Me...

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......
Интересные публикации:

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

Горизонтальное меню на css3 с замечательным эффектом....

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jquery

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

Кнопка с анимационным фоном на css3Кнопка с анимационным фоном на css3

Отличная кнопка на css3, кнопка реально классная и удобная, да и привлекает глаза посетителя....

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

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

GameleonGameleon

Gameleon – это отличная тема для создания игрового портала. Большой набор функций и гибкие настройки делают её очень удобной в использовании....

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

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

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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