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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

Чекбокс на css3Чекбокс на css3

Чекбокс имитирующий реалистично кнопку включения, идея в принципе неплохая, но......

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

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

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

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

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

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

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

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

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

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

Hope CenterHope Center

Универсальный шаблон Hope Center на HTML5, был разработан для благотворительного сайта, в шаблоне используется красивый слайдер......

Горизонтальное выпадающее меню с помощью jqueryГоризонтальное выпадающее меню с помощью...

Горизонтальное меню в темном стиле с выпадающими пунктами....

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

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

Круговой слайдерКруговой слайдер css3

Если вы хотите эффектно представить какой либо продукт на своём сайте, но не знаете как это можно сделать. В таком случае представляю красивый слайдер...

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

В сборку вошли 12 неплохих кнопок на css. Кнопки работают в браузерах OPERA, Firefox, Chrome, IE....
  • Текущий 1.44/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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