» »

Фиксированная боковая панель на сайт

Фиксированная боковая панель на сайт

Очень аккуратно и стильно сделана боковая панель для сайта, которая будет стоять с правой стороны. также на ней есть красивый эффект при клике. Представлено будет в двух оттенках цвета, это серый, который идет по умолчанию и синий, что говорит о том, что сами можете на фотошоп выставить любую гамму цвета. Там всего три функций, это Лента RSS которая идет первая, вторая кнопка под социальную сеть в контакте. Но и третья будет относиться к вашему почтовому ящику, а точнее на адрес mail.ru, чтоб каждый пользователь мог иметь право зайти на этот интернет портал. Сама панель создана стильно, что может подойти как на светлый или темный, если говорить о серой, но и при наведение иконки будут в цвете изменятся и становиться ярко желтыми.

Если свои кнопки ставить будете, то вам только нужно выбрать по гамме цвета, чтоб формат PNG обязательно был, как здесь идет.

Установка:

Бокавая панель на сайт

CSS:

Код
.fixm-icons { background: url(http://zornet.ru/Aben/Gsa/zartyn/bgsartyn.png); height: 216px; width: 53px; position: fixed; top: 300px; left: 0px; }  
a.fixm-rss-ic { background: url(http://zornet.ru/Aben/Gsa/zartyn/icons-glow.png) no-repeat; background-position: -90px 0px; height: 56px; width: 50px; position: absolute; top: 24px; display:block; }  
a.fixm-vk-ic { background: url(http://zornet.ru/Aben/Gsa/zartyn/icons-glow.png) no-repeat; background-position: -90px -56px; height: 58px; width: 50px; position: absolute; top: 82px; left: 0px; display:block; }  
a.fixm-mail-ic { background: url(http://zornet.ru/Aben/Gsa/zartyn/icons-glow.png) no-repeat; background-position: -90px -114px; height: 48px; width: 50px; position: absolute; top: 140px; left: 0px; display:block; }  
a.fixm-rss-ic:hover {background-position: 0px 0px;}  
a.fixm-vk-ic:hover {background-position: 0px -56px;}  
a.fixm-mail-ic:hover {background-position: 0px -114px;}


Код:

Код
<div class="fixm-icons">  
<a href="http://zornet/news/rss" target="_blank" title="RSS подписка" class="fixm-rss-ic"></a>  
<a href="http://vk.com" target="_blank" title="VK.com" class="fixm-vk-ic"></a>
<a href="http://mail.ru" target="_blank" title="mail.ru" class="fixm-mail-ic"></a>
</div>


Здесь стили под синее боковую панель.

Панель на сайт с правой стороны

Код
.fixm-icons { background: url(http://zornet.ru/Aben/Gsa/zartyn/fixm-icons-3.png); height: 216px; width: 53px; position: fixed; top: 300px; left: 0px; }  
a.fixm-rss-ic { background: url(http://zornet.ru/Aben/Gsa/zartyn/icons-glow.png) no-repeat; background-position: -90px 0px; height: 56px; width: 50px; position: absolute; top: 24px; display:block; }  
a.fixm-vk-ic { background: url(http://zornet.ru/Aben/Gsa/zartyn/icons-glow.png) no-repeat; background-position: -90px -56px; height: 58px; width: 50px; position: absolute; top: 82px; left: 0px; display:block; }  
a.fixm-mail-ic { background: url(http://zornet.ru/Aben/Gsa/zartyn/icons-glow.png) no-repeat; background-position: -90px -114px; height: 48px; width: 50px; position: absolute; top: 140px; left: 0px; display:block; }  
a.fixm-rss-ic:hover {background-position: 0px 0px;}  
a.fixm-vk-ic:hover {background-position: 0px -56px;}  
a.fixm-mail-ic:hover {background-position: 0px -114px;}


PS - здесь вы даже сами можете выставить свои кнопки, если нужно. Так как сама панель идет отдельно от кнопок, что на ней располагаются.
19.11.2016 Просмотров: 1396 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Kolinkor
Kolinkor 20.11.2016 00:201
0
Синий цвет не очень смотрится, слишком ярко, а вот серый нормально.
tsakonter
tsakonter 20.11.2016 00:323
0
Это почему слишком синее, вот нашел и красную, все очень просто, сам делаешь как тебе нужно по оттенку.



Делаешь сам, можно даже и не на фотошоп, а по легче есть программы, чтоб нанести оттенок, тот который нужен. Здесь другое, а вообще на сайте этот скрипт сам по себе надо ставить и какие плюсы от него.
FeStemBer
FeStemBer 20.11.2016 00:242
0
Согласен, здесь как раз нужно цвет налаживать, чтоб был светло синий. Но больше кнопки интересует, они же с эффектом.



Так если ставить одну, то его не будет, если, чтоб так было, это надо умело на фотошоп рулить.
iMadeas
iMadeas 20.11.2016 00:534
0
Почему не будет? берете любой редактор (например Picture Manager, он есть на любой винде), обрезаете линию до одной иконки(без эффекта и с эффектом) и ставите. Соответственно задаёте собственные background-position и пр.
Что касается цвета, то в том же Picture Manager каждый может сделать под свой сайт. По мне, так красный лучше
kiva
kiva 20.11.2016 16:415
0
Здесь с вами не соглашусь, но видно что ссылки идут и значить нужно кнопки ставить и так же дублировать при наведение.
avatar