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

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

ОБСУЖДЕНИЕ

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

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

Отличное горизонтальное меню с большое количество пунктов....

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

Меню с выпадающими пунктами на css

Jquery меню горизонтальноеJquery меню горизонтальное с анимир...

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....

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

Стильное горизонтальное меню с ползунком, который следует за курсором мыши....

Горизонтальное меню с меняющимся фономГоризонтальное меню с меняющимся фо...

Красивое меню, с меняющимся фоном, когда вы переходите по категориям, фон автоматически......

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

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

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

Стильное горизонтальное меню с выдвижными иконками
Интересные публикации:

XMarket v1.1XMarket v1.1

XMarket - это премиум шаблон интернет магазина для любого вида продукции, один из самых мощных и гибких на сегодняшний день....

Слайдер в стиле AppleСлайдер в стиле Apple

Стильный слайдер в стиле Apple на css и jquery, в слайдере используется красивый эффект перехода между категориями....

Кнопка с ценником на css3Кнопка с ценником на css3

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......

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

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

Стильная форма пошаговой установкиСтильная форма пошаговой установки

Это комплект пошаговой установки, которая состоит из четырёх этапов и включает в себя проверку полей....

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

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

DecadenceDecadence

Очень красивый универсальный шаблон Decadence на историческую тему, построенный на HTML5, в шаблоне имеется выпадающее меню......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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