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

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

ОБСУЖДЕНИЕ

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

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

Выпадающее меню в темном стиле, реализованное полностью на css...

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

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

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

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

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

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

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

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

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

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

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

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

Magic BoxMagic Box

Лёгкий html шаблон в тёмных тонах сделанный в виде блога, в шапке встроенный довольно привлекательный слайдер......

Обратная связь на PHP и JQuery «LightForm»Обратная связь на PHP и JQuery «LightFor...

Стильная обратная связь ( LightForm) на PHP, Ajax и JQuery. Форма использует FormCheck2 для проверки полей , NiceForms для стилей текстовых полей и.....

Horse ClubHorse Club

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

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

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

Web StoreWeb Store

Шаблон интернет магазина Web Store, в шаблоне имеется готовое решение для корзины, детального просмотра товара и каталога,...

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

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

Социальная панель на css3Социальная панель на css3

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

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

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

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


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