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

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

ОБСУЖДЕНИЕ

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

Горизонтальное меню на jQuery «Slick Menu»
Просмотров: 1275  Скачан: 198 раз  Комментариев в теме: 0

jQuery горизонтальное меню «Slick Menu» в довольно интересном стиле, меню раскидано в виде картинок, при навидении курсора мыши на картинку, появлюеться подпись к ней, а все остальные картинки становяться прозрачными.

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

 

HTML

<div class="container">
    <div id="slickmenu">
        <ul>
            <li><a href="#">
                <img src="images/item-01.jpg" alt="A fancy Apple.com-style search suggestion" />
            </a></li>
            <li><a href="#">
                <img src="images/item-02.jpg" alt="Creating a polaroid photo viewer with CSS3 and jQuery" />
            </a></li>
            <li><a href="#">
                <img src="images/item-03.jpg" alt="The iPhone Contacts App with CSS and jQuery" />
            </a></li>
            <li><a href="#">
                <img src="images/item-04.jpg" alt="20+ Wicked Proof of Concepts for Better use of jQuery/CSS" />
            </a></li>
            <li><a href="#">
                <img src="images/item-05.jpg" alt="The very best from the Behance Network" />
            </a></li>
        </ul>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jslickmenu.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#slickmenu").jSlickmenu();});
</script>
Материалы по теме:

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

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......

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

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

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню н...

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

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

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

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню н...

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

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Bo...

Меню в виде куба с красивым эффектом трансформации....

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

Меню в стиле Apple, созданное полностью на css3.
Интересные публикации:

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

Фиксированная контактная форма на css и JQueryФиксированная контактная форма на css и ...

Большинство контактных форм встречаемых на разных ресурсах, выглядят не очень то и захватывающе, по сути везде используются статичные формы, поэтому.....

Good Inc v1.2.1Good Inc v1.2.1

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

Скроллер картинокСкроллер картинок

Красивый скроллер для вашего сайта, имеет возможность прокручиваться как в левую сторону, так и в правую......

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню на css

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

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews 2.0»

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Форма обратной связи с админкой PHP, JS, CSS, MySQL, AJAXФорма обратной связи с админкой PHP, JS,...

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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