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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

Неплохое горизонтальное меню с выдвигающимися иконками. Когда вы переходите по навигации, иконки......

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

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

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

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

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

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

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

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

Прозрачная контактная форма на css3Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid Navig...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

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

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

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

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

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

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews 2.0»

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

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

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

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


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