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

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

ОБСУЖДЕНИЕ

Jquery меню с анимированным фоном

Jquery меню горизонтальное с анимированным фоном
Просмотров: 3241  Скачан: 545 раз  Комментариев в теме: 0

Если вы ищите простое Jquery меню для своего сайта при этом, что бы меню не было однотипным а обладало каким то разнообразием, в таком случае присмотритесь к представленному варианту с анимированным фоном. Меню представлено в трёх вариантах на ваш выбор, при переходе по пунктам меню, происходит эффект изменения фона (своего рода слайдшоу), выглядит такой эффект вполне красиво, также в меню можно выводить текст с описанием разделов.

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

 

HTML

<div id="menu3" class="abmenu">
    <ul>
        <li class="black2" bgsrc="images/img/bw5.jpg"><a href="#">Главная</a></li>
        <li class="black2" bgsrc="images/img/bw4.jpg"><a href="#">Марс</a>
            <span>
                <h3>Информация</h3>
                <p><img style="float:left; margin: 5px;" src="images/img/bw1_small.jpg"/>
                Ваше опимание.
                </p>
            </span>
        </li>
        <li class="black2" bgsrc="images/img/bw5.jpg"><a href="#">Интересно</a>
            <ul class="black">
                <li style="width: 120px;">
                    <p style="float:left;">
                        <a href="#">Искусство</a><br/>
                        <a href="#">Мода</a><br/>
                        <a href="#">Дизайн</a><br/>
                    </p>
                    <p style="float:right;">
                        <a href="#">Стиль</a><br/>
                        <a href="#">Красота</a><br/>
                    </p>
                 </li>
            </ul>			
            <span>  
                <h3>Интересно</h3>
                <p><img style="float:left; margin: 5px;" src="images/img/bw2_small.jpg"/>
                Ваше опимание.
                </p>
            </span>
        </li>
        <li class="black2" bgsrc="images/img/bw1.jpg"><a href="#">Контакты</a>
            <ul class="black">
                <li><a href="#">Почта</a></li>
            </ul>
            <span>
                <h3>Интересно</h3>
                <p>Ваше опимание.</p>
            </span>
        </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.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.abmenu.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#menu3').abmenu({bgOffsetLeft:'-7px',bgOffsetTop:'-7px',bgAnimationTime:1,smTopPosition:'auto',menuTopPosition:0.2});
});
</script>
Материалы по теме:

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

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

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

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

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

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

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Me...

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......

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

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

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся мен...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

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

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

Sooshal v2.4Sooshal v2.4

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

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

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

Paris ClarkParis Clark

Красивый html шаблон Paris Clark, на главной странице используется привлекательный слайдер, имеется портфолио, контактная форма......

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

Good Inc v1.2.1Good Inc v1.2.1

Стильный журнальный шаблон для WordPress в светлом минималистском стиле....

Кнопка с подтекстом на css3Кнопка с подтекстом на css3

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......

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

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

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

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

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


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