2 267 Скрипты / Menu & Nav

Icon Dock на CSS3

Icon Dock панель из иконок на чистом CSS. При наведении мышки на иконку происходит её увеличение.

HTML

<div class="dock">
    <ul>
        <!-- the fillers are needed to pad out the left side (as we have two nodes on both sides of the hovered node rising a little) -->
        <li class="filler"></li><li class="filler"></li><!--
        --><li><a href="#"><span>Компьютер</span><img src="img/1.png" alt="[1]" /></li><!--
        --><li><a href="#"><span>Мессенджер</span><img src="img/2.png" alt="[2]" /></li><!--
        --><li><a href="#"><span>Видеоплеер</span><img src="img/3.png" alt="[3]" /></a></li><!--
        --><li><a href="#"><span>Firefox</span><img src="img/4.png" alt="[4]" /></a></li><!--
        --><li><a href="#"><span>Музыка</span><img src="img/5.png" alt="[5]" /></a></li><!-- -->
        <li><a href="#"><span>Настройки</span><img src="img/6.png" alt="[6]" /></a></li>
        <li class="seperator"></li><!--
        --><li><a href="#"><span>Медиа</span><img src="img/7.png" alt="[7]" /></a></li><!--
        --><li><a href="#"><span>Видео</span><img src="img/8.png" alt="[8]" /></a></li><!--
        --><li><a href="#"><span>Документы</span><img src="img/9.png" alt="[8]" /></a></li><!--
        --><li><a href="#"><span>Корзина</span><img src="img/10.png" alt="[8]" /></a></li>
    </ul>
</div>

CSS

Скачать 712Загрузок 1,23 Mb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи