RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Jquery меню горизонтальное с анимированным фоном
Просмотров: 2689  Скачан: 504 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

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

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

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

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

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

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

Красивое меню, с меняющимся фоном, когда вы переходите по категориям, фон автоматически......

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

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

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

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

Horse ClubHorse Club

Лёгкий html шаблон в тёмных тонах, посвящённый верховой езде и всему что с этим связано. В шаблоне имеется красивый слайдер и галерея......

Good Inc v1.2.1Good Inc v1.2.1

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

Галерея на PHP и JqueryГалерея на PHP и Jquery

Галерея на php и jquery. PHP даёт некие привилегии перед обычным html кодом, например вам как правило приходиться...

Paris ClarkParis Clark

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

Слайдер на css3 и jqueryСлайдер на css3 и jquery

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

OblivionOblivion

Oblivion - это отличное решение для создания игрового портала с обзорами компьютерных игр и т.д....

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

Красивая адаптивная карусель для вашего сайта, а если быть точнее, то это плагин «Elastislide», особенности такого плагина, заключаются в умении адапт...
  • Текущий 1.54/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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