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

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

ОБСУЖДЕНИЕ

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

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

Горизонтальное меню на css3 с замечательным эффектом....

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

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

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

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

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

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

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carousel»

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

VIP кнопка на css3VIP кнопка на css3

Красивая анимационная кнопка с эффектом блеска, при наведении курсора на кнопку, происходит красивая анимация на фоне кнопки....

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

Ещё один красивый чекбокс, который реалистично имитирует резиновые кнопки, ну или мягкие как их ещё называют....

Аккордеон изображенийАккордеон изображений с помощью css3

Красивый горизонтальный аккордеон для вывода изображений на сайте....

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

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

Сборка кнопок на cssСборка кнопок на css

Лёгкая подборка кнопок на css, в подборку вошли восемь разных кнопок созданных с помощью css....
  • Текущий 1.44/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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