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

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

ОБСУЖДЕНИЕ

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

Горизонтальное меню на jQuery «Slick Menu»
Просмотров: 1043  Скачан: 177 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

Горизонтальное анимированое меню с помощью JQueryГоризонтальное анимированое меню с ...

Красивое горизонтальное меню, используется изображения и анимация текста....

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

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

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

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

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

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

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

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

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

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

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

SonjaSonja

Шаблон Sonja построенный на HTML5, в шаблоне красиво реализована главная страница, имеется оригинальная галерея, стрелка вверх, видео проигрыватель......

Выпадающее меню на css3Выпадающее меню на css3

Красивое выпадающее меню с применением иконического шрифта, меню полностью на css3......

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

ChromeGTChromeGT

Оригинальный html шаблон ChromeGT имеющий 5 цветовых стилей, галерею с миниатюрами, красивый слайдер в трёх видах (изображения, контент, 3D (Flash), с...

Кнопка с ценником на css3Кнопка с ценником на css3

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......

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

Меню с выпадающими пунктами на css
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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