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

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

ОБСУЖДЕНИЕ

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

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

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

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

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

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

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

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

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

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

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

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

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

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

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

Оригинальные кнопки на cssОригинальные кнопки на css

Красивые кнопки, прекрасно подойдут любому сайту, все сделано на чистом css....

BuddyBuddy

Buddy - это современный, отвечающий всем требованиям шаблон для WordPress с полной интеграцией и поддержкой BuddyPress....

Music v1.4.3Music v1.4.3

Music - это шаблон музыкального портала для wordpress с уникальным набором функций и настроек....

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

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

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

Выпадающее меню в темном стиле, реализованное полностью на css...
  • Текущий 1.56/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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