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

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

ОБСУЖДЕНИЕ

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

Вертикальное меню с плавным увеличением значков
Просмотров: 1217  Скачан: 198 раз  Комментариев в теме: 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>
Материалы по теме:

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

Красивое вертикальное меню, реализованное с помощью JavaScript...

Фиксированое меню (вертикальное и горизонтальное)Фиксированое меню (вертикальное и горизо...

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

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

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

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery

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

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

Horse ClubHorse Club

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

Mazaya v1.0Mazaya v1.0

Mazaya - это современная универсальная новостная тема с оригинальным дизайном и предусмотренным тёмным и светлым стилем....

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

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

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин «bxSlider», плагин постоянно усовершенствуется......

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

FlavorFlavor

Flavor - это мощная тема для wordpress которая укомплектована огромным функционалом и включает в себя все возможности для организации полноценного ин...

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

Неплохая социальная панель, при наведении курсора мыши, панель, плавно раскрывается, за тем уже видны сами иконки....
  • Текущий 1.57/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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