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

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

ОБСУЖДЕНИЕ

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

Социальное меню с подписью на css
Просмотров: 1631  Скачан: 206 раз  Комментариев в теме: 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]-->
Материалы по теме:

Сборка кнопок #2 на css3Сборка кнопок #2 на css3

В сборку вошли 12 неплохих кнопок на css. Кнопки работают в браузерах OPERA, Firefox, Chrome, IE....

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

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

Mega Web Buttons PackMega Web Buttons Pack

Mega Pack кнопок на css, в паке собрано около 40-ка кнопок с разными иконками....

Радиоактивные кнопкиРадиоактивные кнопки

Красивые кнопки с эффектом радиации. Так, как на данный момент не все браузеры поддерживают свойство webkit, то такой эффект будет работать только......

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

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

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

Неплохая социальная панель, при наведении курсора мыши, панель, плавно раскрывается, за тем уже видны сами иконки....

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

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

Web StoreWeb Store

Шаблон интернет магазина Web Store, в шаблоне имеется готовое решение для корзины, детального просмотра товара и каталога,...

GameleonGameleon

Gameleon – это отличная тема для создания игрового портала. Большой набор функций и гибкие настройки делают её очень удобной в использовании....

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде слайде...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

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

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

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

Ещё один красивый чекбокс, который реалистично имитирует резиновые кнопки, ну или мягкие как их ещё называют....

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

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

Games ThemeGames Theme

GamesTheme - мощная игровая тема для WordPress, в тёмном оформлении, тема полностью кроссбраузерная, seo оптимизированная......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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