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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

Социальные кнопки на CSSСоциальные кнопки на CSS

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

Mega Web Buttons PackMega Web Buttons Pack

Mega Pack кнопок на css, в паке собрано около 40-ка кнопок с разными иконками....

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

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

Мега cборка социальных кнопок на css +300Мега cборка социальных кнопок на cs...

Сборка +300 социальных кнопок , это 300 разных социальных кнопок созданных на css, которые без сомнения украсят любой сайт....

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном...

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

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

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

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Menu»

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......

MCUBE SolutionsMCUBE Solutions

HTML шаблон MCUBE Solutions хорошо подойдёт для сайта в сфере бизнеса, в шаблоне используется flash слайдер, который......

Слайдер на css3 и jqueryСлайдер на css3 и jquery

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

Вертикальное разноцветное меню АккордеонВертикальное разноцветное меню Аккордеон

Красивое разноцветное меню (Аккордеон.

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi-Item...

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

PHP скрипт комментариевСкрипт комментариев

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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