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

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

ОБСУЖДЕНИЕ

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

Социальная выпадающая панель на css
Просмотров: 1857  Скачан: 212 раз  Комментариев в теме: 0

Неплохая социальная панель для сайта на css с довольно интересным эффектом, панель может быть выпадающая или выезжающая. При наведении курсора мыши, панель плавно раскрывается, за тем уже видны сами иконки. Панель может работать как в горизонтальном положении, так и в вертикальном. Социальная панель работает во всех браузерах включая IE 6.

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

 

HTML разметка - горизонтальная панель (малые кнопки)

<div id='mintshare_mini'>
    <a class='sharetext'><b>Share This</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class='flyout'>
        <ul class='icons'>
            <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/smallest/facebook_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
            <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/smallest/twitter_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
            <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/smallest/stumbleupon_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
            <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/smallest/digg_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
            <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/smallest/technorati_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
            <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/smallest/reddit_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
            <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/smallest/yahoo_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
            <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/smallest/delicious_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
            <span class="get_mintshare"><a href="#">Get MintShare!</a></span>
        </ul>
    </div>
</div>

HTML разметка - горизонтальная панель (большие кнопки)

<div id='mintshare_fl'>
    <a class='sharetext'><img src='images/share_text.jpg'/><!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <div class='flyout'>
        <ul class='icons'>
            li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/big/facebook.png"/><b>Share on FB</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
            <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/big/twitter.png"/><b>Tweet This</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
            <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/big/stumbleupon.png"/><b>Stumble It</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
            <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/big/digg.png"/><b>Digg This</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
            <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/big/technorati.png"/><b>Technorati</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
            <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/big/delicious.png"/><b>Delicious</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
            <span class="get_mintshare"><a href="#"><img src="images/getmintshare.png"></a></span>
        </ul>
    </div>
</div>

HTML разметка - вертикальная панель (малые кнопки)

<div id="mintshare_ft_c">
    <div class="mintshare-wrap"><a class="top-a">Share This<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="flyout">
            <ul class="icons">
                <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/small/facebook_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/small/twitter_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/small/delicious_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/small/stumbleupon_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/small/digg_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/small/technorati_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/small/reddit_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/small/yahoo_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                <span class="get_mintshare"><a href="#">Get MintShare Now</a></span>
            </ul>
        </div>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </div>
</div>

HTML разметка - вертикальная панель (большие кнопки)

<div id="mintshare_ft">
    <div class="mintshare-wrap"><a class="top-a">Share This<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="flyout">
            <ul class="icons">
                <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/big/facebook.png"/><b>Share on FB</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/big/twitter.png"/><b>Tweet This</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/big/stumbleupon.png"/><b>Stumble It</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/big/digg.png"/><b>Digg This</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/big/technorati.png"/><b>Technorati</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                <li class="drop-li"><a href="#" class="drop-a"><img alt="" src="images/big/delicious.png"/><b>Delicious</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                <span class="get_mintshare"><a href="#">Get MintShare Now</a></span>
            </ul>
        </div>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </div>
</div>

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

 

CSS стили - горизонтальная панель (малые кнопки)

<link rel="stylesheet" type="text/css" href="css/mintshare_mini.css" />

CSS стили - горизонтальная панель (большие кнопки)

<link rel="stylesheet" type="text/css" href="css/mintshare_fl.css" />

CSS стили - вертикальная панель (малые кнопки)

<link rel="stylesheet" type="text/css" href="css/mintshare_ft_c.css" />

CSS стили - вертикальная панель (большие кнопки)

<link rel="stylesheet" type="text/css" href="css/mintshare_ft.css" />
Материалы по теме:

Кнопка с анимационным фоном на css3Кнопка с анимационным фоном на css3

Отличная кнопка на css3, кнопка реально классная и удобная, да и привлекает глаза посетителя....

Кнопки с градиентом на css3Кнопки с градиентом на css3

Кнопки с градиентом, такие кнопки можно встретить довольно часто......

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

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

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на ...

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

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

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

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

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

Набор пиктограммных кнопок на css3Набор пиктограммных кнопок на css3

Отличный набор пиктограмных кнопок с применением иконического шрифта. В наборе представлены как......
Интересные публикации:

The SameThe Same

Шикарный профессиональный html шаблон имеющий два стиля (светлый и тёмный), на главной странице используется стильный слайдер......

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carousel»

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...

Слайд эффект с помощью JavaScriptСлайд эффект с помощью JavaScript

Эффект в виде слайда, реализован с помощью javascript...

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

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

Paris ClarkParis Clark

Красивый html шаблон Paris Clark, на главной странице используется привлекательный слайдер, имеется портфолио, контактная форма......

Фиксированная контактная форма на css и JQueryФиксированная контактная форма на css и ...

Большинство контактных форм встречаемых на разных ресурсах, выглядят не очень то и захватывающе, по сути везде используются статичные формы, поэтому.....

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

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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