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

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

ОБСУЖДЕНИЕ

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

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

Красивое горизонтальное меню с меняющимся фоном, когда вы переходите по категориям, фон автоматически меняется. Такие красивые эффекты смены фона происходят благодаря плагину 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>
Материалы по теме:

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

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

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

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

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

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

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

Меню в стиле Apple, созданное полностью на css3.

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

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

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

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

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

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

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

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

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery «Elas...

Красивая адаптивная карусель для вашего сайта, а если быть точнее, то это плагин «Elastislide», особенности такого плагина, заключаются в умении адапт...

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Infinite...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

Вертикальное разноцветное меню АккордеонВертикальное разноцветное меню Аккордеон

Красивое разноцветное меню (Аккордеон.

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

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

FlavorFlavor

Flavor - это мощная тема для wordpress которая укомплектована огромным функционалом и включает в себя все возможности для организации полноценного ин...
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

Комментариев в теме: (1)
↑ 0 ↓
Ольга
Google
Здравствуйте! Красивое меню. Подскажите как его можно растянуть на всю ширину экрана ?
Ответить Ответ с цитатой

Страницы: 1

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


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