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

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

ОБСУЖДЕНИЕ

Вертикальное меню с значками

Вертикальное меню с плавным увеличением значков
Просмотров: 1391  Скачан: 210 раз  Комментариев в теме: 0

Красивое вертикальное меню для сайта с анимацией плавным увеличением значков. Реализованое с помощью JavaScript, суть в том, когда вы наводите курсор мыши на иконку, она плавно увеличиваеться (как бы пузырём), захватывая за собой отальные две находяшиеся рядом. Меню отлично работает во всех браузерах включая IE.

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

 

HTML

<div id="dockContainer">
    <ul id="jqDock">
        <li><a class="dockItem" href="#"><img src="images/1.png" alt="Home" title="Example 1" /></a></li>
        <li><a class="dockItem" href="#"><img src="images/2.png" alt="Contact" title="Example 2" /></a></li>
        <li><a class="dockItem" href="#"><img src="images/3.png" alt="portfolio" title="Example 3" /></a></li>
        <li><a class="dockItem" href="#"><img src="images/4.png" alt="music" title="All Examples" /></a></li>
        <li><a class="dockItem" href="#"><img src="images/5.png" alt="video" title="Video" /></a></li>
        <li><a class="dockItem" href="#"><img src="images/6.png" alt="history" title="History" /></a></li>
        <li><a class="dockItem" href="#"><img src="images/7.png" alt="calendar" title="Calendar" /></a></li>
        <li><a class="dockItem" href="#"><img src="images/8.png" alt="links" title="Links" /></a></li>
        <li><a class="dockItem" href="#"><img src="images/9.png" alt="rss" title="RSS" /></a></li>
        <li><a class="dockItem" href="#"><img src="images/10.png" alt="rss" title="RSS" /></a></li>
    </ul>
</div>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.jqDock.min.js"></script>
<script type="text/javascript">
$(function(){
    var jqDockOpts = {align: 'left', duration: 200, labels: 'tc', size: 48, distance: 85};
    $('#jqDock').jqDock(jqDockOpts);
});
<script>
Материалы по теме:

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......

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

Вертикальное меню в разноцветном стиле, полностью на css3, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......

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

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

Вертикальное мульти менюВертикальное мульти меню

Вертикальное мульти-меню неплохое решение если вам нужно вывести на сайте огромного количества пунктов......

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

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

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

Вертикальное меню на css3 с применением иконических шрифтов......
Интересные публикации:

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прогресс ...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....

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

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

Форма регистрации html с валидациейФорма регистрации html с валидацией

Форма регистрации на сайте это неотъемлемая его часть, но ведь не менее важен и дизайна формы, в данном примере......

Слайдер на css3 и jqueryСлайдер на css3 и jquery

Очень красивый слайдер с мини навигацией внизу, в навигации виден текст (комментария к слайдеру, названия открытой картинки, предыдущей и следующей), ...

XMarket v1.1XMarket v1.1

XMarket - это премиум шаблон интернет магазина для любого вида продукции, один из самых мощных и гибких на сегодняшний день....

KroftKroft

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть возможность менять фон сайта непосредственно на странице......
  • Текущий 1.44/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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