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

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

ОБСУЖДЕНИЕ

Социальное меню с подписью

Социальное меню с подписью на css
Просмотров: 1607  Скачан: 205 раз  Комментариев в теме: 0

Красивое социальное меню на css подойдёт для сайта любой тематики, при наведении курсора на иконку, она плавно прокручивается, одновременно с анимацией иконки плавно появляется подпись.

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

 

HTML

<div id="content">
    <div class="menu">
        <ul class="primary-menu">
            <li class="facebook">
                <a class="social-item" href="#">f</a>
                <span class="social-span">Присоединяйтесь к нам на Facebook</span>
            </li>
            <li class="twitter">
                <a class="social-item" href="#">t</a>
                <span class="social-span">В Twitter</span>
            </li>
            <li class="flickr">
                <a class="social-item" href="#">c</a>
                <span class="social-span">Добавьте нас в Flickr</span>
            </li>
            <li class="rss">
                <a class="social-item" href="#">a</a>
                <span class="social-span">Следите за нами через RSS</span>
            </li>
            <li class="mail">
                <a class="social-item" href="#">k</a>
                <span class="social-span">Подпишитесь на уведомления через почту</span>
            </li>
        </ul>
    </div>
</div>

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

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if lt IE 9]>
    <style>
        .primary-menu li span {
            display:none; background:#ffffff !important; 
        }
            .primary-menu li a:hover ~ span {
                display:block;  
        }
    </style>
<![endif]-->
Материалы по теме:

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......

Социальное меню с подписью на css3Социальное меню с подписью на css3

Стильное социальное меню на css3, при наведении на иконку, она плавно прокручивается, одновременно с анимацией иконки, плавно появляется подпись....

VIP кнопка на css3VIP кнопка на css3

Красивая анимационная кнопка с эффектом блеска, при наведении курсора на кнопку, происходит красивая анимация на фоне кнопки....

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

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

Кнопки для вашего сайта на css3Кнопки для вашего сайта на css3

Неплохие кнопки для вашего сайта на css3, кнопки разного цвета и размера (голубой, розовый, зелёный, оранжевый)....

Сборка кнопок на cssСборка кнопок на css

Лёгкая подборка кнопок на css, в подборку вошли восемь разных кнопок созданных с помощью css....

Блок на CSS3 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансфор...

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....
Интересные публикации:

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

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

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

Фиксированная панель с навигацией на css3Фиксированная панель с навигацией на css...

Панель фиксируется внизу страницы и имеет не большую навигацию, что очень удобно если вам нужно вывести какие то важные ссылки или информацию....

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

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

HTML шаблон ImagoHTML шаблон Imago

Современный бизнес шаблон HTML с превосходным дизайном, который представлен в 16 различных шаблонах....

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

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

Вертикальное мульти-меню неплохое решение если вам нужно вывести на сайте огромного количества пунктов......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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