Фиксированный блок кнопок социальных сетей средствами CSS без плагинов
2013-05-25Продолжая тему установки на сайт кнопок социальных сетей, затронутую в статье Создаем социальные кнопки для веб-сайта без плагинов, хочу рассказать сегодня о том, как можно сделать зафиксированную на месте вертикальную панель соцкнопок с помощью каскадных стилей CSS. Такая панель будет оставаться в одном и том же месте экрана не зависимо от прокрутки страницы веб-сайта. Это очень удобно для пользователя, поскольку блок социальных кнопок всегда доступен к использованию.
На подготовительном этапе создадим папку для изображений кнопок и назовем ее, например, “sbbar”. Поместим в нее картинки кнопок выбранных вами соцсетей. Можете использовать свои изображения или скачать архив с теми, что использовала я.
Теперь будем создавать саму “плавающую” относительно содержимого страницы панель. Она будет представлять собой блок div со вложенным в него списком соцкнопок ul. Присвоим div-блоку идентификатор socbutton-bar. Элементами списка li будут являться ссылки на социальные сети в виде кнопок.
Вот, что у нас получится:
|
1 2 3 4 5 6 7 8 9 |
<div id="socbutton-bar"> <ul> <li>ссылка 1</li> <li>ссылка 2</li> <li>ссылка 3</li> <li>ссылка 4</li> <li>ссылка 5</li> </ul> </div> |
Приведенную конструкцию нужно вставить внутри тегов <body></body> до либо после div-блока или таблицы (в зависимости от структуры построения сайта), содержащих макет сайта.
Сами ссылки я дам в конце статьи и вы самостоятельно выберите из них те, что вам нужны и вставите в приведенный выше шаблон.
Сейчас же займемся оформлением панели с помощью каскадных стилей CSS.
Зададим стиль для созданного нами блока div с идентификатором socbutton-bar:
|
1 2 3 4 5 6 7 8 9 10 11 |
#socbutton-bar{ position:fixed; /*зафиксировать позицию панели на экране*/ display: block; /*отображать панель в виде блока*/ top: 5px; /*отступ от верхнего края окна браузера*/ left: 5px; /*отступ от левого края окна браузера*/ padding:0px; margin:0px; width:50px; /*ширина блока*/ height:270px; /*высота блока*/ float:left; /*обтекание блока - слева*/ } |
Свойство position: fixed; заставит панель соцкнопок оставаться неподвижной при прокрутке страницы. Если вы расположите ее в верхнем левом углу, например, там она и останется, даже если вы прокрутили страничку до самого низа.
Теперь зададим параметры списка и расстояние между кнопками по вертикали, указав значение междустрочного интервала.
|
1 2 3 4 5 |
#socbutton-bar ul { margin:0; padding:0; list-style:none; line-height:14px; /*расстояние между кнопками по вертикали = междустрочный интервал*/} |
Отлично. Теперь наш блок разместился там, где нужно. Кнопочки заняли свои места относительно друг друга и все, что нам осталось – немного приукрасить блок, создав выделение кнопок при наведении на них курсора мыши. Это можно сделать разными способами, но в данном случае я предлагаю использовать свойство прозрачности opacity для создания эффекта подсвечивания. Пусть в обычном состоянии значение прозрачности кнопки будет 0,7, а при наведении курсора равно единице.
|
1 2 |
#socbutton-bar li a {opacity: 0.7;} #socbutton-bar li a:hover {opacity: 1;} |
Можете самостоятельно поэкспериментировать со значениями, выбрав наиболее соответствующее вашему дизайну.
Итак, готовый CSS-код будет выглядеть так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#socbutton-bar{ position:fixed; display: block; top: 5px; left: 5px; padding:0px; margin:0px; width:50px; height:270px; float:left; } #socbutton-bar ul { margin:0; padding:0; list-style:none; line-height:14px; } #socbutton-bar li a {opacity: 0.7;} #socbutton-bar li a:hover {opacity: 1;} |
А теперь, как и обещала, привожу содержание ссылок на некоторые социальные сети, которые необходимо добавить в приведенный шаблон списка.
Кнопка Вконтакте
|
1 |
<a onclick="window.open('http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>', 'vkontakte', 'width=626, height=436'); return false;" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" rel="nofollow"><img src="ваш путь/sbbar/vk.png" width="32" height="32" border="0" title="Поделиться с друзьями ВКонтакте" ></a> |
Кнопка Facebook
|
1 |
<a onclick="window.open('http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>', 'facebook', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="ваш путь/sbbar/fb.png" width="32" height="32" title="Поделиться с друзьями в Facebook" border="0" ></a> |
Кнопка Одноклассники
|
1 |
<a onclick="window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>', 'odkl', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>"><img src="ваш путь/sbbar/ok.png" border="0" width="32" height="32" title="Поделиться с друзьями в Одноклассниках" ></a> |
Кнопка Livejournal (ЖЖ)
|
1 |
<a onclick="window.open('http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>', 'lj', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" title="Рассказать в своем блоге livejournal.com"><img src="ваш путь/sbbar/lj.png" border="0" width="32" height="32"></a> |
Кнопка Мой Мир Mail.ru
|
1 |
<a onclick="window.open('http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>', 'mmir', 'width=626, height=436'); return false;" rel="nofollow" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="ваш путь/sbbar/mailru.png" border="0" width="32" height="32" title="Поделиться с друзьями Моего Мира на Mail.ru" ></a> |
Кнопка Я.ру
|
1 |
<a onclick="window.open('http://wow.ya.ru/posts_share_link.xml?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>', 'yaru', 'width=626, height=436'); return false;" rel="nofollow" href="http://wow.ya.ru/posts_share_link.xml?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><img src="ваш путь/sbbar/ya.png" border="0" width="32" height="32" title="Поделиться с друзьями на Я.ру" ></a> |
Не забудьте исправить "ваш путь/sbbar/название.png" на ваш собственный путь к картинке!
Удачи!
