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

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

ОБСУЖДЕНИЕ

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

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

Оригинальные кнопки на cssОригинальные кнопки на css

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

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

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

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

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

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

Сборка социальных кнопок на css3Сборка социальных кнопок на css3

Неплохая сборка социальных кнопок на css3, к кнопкам применён иконический шрифт....

Кнопка с ценником на css3Кнопка с ценником на css3

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......

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

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

Games ThemeGames Theme

GamesTheme - мощная игровая тема для WordPress, в тёмном оформлении, тема полностью кроссбраузерная, seo оптимизированная......

Текстовый слайдерТекстовый слайдер

Простой текстовый слайдер с прокруткой влево, вправо, не плохо подойдёт для вывода кратких новостей. Имеется три вида слайдера...

LibertyLiberty

Универсальный html шаблон Liberty, созданный с уклоном на интерьер, на главной странице располагается адаптированы слайдер с комментариями к изображен...

In Admin PanelIn Admin Panel

Неплохой html шаблон панели администратора, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

Социальная панель на css3Социальная панель на css3

Красивая раскрывающиеся социальная панель на css3 с использованием иконических шрифтов. При наведении курсора на значок, происходит раскрытие панели, ...

Горизонтальное меню на jQuery «Menu Kwicks»Горизонтальное меню на jQuery «Menu Kwic...

Стильное горизонтальное меню с выдвижными иконками
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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