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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

Стильное горизонтальное меню с выдвижными иконками

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

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

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

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

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

Отличное горизонтальное выпадающее многоуровневое меню на css3....

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

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

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

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

Скроллер картинокСкроллер картинок

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

Games ThemeGames Theme

GamesTheme - мощная игровая тема для WordPress, в тёмном оформлении, тема полностью кроссбраузерная, seo оптимизированная......

Слайд эффект с помощью JavaScriptСлайд эффект с помощью JavaScript

Эффект в виде слайда, реализован с помощью javascript...

Mazaya v1.0Mazaya v1.0

Mazaya - это современная универсальная новостная тема с оригинальным дизайном и предусмотренным тёмным и светлым стилем....

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

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

The SameThe Same

Шикарный профессиональный html шаблон имеющий два стиля (светлый и тёмный), на главной странице используется стильный слайдер......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

Страницы: 1

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


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