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

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

ОБСУЖДЕНИЕ

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

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

30 анимационных кнопок на CSS330 анимационных кнопок на CSS3

Неплохие анимационные кнопки на css3, имеются 30 кнопок, в том числе и 3D....

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

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

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

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

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

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

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

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

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

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......
Интересные публикации:

Галерея на jQueryГалерея на jQuery

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

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

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

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css3

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

LibertyLiberty

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

KroftKroft

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть возможность менять фон сайта непосредственно на странице......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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