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

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

ОБСУЖДЕНИЕ

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

Горизонтальное меню с меняющимся фоном
Просмотров: 1338  Скачан: 238 раз  Комментариев в теме: 0

Красивое горизонтальное меню с меняющимся фоном, когда вы переходите по категориям, фон автоматически меняется. Такие красивые эффекты смены фона происходят благодаря плагину Easing, меню представлено в 11-ти примерах, все их вы найдёте в исходниках или же посмотрев демо.

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

 

HTML

<div id="sbi_container" class="sbi_container">
    <div class="sbi_panel" data-bg="images/4.jpg">
        <a href="#" class="sbi_label">About</a>
        <div class="sbi_content">
            <ul>
                <li><a href="#">Subitem</a></li>
                <li><a href="#">Subitem</a></li>
                <li><a href="#">Subitem</a></li>
            </ul>
        </div>
    </div>
    <div class="sbi_panel" data-bg="images/5.jpg">
        <a href="#" class="sbi_label">Menu</a>
        <div class="sbi_content">
            <ul>
                <li><a href="#">Subitem</a></li>
                <li><a href="#">Subitem</a></li>
                <li><a href="#">Subitem</a></li>
            </ul>
        </div>
    </div>
    <div class="sbi_panel" data-bg="images/8.jpg">
        <a href="#" class="sbi_label">Location</a>
        <div class="sbi_content">
            <ul>
                <li><a href="#">Subitem</a></li>
                <li><a href="#">Subitem</a></li>
                <li><a href="#">Subitem</a></li>
            </ul>
        </div>
    </div>
</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.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.bgImageMenu.js"></script>
<script type="text/javascript">
$(function() {
    $('#sbi_container').bgImageMenu({
        defaultBg: 'images/3.jpg',
        type: {
            mode: 'seqVerticalSlide',
            speed: 250,
            easing: 'jswing',
            seqfactor: 100
        }
    });
});
</script>
Материалы по теме:

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню н...

Горизонтальное многоуровневое фиксированного меню в темном стиле...

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

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

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

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

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

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

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

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

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

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

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

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

The RockThe Rock

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

Admin PanelAdmin Panel

Шаблон для панели администратора созданный на HTML5, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

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

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

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css3

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

3D Контактная форма на css33D Контактная форма на css3

Красивая контактная форма в довольно оригинальном стиле. Контактная форма имеет вид почтового конверта, когда вы кликаете по нём, он......

Kenburner слайдерKenburner слайдер v1.1

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

Социальная панель на css3Социальная панель на css3

Красивая раскрывающиеся социальная панель на css3 с использованием иконических шрифтов. При наведении курсора на значок, происходит раскрытие панели, ...
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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