RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Социальная выпадающая панель на css
Просмотров: 1760  Скачан: 204 раз  Комментариев в теме: 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" />
Материалы по теме:

12 кнопок с анимацией на css312 кнопок с анимацией на css3

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

Социальные иконки на css3Социальные иконки на css3

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

Pack кнопок на CSS3Pack кнопок на CSS3

Pack стильных кнопок на css3, в паке представлены восемь кнопок разного размера и цвета....

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

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

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

Красивая анимационная кнопка на css3, при наведении курсора на кнопку, с левой стороны......

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

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

Оригинальные кнопки с помощью css3Оригинальные кнопки с помощью css3

Оригинальные кнопки на css3, при наведении курсора на кнопку, она изменяет свой вид (растягивается, округляется, перекручивается)....
Интересные публикации:

Красивая форма обратной связи на PHP, CSS, JQueryКрасивая форма обратной связи на PHP, CS...

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилиз...

Music v1.4.3Music v1.4.3

Music - это шаблон музыкального портала для wordpress с уникальным набором функций и настроек....

Аккордеон изображенийАккордеон изображений с помощью css3

Красивый горизонтальный аккордеон для вывода изображений на сайте....

Горизонтальное LavaLamp менюГоризонтальное LavaLamp меню

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......

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

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

Design StudioDesign Studio

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

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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